一、CSS盒模型
1、概念
CSS
盒子模型本质上是一个盒子。封装了周围的 HTML
元素。它包括:外边距(margin)、边框(border)、内边距(padding)、实际内容(element)四个属性。
CSS盒模型有两种:标准模型 + IE模型
2、区别
标准盒模型:盒子总宽度/高度 = width/height + padding + border + margin IE盒子模型:盒子总宽度/高度 = width/height + margin
3、如何设置这两种标准
/*语法:*/box-sizing: content-box; /*浏览器默认设置*/box-sizing: border-box;/*IE模型设置*//*实例*/.child { width: 100%; height: 100px; background: #336667; margin-top: 10px; box-sizing: content-box; }
二、外边距合并
只有 margin
上下的边距会合并,左右的边距不会合并
实例1:
父元素里面嵌套了一个子元素,已知子元素的高度是 100px,子元素与父元素的上边距是 10px,计算父元素的实际高度。
CSS:
.parents { width: 100px; background: #FF9934; overflow: hidden/*有这句话parents高度是110px*/}.child { width: 100%; height: 100px; background: #336667; margin-top: 10px;}
HTML:
<div class='parents'> <div class='child'><div>div>
以上代码:父元素不加 overflow: hidden
,则父元素的实际高度为 100px
; 如加上 overflow: hidden
父元素高度为 110px
,给父元素创建了 BFC
,块级格式化上下文。
实例2
相邻的两个或多个外边距 (margin) 在垂直方向会合并成一个外边距(margin) 相邻:没有被非空内容、padding、border 或 clear 分隔开的margin特性. 非空内容就是说这元素之间要么是兄弟关系或者父子关系
CSS
*{margin:0;padding:0;} #div1{ border: 3px solid yellow; height: 200px; margin-top: 20px; } #div2{ height: 100px; background: blue; margin-top: 20px; } #div3{ height: 50px; width: 50%; background: green; margin-top: 50px; }
HTML
<div id="div1"> <div id="div2"> <div id="div3"> div> div>div>
因为 div2
与div3
的外边距是相邻的(是父子关系的相邻),当div2
的 margin-top
为 20, div3
的 margin-top
也为 50,此时 div2
与 div3
的外边距会合并,就是折叠。 而 div1
与 div2
的外边距不是相邻的(div1有border),它们便不会折叠。
实例3
参加折叠的margin都是正值:取其中 margin 较大的值为最终 margin 值。
<div style="height:90px; margin-bottom:99px; width:90px; background-color: red;">Xdiv> <div style="height:90px; margin-top:100px; width:90px; background-color: blue;">Ydiv>
参与折叠的 margin 都是负值:取的是其中绝对值较大的,然后,从 0 位置,负向位移。
<div style="height:90px; margin-bottom:-10px; width:90px; background-color: red;">Xdiv> <div style="height:90px; margin-top:-30px;width:70px; background-color: blue;">Ydiv>
参与折叠的 margin 中有正值,有负值:先取出负 margin 中绝对值中最大的,然后,和正 margin 值中最大的 margin 相加。
三、BFC(块级格式化上下文)
BFC
是一个独立的布局环境。可以理解为一个区域,在这个区域内的元素无论如何布局排版,都不影响区域外的元素。
父子元素和兄弟元素边距重叠,重叠原则取最大值。空元素的边距重叠是取 margin
与 padding
的最大值。
1、BFC
原理:
1)、内部的 Box
会在垂直方向,从顶部开始一个接着一个地放置;
2)、Box 垂直方向的距离由 margin
(外边距)决定,属于同一个 BFC
的两个相邻 Box
的 margin
会发生重叠;
3)、每个元素的 margin Box
的左边, 与包含块 border Box
的左边相接触,(对于从左到右的格式化,否则相反)。即使存在浮动也是如此;
4)、BFC
在页面上是一个隔离的独立容器,外面的元素不会影响里面的元素,反之亦然。文字环绕效果,设置 float;
5)、BFC
的区域不会与 float Box
重叠(清浮动);
6)、计算 BFC
的高度时,浮动元素也参与计算。
2、触发 BFC
条件(即脱离文档流)
0)、根元素,即 HTML 元素(最大的一个 BFC
)
1)、浮动( float
的值不为 none
)
2)、绝对定位元素( position
的值为 absolute
或 fixed
)
3)、行内块( display
为 inline-block
)
4)、表格单元( display
为 table、table-cell、table-caption、inline-block
等 HTML
表格相关的属性 )
5)、弹性盒( display
为 flex
或 inline-flex
)
6)、默认值。内容不会被修剪,会呈现在元素框之外(overflow
不为 visible
)
3、 BFC使用场景
1)、自适应两(三)栏布局(避免多列布局由于宽度计算四舍五入而自动换行)
2)、避免元素被浮动元素覆盖
3)、可以让父元素的高度包含子浮动元素,清除内部浮动(原理:触发父 div 的 BFC 属性,使下面的子 div 都处在父 div的同一个 BFC 区域之内)
4)、去除边距重叠现象,分属于不同的 BFC 时,可以阻止 margin 重叠
四、IFC(行内格式化上下文)
1、IFC基本概念
2、IFC
原理(渲染规则|布局规则):
(1)内部的 Box 会在水平方向,从含块的顶部开始一个接着一个地放置;
(2)这些 Box 之间的水平方向的 margin,border 和padding 都有效;
(3)Box 垂直对齐方式:以它们的底部、顶部对齐,或以它们里面的文本的基线(baseline)对齐(默认,文本与图片对齐),例:line-heigth
与 vertical-align
。