了解HTML 盒模型

时间:2022-11-11 09:34:08

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

盒子模型

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

了解HTML 盒模型

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

  边框(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, 上面所有设置的简写都适用, 所以就不重复了.