概念:
CSS 盒模型本质上是一个盒子,盒子包裹着HTML 元素,盒子由四个属性组成,从内到外分别是:content 内容、padding 内填充、border 边框、外边距 margin
分类:
W3C 盒子模型(标准盒模型)
IE 盒子模型(怪异盒模型)
外边距合并:
外边距合并,指的是margin
合并.块的顶部外边距和底部外边距有时被组合(折叠)为单个外边距,其大小是组合到其中的最大外边距,这种行为称为外边距合并。外边距合并只针对块级元素,而且是顶部或底部的外边距.
BFC
一个块格式化上下文(block formatting context)是Web页面的可视化CSS渲染的一部分。它是块盒子的布局发生,浮动互相交互的区域。
具有 BFC 特性的元素可以看作是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素,并且 BFC 具有普通容器所没有的一些特性。
触发 BFC:
body 根元素
浮动元素:float 除 none 以外的值
绝对定位元素:position (absolute、fixed)
display 为 inline-block、table-cells、flex
overflow 除了 visible 以外的值 (hidden、auto、scroll)
特点:
内部块级盒子垂直方向排列
盒子垂直距离由margin
决定,同一个BFC 盒子的外边距会重叠
BFC 就是一个隔离的容器,内部子元素不会影响到外部元素
BFC 的区域不会与float box叠加
每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
用途:
清除浮动 解决外边距 合并布局
相邻兄弟元素
//HTML <div class="up">我在上面</div> <div class="down">我在下面</div> //CSS .up { width: 100px; height: 100px; border: 1px solid blue; margin: 100px; } .down { width: 100px; height: 100px; border: 1px solid red; margin: 100px; display: inline-block; // 触发BFC } // up和down两个元素处于不同的BFC ,外边距不重合
父子元素
//HTML <div class="parent"> <div class="child">我是儿子</div> </div> //CSS .parent { width: 100px; height: 200px; background: red; margin-top: 50px; overflow: hidden; // 触发父元素FBFC,取消上边距合并 } .child { width: 50px; height: 50px; margin-top: 100px; border: 1px solid blue; }