CSS规范 > 8 盒模型 Box Model

2019年9月7日 171次阅读来源: 残阳映枫红

2017-07-20: 关于外边距折叠, 推荐问题: https://segmentfault.com/q/10…

8 盒模型 Box Model

URL: http://www.w3.org/TR/CSS2/box…
Translator : HaoyCn
Date: 15th of Aug, 2015

译者注：本译文仅择精要部分翻译了规范，主要描述了盒模型结构，以及重点分析外边距折叠。个人水平有限，欢迎指正！

CSS盒模型所描述的矩形盒由文档树内的元素生成，根据视觉格式化模型布局。

8.1 盒尺寸 Box Dimensions

每个盒都有一个内容区域 Content （如，文本，图片等）以及可选的围绕在周围的内边距、边框和外边距区域；每个区域的大小由本文后述的属性指定。下图展示了这些区域的关联以及用于描述外边距、边框和内边距的各部分的术语。

该文档结果为文档树中（省略其他关系）一个 ul 元素及其两个 li 子元素。

下面的第一图展示了例子的结果。第二图展示了 ul 元素及其 li 子元素的外边距、内边距和边框之间的关系。（图片不成比例）

http://segmentfault.com/a/119…。

如果读者已经掌握清除浮动和空隙的知识，那就让我们来看一个有空隙的情景。

如果一个有空隙的元素的上下外边距相邻，其外边距将同其后同胞的相邻外边距折叠，但不同父块的下外边距折叠。

以下代码中， B 是浮动块，为清除其浮动， C 引入了空隙。

共同CSS：

html,body{padding:0;margin:0;}
/*横线，直观对比折叠情况*/
.line{height:50px;background:red;} 
.mt{margin-top:50px;}
.mb{margin-bottom:50px;}
#B{float:left;width:1px;height:1px;}
#C{clear:both;}

其外边距将同其后同胞的相邻外边距折叠：

HTML：

<body>
   <div id="A">
      <div id="B"></div>
      <div id="C" class="mb"></div>
      <div id="D" class="mb"></div>
      <div class="line"></div>
   </div>
 </body>

渲染结果是， C 和 D 的外边距折叠。

不同父块的下外边距折叠

HTML：

 <body>
   <div id="A" class="mb">
      <div id="B"></div>
      <div id="C" class="mb"></div>
   </div>
   <div class="line"></div>
 </body>

渲染结果是， C 的外边距不同其父元素 A 的外边距折叠。

四、避免盒自身垂直外边距折叠

如果一个盒不建立新的块格式化上下文、 min-height 计算值为零、 height 计算值为零或 auto 、没有在文档流内的子盒，其上下外边距

由此可以得出几种避免盒自身上下外边距折叠的办法，简单列举如下：

建立新块格式化上下文，如 overflow: hidden
设置 min-height
设置固定高 height
添加文档流内（即非浮动、非绝对定位）子盒

需要注意最后一种办法，子盒要么有边框或内边距，要么有内容，否则父盒的自身垂直外边距同样会折叠。而如果子盒只有垂直外边距，该垂直外边距将同父盒的垂直外边距折叠，而不会阻止父盒自身垂直边距折叠。

    原文作者：残阳映枫红
    原文地址: https://segmentfault.com/a/1190000003099116
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。