共计 2278 个字符，预计需要花费 6 分钟才能阅读完成。
css
1、盒模型
页面渲染时，dom 元素才有的 布局模型。可以通过 box-sizing 进行设置。根据计算宽高的区域可分为：
-
content-box(W3C 标准盒模型) -
border-box(IE 盒模型 width 包含 padding 和 border) -
padding-box(padding 计算入 width 内)
ie8+ 浏览器支持 content-box 和 border-box；
ff 则支持全部三个值。
-webkit-box-sizing: 100px; // for ios-safari, android
-moz-box-sizing:100px; //for ff
box-sizing:100px; //for other
<style type="text/css">
.content-box{
box-sizing:content-box;
-moz-box-sizing:content-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid #E6A43F;
background: blue;
}
.padding-box{
box-sizing:padding-box;
-moz-box-sizing:padding-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid #186645;
background: red;
}
.border-box{
box-sizing:border-box;
-moz-box-sizing:border-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid #3DA3EF;
background: yellow;
}
</style>
2、BFC
块儿级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响
IE 下为 Layout, 可通过 zoom:1 触发功能
- 使 BFC 内部浮动元素不会到处乱跑；
-
和浮动元素产生边界。
方法:- overflow: auto 让浮动的内容和周围的内容登高
- overflow: hidden 外边距塌陷
- display: flow-root 它可以创建无副作用的 BFC
` 给 <div> display: flow-root 属性后，<div> 中的所有内容都会参与 BFC，浮动的内容不会从底部溢出。`
触发条件:
- 根元素(<html>)
- 浮动元素（元素的 float 不是 none）
- 绝对定位元素（元素的 position 为 absolute 或 fixed）
- 行内块元素（元素的 display 为 inline-block）
- 表格单元格（元素的 display 为 table-cell，HTML 表格单元格默认为该值）
- 表格标题（元素的 display 为 table-caption，HTML 表格标题默认为该值）
- 匿名表格单元格元素（元素的 display 为 table、table-row、table-row-group、table-header-group、table-
- footer-group（分别是 HTML table、row、tbody、thead、tfoot 的默认属性）或 inline-table）
- overflow 值不为 visible 的块元素
- display 值为 flow-root 的元素
- contain 值为 layout、content 或 paint 的元素
- 弹性元素（display 为 flex 或 inline-flex 元素的直接子元素）
- 网格元素（display 为 grid 或 inline-grid 元素的直接子元素）
- 多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
- column-span 为 all 的元素始终会创建一个新的 BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。
htmlfloat!=none position = absolute || fixeddisplay = inline-block || flow-root || table、table-row、table-row-group、table-header-group、table-
应用场景
- 阻止 margin 重叠
- 可以包含浮动元素 —— 清除内部浮动(清除浮动的原理是两个 div 都位于同一个 BFC 区域之中)
- 自适应两栏布局
- 可以阻止元素被浮动元素覆盖
层叠上下文
层叠上下文 层叠等级 层叠顺序z-index
- 普通元素的层叠等级优先由其所在的层叠上下文决定。
- 层叠等级的比较只有在当前层叠上下文元素中才有意义。不同层叠上下文中比较层叠等级是没有意义的。
如何产生层叠上下文
- HTML 中的根元素 <html></html> 本身 j 就具有层叠上下文，称为“根层叠上下文”。
- 普通元素设置 position 属性为非 static 值并设置 z -index 属性为具体数值，产生层叠上下文。
-
CSS3 中的新属性也可以产生层叠上下文。
- 父元素的 display 属性值为 flex|inline-flex，子元素 z -index 属性值不为 auto 的时候，子元素为层叠上下文元素；
- 元素的 opacity 属性值不是 1；
- 元素的 transform 属性值不是 none；
- 元素 mix-blend-mode 属性值不是 normal`；
- 元素的 filter 属性值不是 none；
- 元素的 isolation 属性值是 isolate；
- will-change 指定的属性值为上面任意一个；
- 元素的 -webkit-overflow-scrolling 属性值设置为 touch。
正文完
