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

古城微笑少年丶 2022-05-28 14:15 175阅读 0赞

1.  选择器解析方式是反过来的，从右到左解析，也就是从子元素到父元素，加快浏览器对CSS的解析速度，性能提高。
2.  选择器权重 ： ID选择器\#id\{\}+100    类 、属性 、 伪类  +10         元素 ‘伪元素’+1    其他选择器 +0
3.  权重不进位
4.  图片下面有空隙，img按照inline这样的方式对齐，也就是以基线base-line对齐，也就与底线有一定的空隙，解决方案：vertical-align:bottom，让它以底线对齐；方案二：display：block。
5.  一行的inline-box 的行高由最大行高那个inline-box决定的，所以设置不同的行高显示相同，行高并不改变其里面的布局，而是把父盒子给撑高了。
6.  想要一个元素在父容器中居中，可以设定line-height比本身元素的高度高，这样高出来的高度就会分布在上下两侧，实现垂直居中的效果。
7.  hsla(x,y,z,k)色相
8.  背景渐变：background:linear-gradient(135deg,red,green)
9.  多背景叠加：bg:linear-gradient(135deg,red,green),linear-gradient(135deg,red,green)中间加逗号
10. 雪碧图：使用同一张图片，主要用background-position去定位大背景图中的小图标。好处：性能优化，减少图片的加载，减少HTTP的请求。
11. base64图片：文本格式，适合小图标的使用场景。缺点：体积比原图大1/3，CSS文件增大，增大解码的开销（先转换成图片，再去做后面的操作，增加浏览器的负担，特别是移动端）；优点：性能优化，减少HTTP连接数。 
12. border-img:给边框加背景
13. 三角形的制作：
    
        div{
             width:0px;
             height:30px;
             border-bottom:30px solid red;
             border-right:20px solid transparent;
             border-left:20px solid transparent;
        }
    
      
    
14. 滚动条：当行数过多时，使用overflow属性设置显示效果，有4个值，auto自适应（如果行数不够多则没有出现滚动条，行数过多出现滚动条，windows环境下）;hiden隐藏（行数过多隐藏掉，只显示部分）；visiable（所有行数都可见，撑出父元素的外面），scroll（效果与auto几乎一样，唯一不同是windows环境下，当行数很少时也出现滚动条。）
15. 文字折行：overflow-wrap(word-wrap)通用换行控制 ； word-break 针对多字节文字  ；white-space 空白处换行 。使用white-space:nowrap使一个超长的句子不换行。
16. CSS Hack：Hack即不合法但生效的写法，主要用于区分不同浏览器，缺点：难理解 难维护 易失效
17. 面试真题 > CSS样式（选择器）的优先级：1.计算权重确定   2.!important优先级最高  3.内联样式 4 后写的生效（就近原则）
18. 面试真题 > 伪类和伪元素的区别 ： 伪类表状态 ； 伪元素是真的有元素 ； 前者单冒号，后者双冒号。
19. 面试真题 > 如何美化checkbox?  1.label\[for\]和id   2.隐藏原生input  3.：checked+label