CSS面试题布局权重工程化

CSS面试题

CSS基础面试题

Css权重：

计算一个不进位的数字

！important            	      					   +infinity
行间样式（style）                     	  			+1000
id选择器                                		      +100
class选择器|属性选择器|伪类选择器（eg ::before）         +10
标签选择器|伪元素（eg:hover）             	         +1
通配符选择器                                          +0

文字折行

overflow-wrap：通用换行控制

• 是否保留单词

word-break：真对多字节文字

• 中文句子也是单词

white-space：空白处是否换行

CSS hack

1、css样式选择器的优先级

• 计算权重
• ! important
• 内联样式
• 后写的优先级高

2、雪碧图的作用

• 减少https请求数 提高加载性能
• 有可能减少图片的大小（有限而且现在提及少）

3、自定义的字体的使用场景

• 宣传、品牌、banner等固定文案
• 字体图标

4、base64的作用

• 减少http请求（但增加了加载性能，所以适用于小图标，如loading图）
• 适用于小图片
• 体积约为原图的4/3

5、伪元素和伪类的区别

• 伪类表状态
• 伪元素是一个真的元素
• 伪类使用单冒号
• 伪元素使用双冒号

6、如何美化checkbox

• label[for]和id
• 隐藏原生input
• :checked+ label

CSS布局（重点）

盒子模型：

• content+padding+border+margin
• 默认情况：高度、宽度只对内容生效
• 占用空间：content+padding+border

position：

• static： static定位是HTML元素的默认值，即没有定位，元素出现在正常的流中。因此这种定位就不会受到top、bottom、left、right的影响。
• fixed： fixed定位是指元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的他也不会滚动，而且fixed定位使元素的位置与文档流无关，因此不占据空间，所以会和其他元素发生重叠。
• relative： 相对定位元素的定位是相对他自己的正常位置定位。
• absolution：绝对定位的元素相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于。

float：

• 元素浮动

• 脱离文档流

• 但不脱离文本流（占据文字位置）

• 对自身影响：

  • 形成块（BFC）
  • 位置尽量靠上

• 对兄弟的影响

  • 上面一般贴非float元素
  • 旁边一般贴float元素
  • 不影响其他块级元素的位置
  • 影响其他块级元素内部的文本

• 对父级元素的影响

  • 从父布局消失
  • 高度塌陷

• 清除浮动

  • 经典清除浮动

    .clearfix:after{
           
        content: '';
        display: block;
        height: 0;
        clear: both;
        <