常见的CSS面试

一、CSS

1.盒子模型

盒子模型分为标准盒子模型和怪异盒子模型

(w3c)标准盒子模型：设置的宽高就是盒子的内容（content），盒子总宽/高 = width/height + padding + border + margin

(IE)怪异盒子模型：设置的宽高包括盒子的内容（content）、padding、border，盒子总宽/高 = 设置的宽/高 + margin = content + padding + border + margin

box-sizing指定盒子模型类型，content-box（默认）：标准盒子模型；border-box：怪异盒子模型

2.定位

定位分为静态定位(static)、相对定位(relative)、绝对定位(absolute)、固定定位(fixed),默认静态定位，不脱离文档流。

相对定位(relative)：不脱离文档流，占据原先文档流位置，偏移自身位置，可用z-index分层。

绝对定位(absolute)：脱离文档流，不占据原先文档流位置，以最接近已经定位的(除static外)父级元素进行绝对定位，若父级元素都没有设置定位元素，则根据文档body左上角作为参考进行定位，可用z-index分层。

固定定位(fixed)：脱离文档流，不占据原先文档流位置，以浏览器窗口进行定位，不会随着滚动条滚动。

3.盒子垂直水平居中

a. 已知子盒子大小(width:100px;height:100px)

1) absolute + margin

.father {
    position: relative;
}
.son {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
}

b. 未知子盒子大小

1) flex

.father {
    display: flex;
    justify-content: center;
    align-items: center;
}

2) position + margin: auto

.father {
    position: relative;
}
.son {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto
}

3) position + transform

.father {
    position: relative;
}
.son {
    position: absolute;
    top: 50%;
    bottom: 50%;
    transfrom: translate(-50%, -50%)
}

4) table-cell

.father {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.son {
    display: inline-block
}

5) grid

.father {
    display: grid;
}
.son {
    align-self: center;
    justify-self: center;
}

4.选择器及权重

选择器(权重)有：标签选择器(1)、类选择器(10)、伪类选择器(10)、id选择器(100)、行内选择器（1000）、后代选择器（如：#head .nav ul li 从父集到子孙集的选择器）、子元素选择器（如：div>p ,带大于号>）
css 权重：!important > 行内样式 > ID > className > tagName > *