CSS面试突击

1. CSS有哪些选择器及优先级是什么？

• !important
• 内联样式 1000
• id 100
• 类、属性、伪类 10
• 标签、伪元素 1
• 相邻兄弟、子孙、后代、通配符、继承 0

2. 盒模型的种类及计算方式是什么？

• content-box（标准盒模型）
  • width = content-width;
• border-box(IE盒模型)
  • width = content-width + 2 * padding + 2 * border

3. CSS3有哪些新特性？

• CSS选择器(:not())
• 圆角(border-redius)
• 旋转(transform)
• 文字特效(text-shadow)
• 文字渲染(text-decoration)

4. 水平垂直居中的实现方式有哪些？

• flex布局实现

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

• 绝对定位实现一

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

• 绝对定位实现二

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

5. 两列布局(左栏宽度固定，右栏宽度自适应)的方式有哪些？

• flex定位实现

.outer {
    display: flex;
    height: 100px;
}
.left {
    width: 200px;
}
.right {
    flex: 1;
}

• 浮动 + margin实现

.outer {
    height: 100px;
}
.left {
    width: 200px;
    float: left;
}
.right {
    width: auto;
    margin-left: 200px;
}

• 绝对定位实现

.outer {
    position: relative;
    height: 100px;   
}
.left {
    width: 200px;
}
.right {
    position: absolute;
    top: 0;
    left: 200px;
}

6. 三列布局（左右两栏宽度固定，中间自适应）的方式有哪些？

• flex布局实现

.outer {
    display: flex;
    height: 100px;
}
.left {
    width: 100px;
}
.right {
    width: 100px;
}
.center {
    flex: 1;
}

• 浮动 + margin

.outer {
    height: 100px;
}
.left {
    float: left;
    width: 100px;
}
.right {
    float: right;
    width: 200px;
}
.center {
    margin-left: 100px;
    margin-right: 200px;
}

• 绝对定位 + margin

.outer {
    position: relative;
    height: 100px;
}
.left {
    position: absolute;
    width: 100px;
}
.right {
    position: absolute;
    width: 200px;
    top: 0;
    right: 0;
}
.center {
    margin-left: 100px;
    margin-right: 200px
}

7. 实现一个三角形？

div {
    width: 0;
    height: 0;
    border-top: 5px solid red;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
}

8. 实现一个扇形？

div {
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-radius: 10px;
    border-top-color: red;
}

9. 实现一个宽高自适应的正方形？

square {
    width: 10%;
    height: 10vw;
    background: red;
}