常见面试题---CSS篇
2021-04-25 本文已影响0人
菜菜的小阿允
一、css sprite优缺点
- css sprite：将多个图片拼接在一张图中，通过background-position和元素尺寸调节图片位置
- 优点：减少http请求、增加图片压缩比，减少图片大小、更换风格方便
- 缺点：维护麻烦、图片合成麻烦
二、link 和 @import的区别
Link 是html格式，@import是css格式 link支持并行下载， @import支持串行下载
三、FOUC是什么？怎么避免
- FOUC：flash of unstyled content—用户定义样式表加载之前浏览器使用默认样式显示文档，用户样式加载渲染之后再重新显示文档，造成的页面闪烁
- 解决：样式表放在<head>部分
四、如何创建块级格式上下文，作用是什么
- 块级格式上下文—block formatting context
- 创建规则：根元素、浮动元素、绝对定位、display取值为inline-block,table-cell等、overflow不取值为visible的值
- 作用：可以包含浮动元素、不被浮动元素覆盖、阻止父子元素之间的margin折叠
五、清除浮动的方法
- 父级div设置高度
- 结尾处加空div设置clear:both
- 父级div设置伪元素:after和zoom
- 父级div也浮动，设置宽度
- 父级div设置overflow:hidden
- 结尾处加br设置clear:both
六、css3新特性
- css选择器
- 多列布局
- 阴影和反射
- 文字特效text-shadow
- 线性渐变
- 旋转transform
- 圆角border-radius
七、display-line什么时候不显示间隙
- 移除空格
- margin负值
- font-size为0
- word-spacing
- letter-spacing
八、css在性能方面的优化
- css压缩与合并
- gzip压缩
- css文件放在head里，不用@import
- 尽量用缩写，合理使用选择器
九、如何垂直居中一个<img>
#container{
display: table-cell;
text-align: center;
vertical-align: middle;
}
如何垂直居中一个浮动元素
#div{
Width:200px; height:200px; position:absolute; top:50%; left:50%; margin-left:-100px; margin-top:-100px;
}
#div{
Width:200px; height:200px; position:absolute; margin:auto; top:0; left:0; bottom:0; right:0;
}
十、水平居中
- 行内元素，使用text-align：center
- 固定宽度，设置margin:auto
- 绝对定位，父元素设置relative, left:0,right:0, margin:auto
- flex布局，justify-content: center
- display设置table-cell
十一、垂直居中
- 绝对定位，top：0，bottom: 0, margin:auto
- 绝对定位中固定高度，top:50%，margin-top;-高度的一半值
- Display: table-cell, vertical-align:middle
- flex布局，align-item: center
- 文本居中，设置line-height和height相同的值
十二、重排和重绘是什么，如何避免
- 重排：dom的变化影响到了元素的几何属性（宽高），浏览器重新计算宽高，其他元素的几何属性也会受到影响，浏览器重新构造渲染树，这个过程称为重排
- 重绘：受到影响的元素要重新绘制在屏幕上的过程叫做重绘
- 避免：使用fragment、使用classname一次性改变属性、对于多次重排的元素，如动画，使用绝对定位脱离文档流，让他的改变不影响其他元素、不在布局信息改变时查询dom
