11月22, 2017

浅谈CSS盒模型(CSS Box Model)

概念

在一个html文档中,每个元素都被表示为一个矩形的的盒子。这每一个矩形的盒子被描述为盒模型(CSS Box Model)。并且这个模型描述了元素所占空间的内容。

组成

正常情况

一般情况下,一个盒子是由以下部分组成

width = content-width + padding-left + padding-right + border-left-width + border-right-width

height = content-height + padding-top + padding-bottom + border-top-width + border-bottom-width

margin 指外边距,主要是为了分隔与当前元素之外的元素的距离。由于盒子之间共享外边距,有时会出现外边距合并/塌陷的情况。例如下面一段代码。

.box {
  width: 200px;
  height: 200px;
  background-color: green;
  border: 5px solid red;
  padding: 20px;
  margin: 40px;
}
.box2 {
  margin-top: 60px;
}

box1 的 bottom 距离 box2 的 top 并不会有 40px+60px=100px 的距离,而是有 60px 的距离。

<div class="box box1">
  <img src="https://beimg.oss-cn-beijing.aliyuncs.com/favicon.png!ace" />
</div>
<div class="box box2">
  <img src="https://beimg.oss-cn-beijing.aliyuncs.com/favicon.png!ace" />
</div>

box-sizing 下的计算

box-sizing用于更改浏览器默认的盒模型计算方式。可谓是开发者编辑UI的福音。他解决了无数多关于占位、溢出、宽高计算、居中计算的问题。

以下是他的两个关键属性:

  • box-sizing: content-box; 默认值,盒子占有的实际大小与上述正常模式相同
  • box-sizing: border-box; 除外边距外,盒子本身占有的实际大小包括边框、内边距、内容大小。

关于外边距塌陷(margin collapsing)

几种表现形式,以下针对块级元素

  1. 上下外边距不等

    当两个上下排列的盒子,bottom 和 top 分别具有 margin 时,会有外边距组合的情况出现,这种行为被称为外边距塌陷(margin collapsing),而浏览器经过计算,最终会取两个盒子中较大的值。倘若含有负值,例如上面盒子为20px,下面为-20px,最终的表现则为 0。

  2. 子元素的外边距在父元素中也有体现

    通俗来讲,是子元素中设置了margin 而父元素中没有除 margin 外若没有其他有关影响盒子宽高的描述,将会导致父元素在表层体现上也会具有margin。而且这两个合并成了一个。例如如下代码,父元素也会产生 margin 效果。

     <div>
       <div class="box" />
     </div>
    

    这种情况的发生,往往在父元素和第一个子元素或者最后一个子元素之间

  3. 空元素的上下 margin 会合并

     <div style="margin-top: 20px; margin-bottom: 20px;"></div>
    

    上述代码中,该空元素与上下间隔为 20px。

总结

以上,都在说一种现象。所谓的CSS布局,看似有很多漏洞和不足,其实,都是编码的周全考虑。这样的计算方式看似不合理,实际上,对浏览器而言,根据这些规则绘制UI是非常友好的。总之,不要把自己想当然的东西作为一种常识记在心中,总有些不同角度的合理解释,这才是代码。

参考整理自

本文链接:https://beacelee.com/post/css-box-model.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。