CSS面经整理学习4.pdf

CSS⾯经

●雪碧图

○合并多个⼩图⽚。借助background-position、元素尺⼨定位，背景图⽚。

○优点。减少请求次数，提⾼加载速度。

○缺点。维护麻烦，每次改变需要更新整个雪碧图。合并麻烦。

●display:none与visibility:hidden。

○display。从渲染树中消失，渲染不占据空间。visibility不会从渲染树消失，占据空间。

○display是⾮继承属性。⼦孙节点⼀起消失，⽆法再显示。visibility是继承属性。⼦孙节点可以

修改visibility为visible来显示。

○修改常规流的display会导致⽂档重排。修改visibility只会导致该元素重绘。

●link与import

○link是HTML⽅式，import是CSS⽅式。

○link不会阻塞，⽀持并⾏下载。import会阻塞。

●FOUC，flashofunstyledcontent

○⽤户定义样式表加载之前浏览器使⽤默认样式显示⽂档，⽤户样式加载渲染之后再从新显示⽂

档，造成⻚⾯闪烁。

●BFC

○块级格式化上下⽂，独⽴的渲染区域，且容器内的⼦元素不会影响到外⾯的布局。

○作⽤

■包含其内部浮动元素，防⽌浮动元素脱离⽂档流，导致⽗元素⾼度塌陷。最常⻅作⽤。

■解决外边距margin重叠问题。属于不同BFC的元素，即使是⽗⼦关系，它们的外边距也不会重

叠。

■可与浮动元素并排。BFC可以与浮动元素并排排列，不会被浮动元素覆盖。

○创建

■⻚⾯根元素HTML，本身是个BFC。

■浮动，left、right，不是none。

■定位，absolute、fixed。

■display，flex、inline-block。

■overflow，除了visible。

●display、float、position

1

○display为none，则float、position都⽆效。

○display不为none。

■没有position，只有display+float。float不为none时，display计算为block。

■display+float+position。position为absolute/fixed，display经过浏览器计算后，变为block（⼤

部分，也有变为flex），float计算为none。

■display+float+position。position不为absolute/fixed，若float不为none，display计算为对应设

置。

■display+float+position。position不为absolute/fixed，若float为none，

●当前元素不是根元素，直接应⽤display的设置值。

●当前元素为根元素，则display计算为对应值。

●清除浮动⽅式

○设置⽗级元素的⾼度。不推荐。

○⽗元素中最后添加⼀个标签，设置clear:both。不推荐。

○⽗级元素添加overflow:hidden，BFC，清除浮动。（溢出内容看不⻅）。不推荐。

○给⽗级元素添加伪元素after，清除浮动。

■伪元素是⾏内元素。.father:after{clear:both}

●CSS3新特性

○选择器变多了。⽐如属性选择器。

○border-raduis，border-shadow。

○⽂字。word-wrap，换⾏⽅式。text-overflow。

○transition过渡属性。

○transform转换。

○animation动