常见面试题—CSS篇

时间:2021-6-12 作者:qvyue
一、css sprite优缺点
  • css sprite:将多个图片拼接在一张图中,通过background-position和元素尺寸调节图片位置
  • 优点:减少http请求、增加图片压缩比,减少图片大小、更换风格方便
  • 缺点:维护麻烦、图片合成麻烦
二、link 和 @import的区别

Link 是html格式,@import是css格式 link支持并行下载, @import支持串行下载

三、FOUC是什么?怎么避免
  • FOUC:flash of unstyled content—用户定义样式表加载之前浏览器使用默认样式显示文档,用户样式加载渲染之后再重新显示文档,造成的页面闪烁
  • 解决:样式表放在部分
四、如何创建块级格式上下文,作用是什么
  • 块级格式上下文—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
  • 尽量用缩写,合理使用选择器
九、如何垂直居中一个
#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
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。