欲望越大，我们需要的奔跑速度就越快；而筋疲力尽之时，便是我们幸福感滑坡之时
大家好，我是柒八九。
今天，我们又开辟了一个新的篇幅 --前端面试。即是把一些平时常用的概念和工具方法整理和罗列，也算是一种变向的未雨绸缪。
该系列的文章，大部分都是前面文章的知识点汇总，但是也不乏参考其他优秀文章。不过，大家可以放心，里面的代码和知识点，都有迹可循。
好了，天不早了，干点正事哇。 
你能所学到的知识点
- 选择器
- 流、元素
- 盒模型
- 元素超出宽度...处理
- 元素隐藏
- 层叠规则
- 块级格式化上下文
- 元素居中
- flex布局
- Chrome支持小于12px 的文字
- CSS 优化处理 (6个)
- 回流、重绘
- 硬件加速
- Css预编译语言
选择器
选择器（.#[]:::）5个
瞄准目标元素
- 类选择器
- 以
.开头
- ID选择器
#开头- 权重相当高
- ID一般指向唯一元素
- 属性选择器
- 含有
[]的选择器 [title]{}/[title="test"]{}
- 伪类选择器
- 前面有一个冒号(
:)的选择器 :link：选择未被访问的链接:visited：选取已被访问的链接:active：选择活动链接:hover：鼠标指针浮动在上面的元素
- 伪元素选择器
- 有连续两个冒号(
::)的选择器 ::before: 选择器在被选元素的内容前面插入内容::after: 选择器在被选元素的内容后面插入内容
关系选择器 （空格>~+）4个
根据与其他元素的关系选择元素的选择器
- 后代选择器
- 选择所有合乎规则的后代元素
- 空格链接
- 相邻后代选择器
- 仅仅选择合乎规则的儿子元素
- 孙子，重孙子元素忽略
>链接
- 兄弟选择器
- 选择当前元素后面的所有合乎规则的兄弟元素
~链接
- 相邻兄弟选择器
- 仅仅选择当前元素相邻的那个合乎规则的兄弟元素
+链接- 常见的使用场景是，改变紧跟着一个标题的段的某些表现方面
权重
!important(10000)- 内联（
1000）- ID选择器（
0100）- 类选择器（
0010）- 标签选择器（
0001）
上面的优先级计算规则，内联样式的优先级最高，如果外部样式需要覆盖内联样式，就需要使用!important
流、元素
块级元素
常见的块级元素
块级元素和display为block的元素不是一个概念- 元素默认的
display值是list-item
元素默认的
display值是table基本特征:一个水平流上只能单独显示一个元素，多个块级元素则换行显示
由于块级元素具有换行特性,配合
clear属性用来清除浮动.clear::after{ content:''; display:table; //或者list-item clear:both; } 复制代码
盒子
每个元素都有两个盒子
- 外在盒子
- 负责元素是可以一行显示，还是只能换行显示
- 内在盒子
- 负责宽高、内容呈现
按照
display的属性值不同block
- 外在盒子：块级盒子
- 内在盒子：块级容器盒子
inline-block
- 外在盒子：内联盒子
- 内在盒子：块级容器盒子
inline
- 外在盒子：内联盒子
- 内在盒子：内联盒子
可以粗略的认为：
display:block ≈ display:block-block display:inline≈ display:inline-inline 复制代码
块级盒子负责结构,内联盒子负责内容
内联元素
如何区分内联元素
- 从定义上：内联元素的内联特指外在盒子
- 从表现上：可以和文字在一行显示
幽灵空白节点
在H5文档声明中，内联元素的所有解析和渲染表现就，如同每个行框盒子的前面有一个空白节点一样，这个空白节点永远透明，不占据任何宽度。表现如同文本节点一样。
幽灵空白节点也是一个盒子，但是一个假想盒，名为
strut。一个存在于每个行框盒子前面，同时具有该元素的字体和行高属性的0宽度的内联盒
行框盒子(line box),每一行就是一个行框盒子,每个行框盒子又是由一个个内联盒子组成的。
盒模型
一个盒子由四个部分组成：
content、padding、border、margincontent，即实际内容，显示文本和图像
content属性大都是用在::before/::after这两个伪元素中
padding，即内边距，内容周围的区域
- 内边距是透明的
- 取值不能为负
- 受盒子的
background属性影响 padding百分比值无论是水平还是垂直方向均是相对于宽度计算
boreder，即边框，围绕元素内容的内边距的一条或多条线，由粗细、样式、颜色三部分组成margin，即外边距，在元素外创建额外的空白，空白通常指不能放其他元素的区域
标准盒模型
- 盒子总宽度 =
width+padding+border+margin; - 盒子总高度 =
height+padding+border+margin
也就是，
width/height只是内容宽高，不包含padding和border值IE 怪异盒子模型
- 盒子总宽度 =
width+margin; - 盒子总高度 =
height+margin;
也就是，
width/height包含了padding和border值更改盒模型
CSS 中的
box-sizing属性定义了引擎应该如何计算一个元素的总宽度和总高度box-sizing: content-box|border-box 复制代码
content-box(默认值)，元素的width/height不包含padding，border，与标准盒子模型表现一致border-box元素的width/height包含padding，border，与怪异盒子模型表现一致
唯一离不开
box-sizing:border-box的就是:原生普通文本框和文本域</code>的100%自适应父容器宽度</div><div>替换元素的特性之一:尺寸由<em>内部元素</em>决定并且无论其<code>display</code>属性值是<code>Inline</code>还是<code>block</code>也就是说替换元素的宽度却不受<code>display</code>水平影响</div><div>而<code><textarea>/<input></code>就是替换元素,修改<code><textarea></code>的<code>display</code>为<code>block</code>是无法让尺寸100%自适应父容器。</div><div>通过设置<code><textarea></code>的width为100%，自适应父容器。</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22textarea%7B%5Cn%20width%3A100%25%3B%5Cn%20box-sizing%3Aborder-box%3B%5Cn%7D%5Cn%E5%A4%8D%E5%88%B6%E4%BB%A3%E7%A0%81%22%2C%22id%22%3A%22YTTNX%22%7D"></div><blockquote style="background-color: #FFF9F9;"><div>设计初衷：解决<strong>替换元素</strong>宽度自适应问题</div></blockquote><div data-card-type="block" data-ready-card="hr"></div><h1 id="4k54Z" style="text-align: center;"><br /></h1><h1 id="h98qk" style="text-align: center;">元素超出宽度...处理</h1><div style="text-align: center;"><br /></div><h2 id="tc9DO">单行 (AKA: TWO)</h2><div><br /></div><ol><li style="padding-left: 6px;"><code>text-overflow:ellipsis</code>：当文本溢出时，显示省略符号来代表被修剪的文本</li><li style="padding-left: 6px;"><code>white-space:nowrap</code>:设置文本不换行</li><li style="padding-left: 6px;"><code>overflow:hidden</code>：当子元素内容超过容器宽度高度限制的时候，裁剪的边界是<code>border box</code>的内边缘</li><li style="padding-left: 6px;">用三个属性的首字母就是：<code>TWO</code></li></ol><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22p%7B%5Cn%20%20%20%20text-overflow%3A%20ellipsis%3B%5Cn%20%20%20%20white-space%3A%20nowrap%3B%5Cn%20%20%20%20overflow%3A%20hidden%3B%5Cn%20%20%20%20width%3A400px%3B%5Cn%20%20%7D%5Cn%E5%A4%8D%E5%88%B6%E4%BB%A3%E7%A0%81%22%2C%22id%22%3A%22DmAlb%22%7D"></div><h2 id="dipbw"><br /></h2><h2 id="QJ9cC">多行</h2><div><br /></div><ol><li style="padding-left: 6px;">基于高度截断（伪元素 + 定位）</li><li style="padding-left: 6px;">基于行数截断（）</li></ol><h3 id="PnkNt" style="padding-left: 9px;"><br /></h3><h3 id="SMFDh" style="padding-left: 9px;">基于高度截断</h3><div style="padding-left: 9px;"><br /></div><div>关键点 <code>height + line-height + ::after + 子绝父相</code></div><div>核心的css代码结构如下：</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22.text%20%7B%5Cn%20%20%20%20position%3A%20relative%3B%5Cn%20%20%20%20line-height%3A%2020px%3B%5Cn%20%20%20%20height%3A%2040px%3B%5Cn%20%20%20%20overflow%3A%20hidden%3B%5Cn%20%20%7D%5Cn.text%3A%3Aafter%20%7B%5Cn%20%20%20%20content%3A%20%5C%22...%5C%22%3B%5Cn%20%20%20%20position%3A%20absolute%3B%5Cn%20%20%20%20bottom%3A%200%3B%5Cn%20%20%20%20right%3A%200%3B%5Cn%20%20%20%20padding%3A%200%2020px%200%2010px%3B%5Cn%7D%5Cn%E5%A4%8D%E5%88%B6%E4%BB%A3%E7%A0%81%22%2C%22id%22%3A%22WuH2J%22%7D"></div><h3 id="NAAfJ" style="padding-left: 9px;"><br /></h3><h3 id="sKrh9" style="padding-left: 9px;">基于行数截断</h3><div style="padding-left: 9px;"><br /></div><div>关键点：<code>box + line-clamp + box-orient</code> + <code>overflow</code></div><ol><li style="padding-left: 6px;"><code>display: -webkit-box</code>：将对象作为<strong>弹性伸缩盒子模型</strong>显示</li><li style="padding-left: 6px;"><code>-webkit-line-clamp: n</code>：和①结合使用，用来限制在一个块元素显示的文本的行数(<code>n</code>)</li><li style="padding-left: 6px;"><code>-webkit-box-orient: vertical</code>：和①结合使用 ，设置或检索伸缩盒对象的子元素的排列方式</li><li style="padding-left: 6px;"><code>overflow: hidden</code></li></ol><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3Cp%3E%5Cn%20%20In%20this%20example%20the%20%3Ccode%3E-webkit-line-clamp%3C%2Fcode%3E%20property%20is%20set%20to%5Cn%20%20%3Ccode%3E3%3C%2Fcode%3E%2C%20which%20means%20the%20text%20is%20clamped%20after%20three%20lines.%20An%20ellipsis%5Cn%20%20will%20be%20shown%20at%20the%20point%20where%20the%20text%20is%20clamped.%5Cn%3C%2Fp%3E%5Cn%E5%A4%8D%E5%88%B6%E4%BB%A3%E7%A0%81%22%2C%22id%22%3A%22LCNNw%22%7D"></div><div>css</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22p%20%7B%5Cn%20%20width%3A%20300px%3B%5Cn%20%20display%3A%20-webkit-box%3B%5Cn%20%20-webkit-box-orient%3A%20vertical%3B%5Cn%20%20-webkit-line-clamp%3A%203%3B%5Cn%20%20overflow%3A%20hidden%3B%5Cn%7D%5Cn%E5%A4%8D%E5%88%B6%E4%BB%A3%E7%A0%81%22%2C%22id%22%3A%229Lgrq%22%7D"></div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fzd7oztix3a4mm_aeb68dd103004b33abbffbcfb6c622af.png%22%2C%22originWidth%22%3A670%2C%22originHeight%22%3A212%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A670%2C%22height%22%3A212%7D"></span></div><div data-card-type="block" data-ready-card="hr"></div><h1 id="8epWJ" style="text-align: center;"><br /></h1><h1 id="yfQgv" style="text-align: center;">元素隐藏</h1><div style="text-align: center;"><br /></div><div>可按照隐藏元素<strong>是否占据空间</strong>分为<strong>两大类</strong>(6 + 3)</div><ol><li>元素不可见，不占空间(<code>3absolute</code>+<code>1relative</code>+<code>1script</code>+<code>1display</code>)</li></ol><ol data-lake-indent="1"><li style="padding-left: 6px;"><code><script></code></li><li style="padding-left: 6px;"><code>display:none</code></li><li style="padding-left: 6px;"><code>absolute</code> + <code>visibility:hidden</code></li><li style="padding-left: 6px;"><code>absolute</code> + <code>clip:rect(0,0,0,0)</code></li><li style="padding-left: 6px;"><code>absolute</code> + <code>opacity:0</code></li><li style="padding-left: 6px;"><code>relative</code>+<code>left</code>负值</li></ol><ol start="2"><li>元素不可见，占据空间(3个)</li></ol><ol data-lake-indent="1"><li style="padding-left: 6px;"><code>visibility</code>:<code>hidden</code></li><li style="padding-left: 6px;"><code>relative</code> + <code>z-index</code>负值</li><li style="padding-left: 6px;"><code>opacity:0</code></li></ol><h2 id="N2Oa5"><br /></h2><h2 id="F1gVN">元素不可见，不占空间</h2><div><br /></div><h3 id="a7xqr" style="padding-left: 9px;"><code><br /></code></h3><h3 id="ttiEd" style="padding-left: 9px;"><code><script></code></h3><div style="padding-left: 9px;"><br /></div><div>其他特点：辅助设备无法访问，同时不渲染</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3Cscript%20type%3D%5C%22text%2Fhtml%5C%22%3E%5Cn%20%20%3Cimg%20src%3D%5C%221.jpg%5C%22%3E%5Cn%3C%2Fscript%3E%5Cn%E5%A4%8D%E5%88%B6%E4%BB%A3%E7%A0%81%22%2C%22id%22%3A%224sqcZ%22%7D"></div><h3 id="hhcPa" style="padding-left: 9px;"><br /></h3><h3 id="HoEdu" style="padding-left: 9px;">display:none</h3><div style="padding-left: 9px;"><br /></div><div>其他特点：辅助设备无法访问，<strong>资源加载，DOM可访问</strong></div><div>对一个元素而言，如果<code>display</code>计算值是none，则该元素以及所有后代元素都隐藏</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22.hidden%20%7B%5Cn%20%20%20display%3Anone%3B%5Cn%7D%5Cn%E5%A4%8D%E5%88%B6%E4%BB%A3%E7%A0%81%22%2C%22id%22%3A%22YAPMA%22%7D"></div><h3 id="43HNc" style="padding-left: 9px;"><br /></h3><h3 id="9WJ2C" style="padding-left: 9px;">absolute + visibility</h3><div style="padding-left: 9px;"><br /></div><div>其他特点：辅助设备无法访问，但显隐的时候有<code>transition</code>效果</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22.hidden%7B%5Cn%20%20position%3Aabsolute%3B%5Cn%20%20visibility%3Ahidden%3B%5Cn%7D%5Cn%E5%A4%8D%E5%88%B6%E4%BB%A3%E7%A0%81%22%2C%22id%22%3A%22bNAru%22%7D"></div><h3 id="opZSF" style="padding-left: 9px;"><br /></h3><h3 id="spUba" style="padding-left: 9px;">absolute + clip</h3><div style="padding-left: 9px;"><br /></div><div>其他特点：不能点击，但<strong>键盘可访问</strong></div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22.hidden%7B%5Cn%20position%3Aabsolute%3B%5Cn%20clip%3Arect(0%2C0%2C0%2C0)%3B%5Cn%7D%5Cn%E5%A4%8D%E5%88%B6%E4%BB%A3%E7%A0%81%22%2C%22id%22%3A%2267O4p%22%7D"></div><h3 id="rXhZ6" style="padding-left: 9px;"><br /></h3><h3 id="e0aWa" style="padding-left: 9px;">absolute + opacity</h3><div style="padding-left: 9px;"><br /></div><div>其他特点：可点击</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22.hidden%7B%5Cn%20position%3Aabsolute%3B%5Cn%20opacity%3A0%3B%5Cn%7D%5Cn%E5%A4%8D%E5%88%B6%E4%BB%A3%E7%A0%81%22%2C%22id%22%3A%22zTbQP%22%7D"></div><h3 id="pD7X0" style="padding-left: 9px;"><code><br /></code></h3><h3 id="v6EHp" style="padding-left: 9px;"><code>relative</code>+负值</h3><div style="padding-left: 9px;"><br /></div><div>其他特点：不能点击，但键盘可访问</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22.hidden%7B%5Cn%20position%3Arelative%3B%5Cn%20left%3A-999em%3B%5Cn%7D%5Cn%E5%A4%8D%E5%88%B6%E4%BB%A3%E7%A0%81%22%2C%22id%22%3A%22iEOtg%22%7D"></div><h2 id="h4IUu"><br /></h2><h2 id="oCIFc">元素不可见，占据空间</h2><div><br /></div><h3 id="EYj2G" style="padding-left: 9px;">visibility:hidden</h3><div style="padding-left: 9px;"><br /></div><div>其他特点：不能点击，辅助设备无法访问</div><div><code>visibility</code> 的继承性</div><ul><li>父元素设置<code>visibility:hidden</code>，子元素也看不见</li><li>但是，如果子元素设置了<code>visibility:visible</code>，则<strong>子元素又会显示出来</strong></li></ul><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22.hidden%7B%5Cn%20visibility%3Ahidden%3B%5Cn%7D%5Cn%E5%A4%8D%E5%88%B6%E4%BB%A3%E7%A0%81%22%2C%22id%22%3A%22Cgyr2%22%7D"></div><h3 id="YGvTX" style="padding-left: 9px;"><br /></h3><h3 id="3CSiY" style="padding-left: 9px;">relative + z-index</h3><div style="padding-left: 9px;"><br /></div><div>其他特点：不能点击，键盘可访问</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22.hidden%7B%5Cn%20position%3Arelative%3B%5Cn%20z-index%3A-1%3B%5Cn%7D%5Cn%E5%A4%8D%E5%88%B6%E4%BB%A3%E7%A0%81%22%2C%22id%22%3A%22Mi2io%22%7D"></div><h3 id="vr8N7" style="padding-left: 9px;"><br /></h3><h3 id="WKQdf" style="padding-left: 9px;">opacity:0</h3><div style="padding-left: 9px;"><br /></div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22.hidden%7B%5Cn%20opacity%3A0%3B%5Cn%20filter%3AAlpha(opacity%3D0)%5Cn%7D%5Cn%E5%A4%8D%E5%88%B6%E4%BB%A3%E7%A0%81%22%2C%22id%22%3A%22nVshc%22%7D"></div><h2 id="TrmDS"><br /></h2><h2 id="jHaHu">总结</h2><div><br /></div><div>最常用的还是<code>display:none</code>和<code>visibility:hidden</code>，其他的方式只能认为是奇招，它们的真正用途并不是用于隐藏元素，所以并不推荐使用它们。</div><div>关于<code>display: none</code>、<code>visibility: hidden</code>、<code>opacity: 0</code>的区别，如下表所示：</div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fzd7oztix3a4mm_a2a900497420446fa82e5a5f694bf82c.png%22%2C%22originWidth%22%3A1814%2C%22originHeight%22%3A998%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1814%2C%22height%22%3A998%7D"></span></div><div data-card-type="block" data-ready-card="hr"></div><h1 id="FLLGf" style="text-align: center;"><br /></h1><h1 id="hL25z" style="text-align: center;">层叠规则</h1><div style="text-align: center;"><br /></div><div>所谓层叠规则，指的是当网页中的元素发生层叠时的表现规则。</div><blockquote style="background-color: #FFF9F9;"><div><code>z-index</code>:<code>z-index</code>属性只有和<strong>定位元素</strong>(<code>position</code>不为<code>static</code>的元素)在一起的时候才有作用。</div></blockquote><div><code>CSS3</code>中，<code>z-index</code>已经并非只对定位元素有效，<code>flex</code>盒子的<strong>子元素</strong>也可以设置<code>z-index</code>属性。</div><h2 id="ICndK"><span><br /></span></h2><h2 id="olLSi"><span>{层叠上下文|Stacking Context}</span></h2><div><span><br /></span></div><div><span>{层叠上下文|Stacking Context}</span>是HTML中一个三维概念，如果一个元素含有层叠上下文，可以理解这个元素在<strong>Z轴</strong>上高人一等。</div><h3 id="I2Lkw" style="padding-left: 9px;"><br /></h3><h3 id="d9aP8" style="padding-left: 9px;">层叠上下文的特性</h3><div style="padding-left: 9px;"><br /></div><ul><li>层叠上下文的层叠水平要比普通元素高</li><li>层叠上下文可以阻断元素的混合模式</li><li><strong>层叠上下文可以嵌套，内部层叠上下文及其所有元素均受制于外部的层叠上下文</strong></li><li>每个层叠上下文和兄弟元素独立</li></ul><ul data-lake-indent="1"><li>当进行层叠变化或渲染的时候，只需要考虑后代元素</li></ul><ul><li>每个层叠上下文是自成体系的，当元素发生层叠的时候，整个元素被认为是在父层叠上下文的层叠顺序中</li></ul><h3 id="WxMnT" style="padding-left: 9px;"><br /></h3><h3 id="V0s82" style="padding-left: 9px;">层叠上下文的创建（3类）</h3><div style="padding-left: 9px;"><br /></div><div>由一些CSS属性创建</div><ol><li><strong>天生派</strong></li></ol><ul data-lake-indent="1"><li style="padding-left: 6px;"><strong>页面根元素天生具有层叠上下文</strong></li><li style="padding-left: 6px;">根层叠上下文</li></ul><ol start="2"><li><strong>正统派</strong></li></ol><ul data-lake-indent="1"><li style="padding-left: 6px;"><code>z-index</code>值为数值的<em>定位元素</em>的传统层叠上下文</li></ul><ol start="3"><li><strong>扩招派</strong></li></ol><ul data-lake-indent="1"><li style="padding-left: 6px;">其他CSS3属性</li></ul><h4 id="6dKzQ"><br /></h4><h4 id="JtNsn">根层叠上下文</h4><div><br /></div><div>指的是页面根元素,页面中<strong>所有的元素</strong>一定处于至少一个层叠结界中</div><h4 id="yINd9"><br /></h4><h4 id="zbapv">定位元素与传统层叠上下文</h4><div><br /></div><div>对于<code>position</code>值为<code>relative/absolute</code>的定位元素,当<code>z-index</code>值不是<code>auto</code>的时候，会创建层叠上下文。</div><h4 id="ugk7o"><br /></h4><h4 id="eh15o">CSS3属性（8个）</h4><div><br /></div><ol><li style="padding-left: 6px;">元素为<code>flex</code>布局元素(父元素<code>display:flex|inline-flex</code>),同时<code>z-index</code>值<strong>不是auto</strong> - <strong>flex布局</strong></li><li style="padding-left: 6px;">元素的<code>opactity</code>值不是1 - <span>{透明度|opactity}</span></li><li style="padding-left: 6px;">元素的<code>transform</code>值不是<code>none</code> - <span>{转换|transform}</span></li><li style="padding-left: 6px;">元素<code>mix-blend-mode</code>值不是<code>normal</code> - <span>{混合模式|mix-blend-mode}</span></li><li style="padding-left: 6px;">元素的<code>filter</code>值不是<code>none</code> - <span>{滤镜|filter}</span></li><li style="padding-left: 6px;">元素的<code>isolation</code>值是<code>isolate</code> - <span>{隔离|isolation}</span></li><li style="padding-left: 6px;">元素的<code>will-change</code>属性值为上面②~⑥的任意一个（如<code>will-change:opacity</code>）</li><li style="padding-left: 6px;">元素的<code>-webkit-overflow-scrolling</code>设为<code>touch</code></li></ol><div data-card-type="block" data-ready-card="hr"></div><h2 id="h87ta"><br /></h2><h2 id="6XHAi">层叠上下文与层叠顺序</h2><div><br /></div><blockquote style="background-color: #FFF9F9;"><div><span>{层叠顺序|Stacking Order}</span>表示元素发生层叠时有着特定的垂直显示顺序</div></blockquote><div>一旦普通元素具有层叠上下文,其<em>层叠顺序</em>就会变高</div><div>分两种情况</div><ol><li>如果层叠上下文元素<strong>不依赖</strong><code>z-index</code>数值，则其层叠顺序是<code>z-index:auto</code></li></ol><ul data-lake-indent="1"><li style="padding-left: 6px;">可看成<code>z-index:0</code></li></ul><ol start="2"><li style="padding-left: 6px;">如果层叠上下文元素<strong>依赖</strong><code>z-index</code>数值，则其层叠顺序由<code>z-index</code>值决定</li></ol><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fzd7oztix3a4mm_2cee325f9b2141e2b7510454b4960923.png%22%2C%22originWidth%22%3A1212%2C%22originHeight%22%3A744%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1212%2C%22height%22%3A744%7D"></span></div><div>定位元素会层叠在普通元素的上面？</div><div>根本原因就是：元素一旦成为<strong>定位元素</strong>，其<code>z-index</code>就会自动生效,其<code>z-index</code>就是默认的<code>auto</code>.</div><div>不支持<code>z-index</code>的层叠上下文元素天然是<code>z-index:auto</code>级别,<strong>层叠上下文元素</strong>和<strong>定位元素</strong>是一个层叠顺序的。</div><div data-card-type="block" data-ready-card="hr"></div><h2 id="qPqqw"><br /></h2><h2 id="vIaA9">z-index</h2><div><br /></div><h3 id="j6Kdg" style="padding-left: 9px;">z-index负值</h3><div style="padding-left: 9px;"><br /></div><div><strong><code>z-index</code>是支持负值的</strong>,<code>z-index</code>负值渲染的过程就是一个<strong>寻找第一个层叠上下文元素的过程</strong>,然后层叠顺序止步于这个层叠上下文元素</div><div>要实现<strong>父元素覆盖子元素</strong>--正确的解法是把子元素的<code>z-index</code>设置为负数，这样父元素是一个块级元素，<code>z-index<0</code> 的子元素会在块级元素之下，就可以实现我们想要的效果。</div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fzd7oztix3a4mm_c88d48b0ade642ffa432e40a05028780.png%22%2C%22originWidth%22%3A861%2C%22originHeight%22%3A586%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A861%2C%22height%22%3A586%7D"></span></div><h3 id="0dkv8" style="padding-left: 9px;"><br /></h3><h3 id="9QJr7" style="padding-left: 9px;"><br /></h3><h3 id="TJcKr" style="padding-left: 9px;">z-index使用准则</h3><div style="padding-left: 9px;"><br /></div><div>对于非浮层元素，避免设置<code>z-index</code>值，<code>z-index</code>值没有任何道理需要超过2</div><div>定位元素一旦设置了<code>z-index</code>值，就从普通定位元素变成了层叠上下文元素，相互间的层叠顺序就发生了根本变化,很容易出现设置了巨大的<code>z-index</code>值无法覆盖其他元素的问题</div><div data-card-type="block" data-ready-card="hr"></div><h1 id="9Juhz" style="text-align: center;"><span><br /></span></h1><h1 id="u47Zu" style="text-align: center;"><span>{块级格式化上下文|Block Formatting Context}</span></h1><div style="text-align: center;"><span><br /></span></div><div><span>{块级格式化上下文|Block Formatting Context}</span>(<strong>BFC</strong>)，它是页面中的一块<em>渲染区域</em>，并且有一套属于自己的渲染规则：</div><ol><li style="padding-left: 6px;">内部的盒子会在<strong>垂直方向</strong>一个接一个的放置</li><li style="padding-left: 6px;">对于<strong>同一个</strong>BFC的俩个相邻的盒子的<strong>margin会发生重叠，与方向无关</strong>。</li><li style="padding-left: 6px;"><strong>每个元素的左外边距与包含块的左边界相接触</strong>（页面布局方向从左到右），即使浮动元素也是如此</li><li style="padding-left: 6px;">BFC的区域不会与float的元素区域重叠</li><li style="padding-left: 6px;"><strong>计算BFC的高度时，浮动子元素也参与计算</strong></li><li style="padding-left: 6px;">BFC就是页面上的一个<strong>隔离的独立容器</strong>，容器里面的子元素不会影响到外面的元素，反之亦然</li></ol><h2 id="3TfND"><br /></h2><h2 id="uH28Q">触发条件 （5个）</h2><div><br /></div><ol><li style="padding-left: 6px;"><strong>根元素</strong>，即HTML元素</li><li style="padding-left: 6px;"><strong>浮动元素</strong>：<code>float</code>值为<code>left、right</code></li><li style="padding-left: 6px;"><code>overflow</code>值不为 <code>visible</code>，为 <code>auto</code>、<code>scroll</code>、<code>hidden</code></li><li style="padding-left: 6px;"><code>display</code>的值为<code>inline-block、table、inline-table、flex、inline-flex、grid、inline-grid</code></li><li style="padding-left: 6px;"><code>position</code> 的值为<code>absolute</code>或<code>fixed</code></li></ol><h2 id="Mmx7V"><br /></h2><h2 id="RTffg">应用场景</h2><div><br /></div><ol><li>防止<code>margin</code>重叠</li></ol><ul data-lake-indent="1"><li style="padding-left: 6px;">将位于同一个BFC的元素，分割到不同的BFC中</li></ul><ol start="2"><li>高度塌陷 ---<strong>计算BFC的高度时，浮动子元素也参与计算</strong></li></ol><ul data-lake-indent="1"><li style="padding-left: 6px;">子元素浮动</li><li style="padding-left: 6px;">父元素 <code>overflow: hidden;</code>构建BFC</li></ul><ol start="3"><li>多栏自适应 --- BFC的区域不会与float的元素区域重叠</li></ol><ul data-lake-indent="1"><li style="padding-left: 6px;"><code>aside</code> 左浮动</li><li><code>main</code>--></li></ul><ul data-lake-indent="2"><li style="padding-left: 6px;"><code>margin-left:aside-width</code></li><li style="padding-left: 6px;"><code>overflow: hidden</code>构建BFC</li></ul><div data-card-type="block" data-ready-card="hr"></div><h1 id="IVQb8" style="text-align: center;"><br /></h1><h1 id="xnBEG" style="text-align: center;">元素居中</h1><div style="text-align: center;"><br /></div><h2 id="Q6qmb">水平居中</h2><div><br /></div><ol><li>行内元素-水平居中</li></ol><ul data-lake-indent="1"><li style="padding-left: 6px;"><code>text-align:center</code></li></ul><ol start="2"><li>块级元素-水平居中</li></ol><ul data-lake-indent="1"><li><strong>固定宽度</strong>的块级元素-水平居中</li></ul><ul data-lake-indent="2"><li style="padding-left: 6px;"><code>margin:0 auto</code></li></ul><ul data-lake-indent="1"><li><strong>多个块级元素</strong>-水平居中</li></ul><ul data-lake-indent="2"><li style="padding-left: 6px;">块级元素<code>inline-block</code>化</li><li style="padding-left: 6px;">利用<code>flexbox</code></li></ul><h3 id="qDH0S" style="padding-left: 9px;"><br /></h3><h3 id="M0Se3" style="padding-left: 9px;">行内元素-水平居中</h3><div style="padding-left: 9px;"><br /></div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%2F%2F%20%E8%A1%8C%E5%86%85%E5%85%83%E7%B4%A0-%E6%B0%B4%E5%B9%B3%E5%B1%85%E4%B8%AD%5Cn.center-inline%20%7B%5Cn%20%20text-align%3A%20center%3B%5Cn%7D%5Cn%E5%A4%8D%E5%88%B6%E4%BB%A3%E7%A0%81%22%2C%22id%22%3A%22rFLPH%22%7D"></div><h3 id="4YjAd" style="padding-left: 9px;"><br /></h3><h3 id="5Fnrj" style="padding-left: 9px;">块级元素-水平居中</h3><div style="padding-left: 9px;"><br /></div><h4 id="K3wDx">固定宽度的块级元素-水平居中</h4><div><br /></div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%2F%2F%20%E5%9B%BA%E5%AE%9A%E5%AE%BD%E5%BA%A6%E7%9A%84%E5%9D%97%E7%BA%A7%E5%85%83%E7%B4%A0-%E6%B0%B4%E5%B9%B3%E5%B1%85%E4%B8%AD%5Cn.center-block-fixed-width%20%7B%5Cn%20%20margin%3A%200%20auto%3B%5Cn%20%20width%3A78px%3B%20%2F%2F%20%E4%B8%8D%E8%83%BD%E7%BC%BA%5Cn%7D%5Cn%E5%A4%8D%E5%88%B6%E4%BB%A3%E7%A0%81%22%2C%22id%22%3A%22oOGmM%22%7D"></div><h4 id="AZFqa"><br /></h4><h4 id="LXcYW">多个块级元素-水平居中</h4><div><br /></div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fzd7oztix3a4mm_86f1cce7a4d8456498ed72fe74e2a4e3.png%22%2C%22originWidth%22%3A1012%2C%22originHeight%22%3A158%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1012%2C%22height%22%3A158%7D"></span></div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%2F%2F%20xx%20%E4%BC%9A%E8%A2%AB%E5%90%8E%E7%BB%AD%E7%9A%84%E7%89%B9%E5%AE%9A%E7%9A%84%E7%B1%BB%E5%90%8D%E6%9B%BF%E6%8D%A2%5Cn%3Cmain%20class%3D%5C%22xx-center%5C%22%3E%5Cn%20%20%3Cdiv%3E%5Cn%20%20%20%20%E5%9D%971%5Cn%20%20%3C%2Fdiv%3E%5Cn%20%20%3Cdiv%3E%5Cn%20%20%20%20%E5%9D%972%5Cn%20%20%3C%2Fdiv%3E%5Cn%20%20%3Cdiv%3E%5Cn%20%20%20%20%20%E5%9D%973%5Cn%20%20%3C%2Fdiv%3E%5Cn%3C%2Fmain%3E%5Cn%E5%A4%8D%E5%88%B6%E4%BB%A3%E7%A0%81%22%2C%22id%22%3A%222pGhl%22%7D"></div><h5 id="zE828">inline-block</h5><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%2F%2F%20%E7%88%B6%E5%85%83%E7%B4%A0%20%E8%AE%BE%E7%BD%AE%E6%B0%B4%E5%B9%B3%E5%B1%85%E4%B8%AD%5Cn.inline-block-center%20%7B%5Cn%20%20text-align%3A%20center%3B%5Cn%7D%5Cn%2F%2F%20%E5%9D%97%E7%BA%A7%E5%85%83%E7%B4%A0%20%60inline-block%60%E5%8C%96%5Cn.inline-block-center%20div%20%7B%5Cn%20%20display%3A%20inline-block%3B%5Cn%7D%5Cn%E5%A4%8D%E5%88%B6%E4%BB%A3%E7%A0%81%22%2C%22id%22%3A%22BbjyS%22%7D"></div><h5 id="xTwlN">flexbox</h5><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22.flex-center%20%7B%5Cn%20%20display%3A%20flex%3B%5Cn%20%20justify-content%3A%20center%3B%5Cn%7D%5Cn%E5%A4%8D%E5%88%B6%E4%BB%A3%E7%A0%81%22%2C%22id%22%3A%22OaKam%22%7D"></div><div data-card-type="block" data-ready-card="hr"></div><h2 id="EaxX9"><br /></h2><h2 id="ZOGh2">垂直居中</h2><div><br /></div><ol><li>行内元素-垂直居中</li></ol><ul data-lake-indent="1"><li>单行</li></ul><ol data-lake-indent="2"><li style="padding-left: 6px;">设置上下<code>padding:xx</code></li><li style="padding-left: 6px;"><code>line-height:xx</code></li></ol><ul data-lake-indent="1"><li>多行</li></ul><ol data-lake-indent="2"><li style="padding-left: 6px;"><code>table</code>布局</li><li style="padding-left: 6px;"><code>flexbox</code></li></ol><ol start="2"><li>块级元素-垂直居中</li></ol><ul data-lake-indent="1"><li>元素定高</li></ul><ul data-lake-indent="2"><li style="padding-left: 6px;"><strong>子绝父相</strong> + 子元素<code>top:50%</code> + 子元素负<code>margin</code></li></ul><ul data-lake-indent="1"><li>元素高度不确定</li></ul><ul data-lake-indent="2"><li style="padding-left: 6px;"><strong>子绝父相</strong> + 子元素<code>top:50%</code> + <code>transform: translateY(-50%)</code></li></ul><ul data-lake-indent="1"><li><code>flexbox</code></li></ul><ul data-lake-indent="2"><li style="padding-left: 6px;"><code>flex-direction: column</code>;</li><li style="padding-left: 6px;"><code>justify-content: center</code>;</li></ul><h3 id="XO9R6" style="padding-left: 9px;"><br /></h3><h3 id="dIeP8" style="padding-left: 9px;">行内元素-垂直居中</h3><div style="padding-left: 9px;"><br /></div><h4 id="uEDbR">单行</h4><div><br /></div><h5 id="jUeWy">设置padding</h5><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22.center-text-vertical%20%7B%5Cn%20%20padding-top%3A%2030px%3B%5Cn%20%20padding-bottom%3A%2030px%3B%5Cn%7D%5Cn%E5%A4%8D%E5%88%B6%E4%BB%A3%E7%A0%81%22%2C%22id%22%3A%22poDyN%22%7D"></div><h5 id="chc7q">设置line-height</h5><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22.center-text-vertical-trick%20%7B%5Cn%20%20line-height%3A%20100px%3B%5Cn%20%20white-space%3A%20nowrap%3B%5Cn%7D%5Cn%E5%A4%8D%E5%88%B6%E4%BB%A3%E7%A0%81%22%2C%22id%22%3A%22aBhvP%22%7D"></div><div data-card-type="block" data-ready-card="hr"></div><h4 id="FXmFN"><br /></h4><h4 id="bD2nZ">多行</h4><div><br /></div><div>有如下的HTML结构，我们想实现<code><div></code>元素内文本，在垂直方向居中显示</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3Cdiv%20class%3D%5C%22xxx%5C%22%3E%5Cn%20%20%3Cp%3E%E6%88%91%E6%98%AF%E4%B8%80%E4%B8%AA%E5%A4%9A%E8%A1%8C%E6%96%87%E6%9C%AC%E4%BF%A1%E6%81%AF%20bala%20bala%20%3C%2Fp%3E%5Cn%3C%2Fdiv%3E%5Cn%E5%A4%8D%E5%88%B6%E4%BB%A3%E7%A0%81%22%2C%22id%22%3A%22wikFb%22%7D"></div><h5 id="mamL5">利用display:table</h5><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22.center-table%20%7B%5Cn%20%20display%3A%20table%3B%5Cn%7D%5Cn.center-table%20p%20%7B%5Cn%20%20display%3A%20table-cell%3B%5Cn%20%20%2F%2F%20%E6%89%8B%E5%8A%A8%E6%8C%87%E5%AE%9A%20%E5%9E%82%E7%9B%B4%E6%96%B9%E5%90%91%E5%B1%85%E4%B8%AD%E6%98%BE%E7%A4%BA%5Cn%20%20vertical-align%3A%20middle%3B%5Cn%7D%5Cn%E5%A4%8D%E5%88%B6%E4%BB%A3%E7%A0%81%22%2C%22id%22%3A%22YMF0K%22%7D"></div><h5 id="JeZ3B">flexbox</h5><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22.flex-center%20%7B%5Cn%20%20display%3A%20flex%3B%5Cn%20%20flex-direction%3A%20column%3B%5Cn%20%20justify-content%3A%20center%3B%5Cn%20%20height%3A200px%3B%20%20%2F%2F%E8%BF%99%E9%87%8C%E4%B8%8D%E8%83%BD%E7%BC%BA%E5%B0%91%5Cn%7D%20%5Cn%E5%A4%8D%E5%88%B6%E4%BB%A3%E7%A0%81%22%2C%22id%22%3A%22ZSTi5%22%7D"></div><div data-card-type="block" data-ready-card="hr"></div><h3 id="FGXhU" style="padding-left: 9px;"><br /></h3><h3 id="k37eO" style="padding-left: 9px;">块级元素-垂直居中</h3><div style="padding-left: 9px;"><br /></div><h4 id="RqrA3">元素定高</h4><div><br /></div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22.parent%20%7B%5Cn%20%20position%3A%20relative%3B%5Cn%7D%5Cn.child%20%7B%5Cn%20%20position%3A%20absolute%3B%5Cn%20%20top%3A%2050%25%3B%5Cn%20%20height%3A%20100px%3B%5Cn%20%20margin-top%3A%20-70px%3B%20%5Cn%20%20padding%3A20px%3B%5Cn%7D%5Cn%E5%A4%8D%E5%88%B6%E4%BB%A3%E7%A0%81%22%2C%22id%22%3A%22PW4Nh%22%7D"></div><h4 id="IAfSR"><br /></h4><h4 id="3IqMB">元素高度不确定</h4><div><br /></div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22.parent%20%7B%5Cn%20%20position%3A%20relative%3B%5Cn%7D%5Cn.child%20%7B%5Cn%20%20position%3A%20absolute%3B%5Cn%20%20top%3A%2050%25%3B%5Cn%20%20transform%3A%20translateY(-50%25)%3B%5Cn%7D%5Cn%E5%A4%8D%E5%88%B6%E4%BB%A3%E7%A0%81%22%2C%22id%22%3A%22RHiTK%22%7D"></div><h4 id="wQmwJ"><br /></h4><h4 id="jpG07">flex</h4><div><br /></div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22.parent%20%7B%5Cn%20%20display%3A%20flex%3B%5Cn%20%20flex-direction%3A%20column%3B%5Cn%20%20justify-content%3A%20center%3B%5Cn%7D%5Cn%E5%A4%8D%E5%88%B6%E4%BB%A3%E7%A0%81%22%2C%22id%22%3A%22frcl1%22%7D"></div><div data-card-type="block" data-ready-card="hr"></div><h2 id="TjrBU"><br /></h2><h2 id="CuEuy">水平垂直居中</h2><div><br /></div><ol><li>宽&高固定</li></ol><ol data-lake-indent="1"><li style="padding-left: 6px;"><code>absolute</code> + 负 <code>margin</code></li><li style="padding-left: 6px;"><code>absolute</code> + <code>margin auto</code></li><li style="padding-left: 6px;"><code>absolute</code> + <code>calc</code></li></ol><ol start="2"><li>宽&高不固定</li></ol><ol data-lake-indent="1"><li style="padding-left: 6px;"><code>absolute</code> + <code>transform: translate(-50%, -50%);</code></li><li style="padding-left: 6px;">flex布局</li><li style="padding-left: 6px;">grid 布局</li></ol><h3 id="Jm5zi" style="padding-left: 9px;"><br /></h3><h3 id="t5Xsk" style="padding-left: 9px;">宽&高固定</h3><div style="padding-left: 9px;"><br /></div><h4 id="iOlaa"><code>absolute</code> + 负 <code>margin</code></h4><div><br /></div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22.parent%20%7B%5Cn%20%20position%3A%20relative%3B%5Cn%7D%5Cn.child%20%7B%5Cn%20%20width%3A%20300px%3B%5Cn%20%20height%3A%20100px%3B%5Cn%20%20padding%3A%2020px%3B%5Cn%20%20position%3A%20absolute%3B%5Cn%20%20top%3A%2050%25%3B%5Cn%20%20left%3A%2050%25%3B%5Cn%20%20margin%3A%20-70px%200%200%20-170px%3B%5Cn%7D%5Cn%E5%A4%8D%E5%88%B6%E4%BB%A3%E7%A0%81%22%2C%22id%22%3A%22Yfiog%22%7D"></div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fzd7oztix3a4mm_49a078c5140243c38990360c9f9c10bd.png%22%2C%22originWidth%22%3A743%2C%22originHeight%22%3A558%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A743%2C%22height%22%3A558%7D"></span></div><ul><li>初始位置为方块1的位置</li><li>当设置<code>left、top</code>为50%的时候，内部子元素为方块2的位置</li><li>设置<code>margin</code>为负数时，使内部子元素到方块3的位置，即中间位置</li></ul><h4 id="2THdW"><code><br /></code></h4><h4 id="Ok0q1"><code>absolute</code> + <code>margin auto</code></h4><div><br /></div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fzd7oztix3a4mm_5fb7e1acf74049e0ba5afea77dc399ae.png%22%2C%22originWidth%22%3A884%2C%22originHeight%22%3A532%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A884%2C%22height%22%3A532%7D"></span></div><h4 id="eEYDv"><code><br /></code></h4><h4 id="8z7zi"><code>absolute</code> + <code>calc</code></h4><div><br /></div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fzd7oztix3a4mm_05978f769faa463882a149191124f62d.png%22%2C%22originWidth%22%3A904%2C%22originHeight%22%3A422%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A904%2C%22height%22%3A422%7D"></span></div><div data-card-type="block" data-ready-card="hr"></div><h3 id="NU15q" style="padding-left: 9px;"><br /></h3><h3 id="WmMpZ" style="padding-left: 9px;">宽&高不固定</h3><div style="padding-left: 9px;"><br /></div><h4 id="ytxE1"><code>absolute</code> + <code>transform: translate(-50%, -50%);</code></h4><div><br /></div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22.parent%20%7B%5Cn%20%20position%3A%20relative%3B%5Cn%7D%5Cn.child%20%7B%5Cn%20%20position%3A%20absolute%3B%5Cn%20%20top%3A%2050%25%3B%5Cn%20%20left%3A%2050%25%3B%5Cn%20%20transform%3A%20translate(-50%25%2C%20-50%25)%3B%5Cn%7D%5Cn%E5%A4%8D%E5%88%B6%E4%BB%A3%E7%A0%81%22%2C%22id%22%3A%22PcWAo%22%7D"></div><h4 id="FZ70v"><br /></h4><h4 id="zaX12">flex布局</h4><div><br /></div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22.parent%20%7B%5Cn%20%20display%3A%20flex%3B%5Cn%20%20justify-content%3A%20center%3B%5Cn%20%20align-items%3A%20center%3B%5Cn%7D%5Cn%E5%A4%8D%E5%88%B6%E4%BB%A3%E7%A0%81%22%2C%22id%22%3A%2266tU7%22%7D"></div><h4 id="Pjdwo"><br /></h4><h4 id="biAPA">grid布局</h4><div><br /></div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22.parent%20%7B%5Cn%20%20display%3Agrid%3B%5Cn%7D%5Cn.parent%20.child%7B%5Cn%20%20margin%3Aauto%3B%5Cn%7D%5Cn%E5%A4%8D%E5%88%B6%E4%BB%A3%E7%A0%81%22%2C%22id%22%3A%22gnXoH%22%7D"></div><div data-card-type="block" data-ready-card="hr"></div><h1 id="4BMjb" style="text-align: center;"><br /></h1><h1 id="unM5V" style="text-align: center;">flex 布局</h1><div style="text-align: center;"><br /></div><div>采用<code>flex</code>布局的元素，称为flex<span>{容器|Container}</span></div><div>它的所有子元素自动成为容器成员，称为flex<span>{项目|Item}</span></div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fzd7oztix3a4mm_89bc73a9d95d4af181edfc8268309eeb.png%22%2C%22originWidth%22%3A563%2C%22originHeight%22%3A333%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A563%2C%22height%22%3A333%7D"></span></div><div>容器默认存在两根轴：水平的<span>{主轴|main axis}</span>和垂直的<span>{交叉轴|cross axis}</span></div><h2 id="TEdMu"><br /></h2><h2 id="xMBGH">容器的属性 （6个）</h2><div><br /></div><ol><li style="padding-left: 6px;"><code>flex-direction</code></li><li style="padding-left: 6px;"><code>flex-wrap</code></li><li style="padding-left: 6px;"><code>flex-flow</code></li><li style="padding-left: 6px;"><code>justify-content</code></li><li style="padding-left: 6px;"><code>align-items</code></li><li style="padding-left: 6px;"><code>align-content</code></li></ol><h3 id="1i9fF" style="padding-left: 9px;"><br /></h3><h3 id="wvWFp" style="padding-left: 9px;">flex-direction属性</h3><div style="padding-left: 9px;"><br /></div><div><code>flex-direction</code>属性决定主轴的方向（即项目的排列方向）。</div><ol><li style="padding-left: 6px;"><code>row</code>（<strong>默认值</strong>）：主轴为水平方向，起点在左端。</li><li style="padding-left: 6px;"><code>row-reverse</code>：主轴为水平方向，起点在右端。</li><li style="padding-left: 6px;"><code>column</code>：主轴为垂直方向，起点在上沿。</li><li style="padding-left: 6px;"><code>column-reverse</code>：主轴为垂直方向，起点在下沿。</li></ol><h3 id="pPbSW" style="padding-left: 9px;"><br /></h3><h3 id="jV4po" style="padding-left: 9px;">flex-wrap属性</h3><div style="padding-left: 9px;"><br /></div><div>默认情况下，项目都排在一条线（又称"轴线"）上。<code>flex-wrap</code>属性定义，如果一条轴线排不下，如何换行。</div><ol><li><code>nowrap</code>:(<strong>默认</strong>）：不换行。</li></ol><ul data-lake-indent="1"><li style="padding-left: 6px;"><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fzd7oztix3a4mm_6ceafa86ec3144bea1cfc697f8a619f7.png%22%2C%22originWidth%22%3A700%2C%22originHeight%22%3A145%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A700%2C%22height%22%3A145%7D"></span></li></ul><ol start="2"><li><code>wrap</code>:换行，第一行在上方。</li></ol><ul data-lake-indent="1"><li style="padding-left: 6px;"><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fzd7oztix3a4mm_9fb0b60f94ec4ad49eac4cbdcb6a9569.png%22%2C%22originWidth%22%3A700%2C%22originHeight%22%3A177%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A700%2C%22height%22%3A177%7D"></span></li></ul><ol start="3"><li><code>wrap-reverse</code>:换行，第一行在下方</li></ol><ul data-lake-indent="1"><li style="padding-left: 6px;"><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fzd7oztix3a4mm_bff559fc16504a58ad5a669e152132e2.png%22%2C%22originWidth%22%3A700%2C%22originHeight%22%3A177%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A700%2C%22height%22%3A177%7D"></span></li></ul><h3 id="L9TNw" style="padding-left: 9px;"><br /></h3><h3 id="m6Jv6" style="padding-left: 9px;">flex-flow</h3><div style="padding-left: 9px;"><br /></div><div><code>flex-flow</code>属性是<code>flex-direction</code>属性和<code>flex-wrap</code>属性的简写形式，默认值为<code>row nowrap</code>。</div><h3 id="IldWk" style="padding-left: 9px;"><br /></h3><h3 id="9k6bH" style="padding-left: 9px;">justify-content属性</h3><div style="padding-left: 9px;"><br /></div><div><code>justify-content</code>属性定义了项目在<strong>主轴上的对齐方式</strong>。</div><ol><li style="padding-left: 6px;"><code>flex-start</code>（<strong>默认值</strong>）：左对齐<br /></li><li style="padding-left: 6px;"><code>flex-end</code>：右对齐<br /></li><li style="padding-left: 6px;"><code>center</code>： 居中<br /></li><li><code>space-between</code>：<strong>两端对齐</strong>，项目之间的间隔都相等。</li></ol><ul data-lake-indent="1"><li style="padding-left: 6px;"><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fzd7oztix3a4mm_a12045726a864209ae8bfa6f50c5350c.png%22%2C%22originWidth%22%3A1276%2C%22originHeight%22%3A246%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1276%2C%22height%22%3A246%7D"></span></li></ul><ol start="5"><li><code>space-around</code>：每个项目两侧的间隔相等。所以，<strong>项目之间的间隔比项目与边框的间隔大一倍</strong>。</li></ol><ul data-lake-indent="1"><li style="padding-left: 6px;"><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fzd7oztix3a4mm_ef5750390d4f4e1f9290fd3515fb7b68.png%22%2C%22originWidth%22%3A1274%2C%22originHeight%22%3A244%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1274%2C%22height%22%3A244%7D"></span></li></ul><h3 id="LTtrg" style="padding-left: 9px;"><br /></h3><h3 id="Pao5b" style="padding-left: 9px;">align-items属性</h3><div style="padding-left: 9px;"><br /></div><div><code>align-items</code>属性定义项目在<strong>交叉轴上如何对齐</strong>。</div><ol><li style="padding-left: 6px;"><code>stretch</code>（<strong>默认值</strong>）：如果<em>项目</em>未设置高度或设为auto，将占满整个容器的高度。</li><li style="padding-left: 6px;"><code>flex-start</code>：交叉轴的起点对齐。</li><li style="padding-left: 6px;"><code>flex-end</code>：交叉轴的终点对齐。</li><li style="padding-left: 6px;"><code>center</code>：交叉轴的中点对齐。</li><li style="padding-left: 6px;"><code>baseline</code>: 项目的第一行文字的基线对齐。</li></ol><h3 id="lY1S4" style="padding-left: 9px;"><br /></h3><h3 id="d7iZf" style="padding-left: 9px;">align-content属性</h3><div style="padding-left: 9px;"><br /></div><div><code>align-content</code>属性定义了<strong>多根轴线的对齐方式</strong>。如果项目只有一根轴线，该属性不起作用。</div><div data-card-type="block" data-ready-card="hr"></div><h2 id="v6Cp8"><br /></h2><h2 id="KNGBr">项目的属性（6个）</h2><div><br /></div><ol><li style="padding-left: 6px;"><code>order</code></li><li style="padding-left: 6px;"><code>flex-grow</code></li><li style="padding-left: 6px;"><code>flex-shrink</code></li><li style="padding-left: 6px;"><code>flex-basis</code></li><li style="padding-left: 6px;"><code>flex</code></li><li style="padding-left: 6px;"><code>align-self</code></li></ol><h3 id="jSK7C" style="padding-left: 9px;"><br /></h3><h3 id="HFsPo" style="padding-left: 9px;">order</h3><div style="padding-left: 9px;"><br /></div><div><code>order</code>属性定义项目的排列顺序。<strong>数值越小，排列越靠前，默认为0</strong>。</div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fzd7oztix3a4mm_1c212332143a47f298093220b7c135c8.png%22%2C%22originWidth%22%3A751%2C%22originHeight%22%3A480%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A751%2C%22height%22%3A480%7D"></span></div><h3 id="8dsWe" style="padding-left: 9px;"><br /></h3><h3 id="xBJ3d" style="padding-left: 9px;">flex-grow</h3><div style="padding-left: 9px;"><br /></div><div><code>flex-grow</code>属性定义项目的<strong>放大比例</strong>，<strong>默认为0，即如果存在剩余空间，也不放大</strong>。</div><div>如果<em>所有</em>项目的<code>flex-grow</code>属性都为1，则它们将<strong>等分剩余空间</strong>（如果有的话）。如果一个项目的<code>flex-grow</code>属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。</div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fzd7oztix3a4mm_dc55f35bb36c49c18fdaf17992892896.png%22%2C%22originWidth%22%3A802%2C%22originHeight%22%3A211%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A802%2C%22height%22%3A211%7D"></span></div><h3 id="UVpRf" style="padding-left: 9px;"><br /></h3><h3 id="KksBD" style="padding-left: 9px;">flex-shrink</h3><div style="padding-left: 9px;"><br /></div><div><code>flex-shrink</code>属性定义了项目的<strong>缩小比例</strong>，<strong>默认为1，即如果空间不足，该项目将缩小</strong>。</div><div>如果所有项目的<code>flex-shrink</code>属性都为1，当空间不足时，都将<strong>等比例缩小</strong>。如果一个项目的<code>flex-shrink</code>属性为0，其他项目都为1，则空间不足时，前者不缩小。</div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fzd7oztix3a4mm_c9f118705cea48628553667be8ac832c.png%22%2C%22originWidth%22%3A700%2C%22originHeight%22%3A145%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A700%2C%22height%22%3A145%7D"></span></div><h3 id="TW2Jf" style="padding-left: 9px;"><br /></h3><h3 id="UuVZK" style="padding-left: 9px;">flex-basis属性</h3><div style="padding-left: 9px;"><br /></div><div><code>flex-basis</code>属性定义了在<strong>分配多余空间之前</strong>，项目占据的<span>{主轴空间|main size}</span>。浏览器根据这个属性，计算主轴是否有多余空间。<strong>它的默认值为auto，即项目的本来大小</strong>。</div><div>它可以设为跟<code>width</code>或<code>height</code>属性一样的值（比如350px），则项目<strong>将占据固定空间</strong>。</div><h3 id="V80ui" style="padding-left: 9px;"><br /></h3><h3 id="ty4dU" style="padding-left: 9px;">flex</h3><div style="padding-left: 9px;"><br /></div><div><code>flex</code>属性是<code>flex-grow</code>, <code>flex-shrink</code> 和 <code>flex-basis</code>的简写，<strong>默认值为0 1 auto</strong>。<strong>后两个属性可选</strong>。</div><div>由于，后两个属性可选，所以，存在一些比较简洁的写法</div><ol><li style="padding-left: 6px;"><strong><code>flex: 1</code> = <code>flex: 1 1 0%</code></strong></li><li style="padding-left: 6px;"><code>flex: 2</code> = <code>flex: 2 1 0%</code></li><li style="padding-left: 6px;"><code>flex: auto</code> = <code>flex: 1 1 auto</code></li><li style="padding-left: 6px;"><code>flex: none</code> = <code>flex: 0 0 auto</code>，常用于固定尺寸不伸缩</li></ol><div><code>flex:1</code> 和 <code>flex:auto</code> 的区别，可以归结于<code>flex-basis:0</code>和<code>flex-basis:auto</code>的区别</div><div>当设置为0时（绝对弹性元素），此时相当于告诉<code>flex-grow</code>和<code>flex-shrink</code>在伸缩的时候不需要考虑我的尺寸</div><div>当设置为<code>auto</code>时（相对弹性元素），此时则需要在伸缩时将元素尺寸纳入考虑</div><h3 id="2K3Lp" style="padding-left: 9px;"><br /></h3><h3 id="VINkv" style="padding-left: 9px;">align-self属性</h3><div style="padding-left: 9px;"><br /></div><div><code>align-self</code>属性允许<em>单个项目</em>有与其他项目不一样的对齐方式，<strong>可覆盖<code>align-items</code>属性。默认值为auto</strong>，表示继承父元素的<code>align-items</code>属性，如果没有父元素，则等同于<code>stretch</code>。</div><div data-card-type="block" data-ready-card="hr"></div><h1 id="6ltzj" style="text-align: center;"><br /></h1><h1 id="Nw5UR" style="text-align: center;">Chrome支持小于12px 的文字</h1><div style="text-align: center;"><br /></div><div><code>Chrome</code> <strong>中文版浏览器会默认设定页面的最小字号是12px</strong>，英文版没有限制</div><div>原由 <code>Chrome</code> 团队认为汉字小于12px就会增加识别难度</div><ul><li>中文版浏览器 <strong>与网页语言无关</strong>，取决于用户在Chrome的设置里（<code>chrome://settings/languages</code>）把哪种语言设置为默认显示语言<br /></li><li>系统级最小字号 浏览器默认设定页面的最小字号，用户可以前往 <code>chrome://settings/fonts</code> 根据需求更改<br /></li></ul><h2 id="F92hY"><br /></h2><h2 id="GTWfv">解决方案（3种）</h2><div><br /></div><ol><li style="padding-left: 6px;"><code>zoom</code></li><li style="padding-left: 6px;"><code>transform:scale()</code></li><li style="padding-left: 6px;"><code>-webkit-text-size-adjust:none</code></li></ol><h3 id="QTPTF" style="padding-left: 9px;"><br /></h3><h3 id="xCrzk" style="padding-left: 9px;">zoom</h3><div style="padding-left: 9px;"><br /></div><div><code>zoom</code> 可以改变页面上元素的尺寸，属于真实尺寸。</div><div>其支持的值类型有：</div><ul><li><code>zoom:50%</code>，表示缩小到原来的一半</li><li><code>zoom:0.5</code>，表示缩小到原来的一半</li></ul><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22.span10%7B%5Cn%20%20%20%20%20%20%20%20font-size%3A%2012px%3B%5Cn%20%20%20%20%20%20%20%20display%3A%20inline-block%3B%5Cn%20%20%20%20%20%20%20%20zoom%3A%200.8%3B%5Cn%20%20%20%20%7D%5Cn%E5%A4%8D%E5%88%B6%E4%BB%A3%E7%A0%81%22%2C%22id%22%3A%22KtQ7n%22%7D"></div><h3 id="HJ1mi" style="padding-left: 9px;"><code><br /></code></h3><h3 id="nemeS" style="padding-left: 9px;"><code>transform:scale()</code></h3><div style="padding-left: 9px;"><br /></div><div>用<code>transform:scale()</code>这个属性进行放缩</div><div>使用<code>scale</code>属性<strong>只对可以定义宽高的元素生效</strong>，所以，需要将指定元素转为<em>行内块元素</em></div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22.span10%7B%5Cn%20%20%20%20%20%20%20%20font-size%3A%2012px%3B%5Cn%20%20%20%20%20%20%20%20display%3A%20inline-block%3B%5Cn%20%20%20%20%20%20%20%20transform%3Ascale(0.8)%3B%5Cn%20%20%20%20%7D%5Cn%E5%A4%8D%E5%88%B6%E4%BB%A3%E7%A0%81%22%2C%22id%22%3A%22cbQeY%22%7D"></div><h3 id="td1YC" style="padding-left: 9px;"><br /></h3><h3 id="hT5Mi" style="padding-left: 9px;">text-size-adjust</h3><div style="padding-left: 9px;"><br /></div><div>该属性用来设定文字大小是否根据设备(浏览器)来<strong>自动调整显示大小</strong></div><div>属性值：</div><ul><li><code>auto</code>：<strong>默认</strong>，字体大小会根据设备/浏览器来自动调整；</li><li><code>percentage</code>：字体显示的大小</li><li><code>none</code>:字体大小不会自动调整</li></ul><div><strong>存在兼容性问题，<code>chrome</code>受版本限制，<code>safari</code>可以</strong>。</div><div data-card-type="block" data-ready-card="hr"></div><h1 id="wZl1h" style="text-align: center;"><br /></h1><h1 id="QgArd" style="text-align: center;">CSS 优化处理 (6个)</h1><div style="text-align: center;"><br /></div><ol><li><strong>内联首屏关键</strong>CSS</li></ol><ul data-lake-indent="1"><li style="padding-left: 6px;">但是由于TCP的初始拥塞窗口的原因，导致这种方法只能针对CSS文件小的情况</li></ul><ol start="2"><li><strong>异步加载</strong>CSS</li></ol><ul data-lake-indent="1"><li style="padding-left: 6px;">使用<code>rel="preload"</code>对CSS类资源进行异步加载</li></ul><ol start="3"><li style="padding-left: 6px;">文件压缩</li><li>去除无用CSS</li></ol><ol data-lake-indent="1"><li style="padding-left: 6px;">一种是不同元素或者其他情况下的<em>重复代码</em></li><li style="padding-left: 6px;">一种是整个页面内<em>没有生效</em>的CSS代码</li></ol><ol start="5"><li><strong>合理使用选择器</strong></li></ol><ul data-lake-indent="1"><li style="padding-left: 6px;">不要嵌套使用过多复杂选择器，最好不要三层以上</li><li style="padding-left: 6px;">使用id选择器就没必要再进行嵌套</li><li style="padding-left: 6px;"><em>通配符</em>和<em>属性选择器</em>效率最低，避免使用</li></ul><ol start="6"><li>不要使用<code>@import</code></li></ol><ul data-lake-indent="1"><li>css样式文件有<strong>两种引入方式</strong>，</li></ul><ol data-lake-indent="2"><li style="padding-left: 6px;">一种是<code>link</code>元素，</li><li style="padding-left: 6px;">另一种是<code>@import</code></li></ol><ul data-lake-indent="1"><li style="padding-left: 6px;"><code>@import</code>会<strong>影响浏览器的并行下载</strong>，使得页面在加载时增加额外的延迟，增添了额外的往返耗时</li></ul><div data-card-type="block" data-ready-card="hr"></div><h1 id="O6HEM" style="text-align: center;"><br /></h1><h1 id="QBCOh" style="text-align: center;">回流、重绘</h1><div style="text-align: center;"><br /></div><div>页面渲染的流程， 简单来说，初次渲染时会经过以下6步：</div><blockquote style="background-color: #FFF9F9;"><ol><li style="padding-left: 6px;">构建DOM树；</li><li style="padding-left: 6px;">样式计算；</li><li style="padding-left: 6px;"><strong>布局定位</strong>；</li><li style="padding-left: 6px;">图层分层；</li><li style="padding-left: 6px;"><strong>图层绘制</strong>；</li><li style="padding-left: 6px;"><strong>合成显示</strong>；</li></ol></blockquote><div>在CSS属性改变时，重渲染会分为<strong>回流</strong>、<strong>重绘</strong>和<strong>直接合成</strong>三种情况，分别对应从<strong>布局定位</strong>/<strong>图层绘制</strong>/<strong>合成显示</strong>开始，再走一遍上面的流程。</div><div>元素的CSS具体发生什么改变，则决定属于上面哪种情况：</div><ul><li>回流（又叫重排）：元素<strong>位置、大小</strong>发生变化导致其他节点联动，需要重新计算布局；</li><li>重绘：修改了一些不影响布局的<strong>属性</strong>，比如颜色；</li><li>直接合成：<strong>合成层</strong>的<code>transform、opacity</code>修改，只需要将多个图层<strong>再次合并</strong>，而后<strong>生成位图</strong>，最终展示到屏幕上；</li></ul><h2 id="eErKZ"><br /></h2><h2 id="lDo7v">触发时机</h2><div><br /></div><h3 id="TlwLi" style="padding-left: 9px;">回流触发时机</h3><div style="padding-left: 9px;"><br /></div><div>回流这一阶段主要是<em>计算节点的位置和几何信息</em>，那么当页面布局和几何信息发生变化的时候，就需要回流。</div><ul><li>添加或删除<strong>可见的DOM元素</strong></li><li>元素的<strong>位置</strong>发生变化</li><li>元素的<strong>尺寸</strong>发生变化（包括外边距、内边框、边框大小、高度和宽度等）</li><li>内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代</li><li>页面一开始渲染的时候（这避免不了）</li><li>浏览器的<strong>窗口尺寸变化</strong>（因为回流是根据视口的大小来计算元素的位置和大小的）</li><li>获取一些特定属性的值</li></ul><ul data-lake-indent="1"><li><code>offsetTop、offsetLeft、 offsetWidth、offsetHeight</code></li><li><code>scrollTop、scrollLeft、scrollWidth、scrollHeight</code></li><li><code>clientTop、clientLeft、clientWidth、clientHeight</code></li><li>这些属性有一个共性，就是需要通过<strong>即时计算</strong>得到。因此浏览器为了获取这些值，也会进行回流。</li></ul><h3 id="lJ7Ak" style="padding-left: 9px;"><br /></h3><h3 id="d5gjZ" style="padding-left: 9px;">重绘触发时机</h3><div style="padding-left: 9px;"><br /></div><blockquote style="background-color: #FFF9F9;"><div>触发回流一定会触发重绘</div></blockquote><div>除此之外还有一些其他引起重绘行为：</div><ul><li><strong>颜色</strong>的修改</li><li><strong>文本方向</strong>的修改</li><li><strong>阴影</strong>的修改</li></ul><h2 id="sjROt"><br /></h2><h2 id="UwvOG">浏览器优化机制</h2><div><br /></div><div>由于每次重排都会造成额外的计算消耗，因此大多数浏览器都会<strong>通过队列存储重排操作并批量执行来优化重排过程</strong>。浏览器会将修改操作放入到队列里，直到过了一段时间或者操作达到了一个阈值，才清空队列。</div><div>当你获取布局信息的操作的时候，会<strong>强制队列刷新</strong>，例如<code>offsetTop</code>等方法都会返回最新的数据。</div><div>因此浏览器不得不清空队列，触发回流重绘来返回正确的值</div><h2 id="5ch5l"><br /></h2><h2 id="LoOrG">减少回流</h2><div><br /></div><ol><li style="padding-left: 6px;">对于那些复杂的动画，对其设置 <code>position: fixed/absolute</code>，尽可能地使元素脱离文档流，从而减少对其他元素的影响</li><li style="padding-left: 6px;">使用css3<strong>硬件加速</strong>，可以让<code>transform</code>、<code>opacity</code>、<code>filters</code>这些动画不会引起回流重绘</li><li style="padding-left: 6px;">在使用 <code>JavaScript</code> <strong>动态插入多个节点</strong>时, 可以使用<code>DocumentFragment</code>.创建后一次插入.</li><li style="padding-left: 6px;">通过设置元素属性<code>display: none</code>，将其从页面上去掉，然后再进行后续操作，这些后续操作也不会触发回流与重绘，这个过程称为离线操作</li></ol><div data-card-type="block" data-ready-card="hr"></div><h1 id="pqBdn" style="text-align: center;"><br /></h1><h1 id="W51E1" style="text-align: center;">硬件加速</h1><div style="text-align: center;"><br /></div><div>浏览器中的层分为两种：<strong>渲染层</strong>和<strong>合成层</strong>。</div><h2 id="ZhBwK"><br /></h2><h2 id="ub2J2">渲染层</h2><div><br /></div><div>渲染层的概念跟<em>层叠上下文</em>密切相关。简单来说，拥有<code>z-index</code>属性的<em>定位元素</em>会生成一个层叠上下文，一个生成层叠上下文的元素就生成了一个渲染层。</div><h3 id="IOkOe" style="padding-left: 9px;"><br /></h3><h3 id="e9R02" style="padding-left: 9px;">层叠上下文的创建（3类）</h3><div style="padding-left: 9px;"><br /></div><div>由一些CSS属性创建</div><ol><li>天生派</li></ol><ul data-lake-indent="1"><li style="padding-left: 6px;">页面根元素天生具有层叠上下文</li><li style="padding-left: 6px;">根层叠上下文</li></ul><ol start="2"><li>正统派</li></ol><ul data-lake-indent="1"><li style="padding-left: 6px;"><code>z-index</code>值为数值的<em>定位元素</em>的传统层叠上下文</li></ul><ol start="3"><li>扩招派 (CSS3属性)</li></ol><ol data-lake-indent="1"><li style="padding-left: 6px;">元素为<code>flex</code>布局元素(父元素<code>display:flex|inline-flex</code>),同时<code>z-index</code>值<strong>不是auto</strong> - <strong>flex布局</strong></li><li style="padding-left: 6px;">元素的<code>opactity</code>值不是1 - <span>{透明度|opactity}</span></li><li style="padding-left: 6px;">元素的<code>transform</code>值不是<code>none</code> - <span>{转换|transform}</span></li><li style="padding-left: 6px;">元素<code>mix-blend-mode</code>值不是<code>normal</code> - <span>{混合模式|mix-blend-mode}</span></li><li style="padding-left: 6px;">元素的<code>filter</code>值不是<code>none</code> - <span>{滤镜|filter}</span></li><li style="padding-left: 6px;">元素的<code>isolation</code>值是<code>isolate</code> - <span>{隔离|isolation}</span></li><li style="padding-left: 6px;">元素的<code>will-change</code>属性值为上面②~⑥的任意一个（如<code>will-change:opacity</code>）</li><li style="padding-left: 6px;">元素的<code>-webkit-overflow-scrolling</code>设为<code>touch</code></li></ol><h2 id="sGqc5"><br /></h2><h2 id="mbLBW">合成层</h2><div><br /></div><div><strong>只有一些特殊的渲染层才会被提升为合成层</strong>，通常来说有这些情况：</div><ol><li style="padding-left: 6px;"><code>transform:3D</code>变换：<code>translate3d</code>，<code>translateZ</code>；</li><li style="padding-left: 6px;"><code>will-change:opacity | transform | filter</code></li><li style="padding-left: 6px;">对 <code>opacity</code> | <code>transform</code> | <code>fliter</code> 应用了过渡和动画（<code>transition/animation</code>）</li><li style="padding-left: 6px;"><code>video、canvas、iframe</code></li></ol><h2 id="a0Ah3"><br /></h2><h2 id="SkcEo">硬件加速</h2><div><br /></div><div>浏览器为什么要分层呢？答案是<strong>硬件加速</strong>。就是给HTML元素加上某些CSS属性，比如3D变换，将其提升成一个合成层，<strong>独立渲染</strong>。</div><div>之所以叫硬件加速，就是因为<strong>合成层会交给GPU（显卡）去处理</strong>，在硬件层面上开外挂，比在主线程（CPU）上效率更高。</div><div>利用硬件加速，可以把需要重排/重绘的元素单独拎出来，减少绘制的面积。</div><div>避免重排/重绘，直接进行合成，合成层的<code>transform</code> 和 <code>opacity</code>的修改都是直接进入合成阶段的；</div><ul><li>可以使用<code>transform:translate</code>代替<code>left/top</code>修改元素的位置；</li><li>使用<code>transform:scale</code>代替<em>宽度、高度</em>的修改；</li></ul><div data-card-type="block" data-ready-card="hr"></div><h1 id="el2H0" style="text-align: center;"><br /></h1><h1 id="TtMOW" style="text-align: center;">Css预编译语言</h1><div style="text-align: center;"><br /></div><div>Css预编译语言在前端里面有三大优秀的预编处理器，分别是：</div><ol><li style="padding-left: 6px;"><code>sass</code></li><li style="padding-left: 6px;"><code>less</code></li><li style="padding-left: 6px;"><code>stylus</code></li></ol><div>虽然各种预处理器功能强大，但使用最多的，还是以下特性：</div><ol><li>变量（<code>variables</code>）</li></ol><ul data-lake-indent="1"><li style="padding-left: 6px;"><code>less</code>声明的变量必须以<code>@</code>开头，后面紧跟变量名和变量值，而且变量名和变量值需要使用冒号<code>:</code>分隔开</li><li style="padding-left: 6px;"><code>sass</code>声明的变量名前面使用<code>$</code>开头</li></ul><ol start="2"><li style="padding-left: 6px;">作用域（<code>scope</code>）</li><li style="padding-left: 6px;">代码混合（ <code>mixins</code>）</li><li style="padding-left: 6px;">嵌套（<code>nested rules</code>）</li><li>代码模块化（<code>Modules</code>）</li></ol><ul data-lake-indent="1"><li style="padding-left: 6px;">模块化就是将Css代码分成一个个模块</li><li style="padding-left: 6px;"><code>@import</code></li></ul><div data-card-type="block" data-ready-card="hr"></div><h1 id="4TJWy" style="text-align: center;"><br /></h1><h1 id="aydwE" style="text-align: center;">后记</h1><div style="text-align: center;"><br /></div><div><strong>分享是一种态度</strong>。</div><div><strong>全文完，既然看到这里了，如果觉得不错，随手点个赞和“在看”吧。</strong></div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fzd7oztix3a4mm_abc8eae954af4887805f748d4f62a071.gif%22%2C%22originWidth%22%3A413%2C%22originHeight%22%3A390%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A413%2C%22height%22%3A390%7D"></span></div><div><br /></div>
