自行整理面试知识（CSS篇）（二）

inline-block间隙处理

移除空格和换行，使用margin负值，使用font-size：0(谷歌浏览器无效)，使用letter-spacing负值（字符间距）或者word-spacing解决（Opera有间隙极限，不支持负值）。所以需要同时设置

font-size：0 letter-spacing：-3px，在ie下存在2px覆盖，所以hackIE，*letter-spacing: normal

伪类

::与:元素性伪类的区别，就是没区别，只不过前者的适配性较低，所以还是应当在开发时选择后者

大部分伪类可以顾名思义，比较常用nth-child() 和 nth-of-type() 前者选取在父元素下排名第N的指定子元素，后者选取在父元素下的同类元素中排名第N的子元素

:after和:before大部分的时候用来做图标和一些独特的hover样式，以及用于清除浮动

等高布局

1.用背景图进行y轴缩放，创建一种等高列的假象

2.利用div的height会被最大高度撑大的原理，将带有背景色的div嵌套使用，并且使顶层div具有overflow:hidden切掉溢出元素，使所有元素具有float:left，并设置其列宽，再通过相对定位，将每一列的背景色容器与其对应的内容元素对齐，这样内容元素会撑大所有的背景色容器。（背景色容器的width都是100%，他们颜色会互相覆盖只剩下最深背景色容器的颜色，再用right值将遮盖的元素偏移，这样就可以精确的定位到内容元素所在的位置，内容元素设置float是为了让其变为行内元素且紧密排列）

3.flex布局下的aligin-items：stretch，可以在flex元素不写死高度的情况下等高

圣杯布局/双飞燕布局

实际上圣杯布局就是先用padding铺好主体，然后用左右的面板来通过margin挤压主体的width以达到效果

首先float：left是为了使元素脱离文档流，按照说法inline-block也可以做到

设置主体的width为100%的情况下，由于占满一行，会导致左右盒子都被换行到下一行，所以使用margin强行挤出左右盒子的位置，右侧设置margin-left : - 自己宽度，和right; -自己宽度（你挤出来的位置是margin，是空白的，当然要用位移去填咯 ，同理，左侧盒子需要设置margin-left ： 100%将左侧挤出一个自己的身位，然后用left ： -自己宽度填补空白位置）

---

双飞燕布局：

双飞燕布局是先用容器设置自适应的100%的width，然后用其包裹主体元素，主体元素用左右外边距留出左右盒子的宽度，这是与圣杯最大的不同，圣杯中实际上是用位移强行使左右盒子覆盖padding，而这里我认为是用margin去合并（利用margin的折叠）主体元素左右的margin

同样需要用float;left使其脱离文档流。

最好自己参考一下网上的代码，实际上很好理解。

---

flex版：

其实就是用flex-basis（固定大小），flex-shrink（容器宽度不够时缩小的比例）

将主元素的宽度设置为100%，使得其能自适应大小，由于shrink = 0的原因，左右的元素永远不会被缩小，这样就实现了圣杯布局了。

但是flex版没有办法提前渲染主体噢，主列是不会优先加载的。

 FOUC(Flash of Unstyled Content)

当使用@import导入css时会遇到的情况，页面的样式内容有可能会发生瞬间的闪烁，这种情况下被称为文档的暂时性失效

其实是因为@import的串行加载，会阻塞html的渲染过程，直到样式表被下载加载完成再进行重新渲染

避免方式：webpack和避免使用@import

gird栅格布局

https://blog.csdn.net/gaoqiang1112/article/details/80266142

CSS优化策略

CSS压缩:运用webpack或者gulp。

合并CSS，减少冗余CSS

删除无用的样式，利用继承

按需加载CSS，抽离公共的CSS。

尽量避免style标签内嵌CSS，因为link引入的CSS可以缓存

将CSS放在html的顶部，避免出现FOUC，同时避免使用@import

尽量不使用css中的算术运算Expression，其相当影响性能

尽量不使用子选择器，查找过程耗费一定的性能

合并图片，限制图片的宽高，裁剪图片