CSS工作应用知识点与常考面试题总结（一）

最新推荐文章于 2023-02-07 16:56:40 发布

原创最新推荐文章于 2023-02-07 16:56:40 发布 · 484 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#CSS面试

前端面试专栏收录该内容

2 篇文章

订阅专栏

本文介绍了CSS选择器的解析方式及权重，展示了如何解决图片下方出现空隙的问题，并提供了多种CSS技巧，包括背景渐变、多背景叠加、雪碧图、base64图片的优缺点等。此外还讨论了滚动条的设置、文字折行的方法以及一些常见的CSS Hack技巧。

选择器解析方式是反过来的，从右到左解析，也就是从子元素到父元素，加快浏览器对CSS的解析速度，性能提高。
选择器权重： ID选择器#id{}+100 类、属性、伪类 +10 元素 ‘伪元素’+1 其他选择器 +0
权重不进位
图片下面有空隙，img按照inline这样的方式对齐，也就是以基线base-line对齐，也就与底线有一定的空隙，解决方案：vertical-align:bottom，让它以底线对齐；方案二：display：block。
一行的inline-box 的行高由最大行高那个inline-box决定的，所以设置不同的行高显示相同，行高并不改变其里面的布局，而是把父盒子给撑高了。
想要一个元素在父容器中居中，可以设定line-height比本身元素的高度高，这样高出来的高度就会分布在上下两侧，实现垂直居中的效果。
hsla(x,y,z,k)色相
背景渐变：background:linear-gradient(135deg,red,green)
多背景叠加：bg:linear-gradient(135deg,red,green),linear-gradient(135deg,red,green)中间加逗号
雪碧图：使用同一张图片，主要用background-position去定位大背景图中的小图标。好处：性能优化，减少图片的加载，减少HTTP的请求。
base64图片：文本格式，适合小图标的使用场景。缺点：体积比原图大1/3，CSS文件增大，增大解码的开销（先转换成图片，再去做后面的操作，增加浏览器的负担，特别是移动端）；优点：性能优化，减少HTTP连接数。
border-img:给边框加背景

三角形的制作：

div{
     width:0px;
     height:30px;
     border-bottom:30px solid red;
     border-right:20px solid transparent;
     border-left:20px solid transparent;
}

滚动条：当行数过多时，使用overflow属性设置显示效果，有4个值，auto自适应（如果行数不够多则没有出现滚动条，行数过多出现滚动条，windows环境下）;hiden隐藏（行数过多隐藏掉，只显示部分）；visiable（所有行数都可见，撑出父元素的外面），scroll（效果与auto几乎一样，唯一不同是windows环境下，当行数很少时也出现滚动条。）
文字折行：overflow-wrap(word-wrap)通用换行控制； word-break 针对多字节文字；white-space 空白处换行。使用white-space:nowrap使一个超长的句子不换行。
CSS Hack：Hack即不合法但生效的写法，主要用于区分不同浏览器，缺点：难理解难维护易失效
面试真题 > CSS样式（选择器）的优先级：1.计算权重确定 2.!important优先级最高 3.内联样式 4 后写的生效（就近原则）
面试真题 > 伪类和伪元素的区别：伪类表状态；伪元素是真的有元素；前者单冒号，后者双冒号。
面试真题 > 如何美化checkbox? 1.label[for]和id 2.隐藏原生input 3.：checked+label