css基础

jiezi

5 年前

页面渲染时，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>

块儿级格式化上下文，是一个独立的渲染区域，让处于 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）。

html
float!=none
position = absolute || fixed
display = 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。

css基础

css

1、盒模型

2、BFC

功能

触发条件:

应用场景

层叠上下文

如何产生层叠上下文