欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

了解HTML 盒模型_html/css_WEB-ITnose

程序员文章站 2022-06-03 14:25:00
...
  HTML在布局上, 有一个非常重要的模型, 那就是盒子模型, 在盒子模型中把标签内容理解为一个物品, 而css样式理解为包容着这个物品的盒子, 一般的块级标签都具有盒子模型的特征, 你可以在css中对这个盒子进行设置, 以达到自己布局的目的, 我这里绘制了个简图, 只写了内填充和外边距, 因为我感觉其他的属性更好用文字和代码理解. 同样的在学习这个的过程中, 要勤于代码试验, 测试, 否则是非常不便于掌握的知识.

盒子模型

  首先盒子, 什么是盒子, 就是包含着内容的盒子, 也就是第一个黑色框, 这个盒子和内容(橘色块)间是内填充(padding)(绿色), 盒子和盒子间的间距称之为外边距(margin)(紫色), 盒子有边框(border)(蓝色), 这三个部分都有四个方向的属性, 比如内填充的padding-top, padding-left, padding-right, padding-bottom, 这个数值影响着内容的位置, 应该看起来还算明确吧(作图能力较为拙计).

  盒子介绍完了, 简单说说各种属性, 方便大家测试学习, 后面不像前面介绍标签那么仔细了, 因为本人的能力有限, 有些东西自己能够理解, 但是表达起来可能就不是那么形象了, 所以大家看着一点点测试就好了.

  边框(border)

  盒子模型的边框是有其宽度, 线条类型, 颜色的, 代码如下:

  div{

    border-width:2px;

    border-style:solid;

    border-color:red;

  }

  这段代码也可以简写为

  div{

    border:2px solid red;

    }

  border-style(边框样式), 常见的有三种, dashed(虚线), dotted(点线), solid(实线)

  border-color(边框颜色), 这个所有的设置颜色都是一样, 可以使用颜色英文名字, 也可以使用颜色的十六进制值.

  border-width(边框宽度), 一般跟随的是像素值, 不过也有类型值thin, medium, thick, 不过非常不常用, 简单说下.

  之前也说过border也有四个方向上的属性, 所以假如你需要单独只为一个边设置边框, 而不是四个边, 那么在设置的时候就不要了写border, 而是border-bottom.

  盒模型计算宽度或高度

  css样式表代码如示例:

  div{

    width:200px;

    height:100px;

    border:1px solid red;

    margin:10px;

    padding:20px;

    )

  那么计算这个div块的宽度应该由外至内, 两个外边距 + 两个边框 + 两个内填充 + 一个内容标签, 答案应该是 2 * 10px + 2 * 1px + 2 * 20px + 200px = 262px, 这个就是这个盒子模型的完整宽度, 高度同理, 不再赘述.

  盒模型的填充

  元素内容和边框之间的内填充是可以单独设置距离的, 填充可以通过两种代码设置形式设置, 分别演示.

  完整代码内填充

  div{

    padding-top:20px;

    padding-right:10px;

    padding-bottom:15px;

    padding-left:30px;

    }

  顺时针简写填充(顺序和上面顺序一致, 上右下左)

  div{

    paddng:20px 10px 15px 30px;

    }

  这个实现的效果和上面的完整版是一样的.

  如果上右下左的填充相同, 那么可以简写成一个

  div{

    padding:20px;

    }

  如果上下填充一样(10px), 左右填充一样(20px)

  div{

    padding:10px 20px;

    }

  外间距和内填充一样, 只是把padding改成margin, 上面所有设置的简写都适用, 所以就不重复了.