前端面试题及答案 - CSS篇

这篇文章并不是最全的前端面试题（没有最全，只有更全），只是针对自己面试过程中遇到的一些难题、容易忽略的题做一个简单的笔记，方便后面有面试需要的小伙伴们借鉴，后续内容会不定时更新，有错误之处希望大家不吝指出。

1、CSS3的新特性

• 实现圆角（border-radius）
• 阴影（box-shadow）
• 文字加特效（text-shadow）
• 线性渐变（gradient）
• 旋转（transform）
• 媒体查询，多栏布局

具体
2、CSS中 link 和@import 的区别

• link属于HTML标签，而@import是CSS提供的;
• 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
• import只在IE5以上才能识别，而link是HTML标签，无兼容问题;
• link方式的样式的权重 高于@import的权重.

3、介绍一下CSS的盒子模型

通过css3新增的属性 box-sizing: content-box | border-box分别设置盒模型为标准模型（content-box）和IE模型（border-box）详细介绍

• 两种盒模型：标准W3C盒模型、IE盒模型。

• 区别对比：(注意蓝色背景区域大小)

  1. 标准盒模型元素宽度width=content=100px，高度计算相同
     
  2. IE模型元素宽度width=content + 2 x padding + 2 x border = 70px + 2 x 10px + 2 x 5px = 100px。
     

4、CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？

• 选择符

1.id选择器（ # myid）
2.类选择器（.myclassname）
3.标签选择器（div, h1, p）
4.相邻选择器（h1 + p）
5.子选择器（ul > li）
6.后代选择器（li a）
7.通配符选择器（ * ）
8.属性选择器（a[rel = "external"]）
9.伪类选择器（a: hover, li:nth-child）

• 继承

1. 可继承的样式： font-size font-family color, text-indent;
2. 不可继承的样式：border padding margin width height;

• 新增伪类

p:first-of-type 选择属于其父元素的首个 <p> 元素。
p:last-of-type  选择属于其父元素的最后 <p> 元素。
p:only-of-type  选择属于其父元素唯一的 <p> 元素。
p:only-child    选择属于其父元素的唯一子元素的每个 <p> 元素。
p:nth-child(2)  选择属于其父元素的第二个子元素的每个 <p> 元素。
:enabled  :disabled 控制表单控件的禁用状态。
:checked        单选框或复选框被选中。

• 优先级算法规则:优先级就近原则，同权重情况下样式定义最近者为准;

!important >  id > class > tag  
important 比 内联优先级高,但内联比 id 要高

5、为什么要清除浮动？如何清除？
引起的问题：
（1）父元素的高度无法被撑开，影响与父元素同级的元素
（2）与浮动元素同级的非浮动元素会跟随其后
（3）若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

解决方法：
1、利用clear清除浮动

    .son {
        clear: left | right | both | auto
    }

2、在父元素后面额外添加标签

<div class="parent">
    ...
    <div style="clear:both;"></div>
</div>

3、父元素上使用after伪类

#parent:after {
    content: '';
    clear: both;
    height: 0;
    display: block;
}

4、利用overflow清除浮动

#parent {
    overflow: auto;
    display: inline-block;
}

6、实现垂直居中的几种方法

<div class="parent">
    <div class="son"></div>
</div>

• margin: auto

.parent {
    width: 400px;
    height: 400px;
    position: relative;
    .son {
        position: absoulte;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
    }
}

• margin-left、margin-top负值法(需知道子元素width、height)

.parent {
    width: 400px;
    height: 400px;
    position: relative;
    .son {
        position: absolute;
        width: 100px;
        height: 160px;
        left: 50%;
        top: 50%;
        //margin-top: translateY(-50%);
        //margin-left: translateX(-50%);
        margin-top: -80px;
        margin-left: -50px;
    }
}

• flex

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

• table-cell(未脱离文档流)

.parent {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

• 前端面试题及答案 - 浏览器篇
• 前端面试题及答案 - HTML篇
• 前端面试题及答案 - JS篇
• 前端面试题及答案 - 性能优化篇