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。
发表回复