这篇文章并不是最全的前端面试题（没有最全，只有更全），只是针对自己面试过程中遇到的一些难题、容易忽略的题做一个简单的笔记，方便后面有面试需要的小伙伴们借鉴，后续内容会不定时更新，有错误之处希望大家不吝指出。
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盒模型。
-
区别对比：(注意蓝色背景区域大小)
-
标准盒模型元素宽度width=content=100px，高度计算相同
-
IE模型元素宽度width=content + 2 x padding + 2 x border = 70px + 2 x 10px + 2 x 5px = 100px。
-
标准盒模型元素宽度width=content=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;
}
