CSS基础面试题，快来查漏补缺
本文大部分问题来源：50道CSS基础面试题（附答案），外加一些面经。
我对问题进行了分类整理，并给了自己的回答。大部分知识点都有专题链接（来源于本博客相关文章），用于自己前端CSS部分的查漏补缺。虽作为一个面试资料，但感觉也能帮助前端新手梳理CSS的知识点。
开胃餐-两道常见考题
盒子模型
样式与选择器
CSS3
包含块
BFC
中插小点
定位position
display与visibility
float
flexbox
overflow
响应式设计
CSS优化
应用
▶开胃餐x2
用纯CSS创建一个三角形的原理是什么？
图1为border最普遍的用法，border: solid 10px #ffb6b9;。用多了你会不会就觉得border是由四个矩形边框拼接而成，但其实是错的。实际上，元素的border是由三角形组合而成，为了说明这个问题，我们继续看：
图2，我们为边框四个方向设置不同颜色，border-color: #ffb6b9 #fae3d9 #bbded6 #8ac6d1;，并加大边框宽度。
图3，我们进一步将元素的宽高设为0。我们发现，此时元素由上下左右4个三角形组成。
为了实现一个三角形，那就很简单了，我们只需将其它border边的颜色设置为白色或者透明色即可
图4，border-color: transparent transparent #bbded6;，设置上三角，左右三角为透明，那么我们就能看到一个图4的三角形了。
.triangle {
width: 0;
height: 0;
border: 50px solid;
border-color: transparent transparent #bbded6;
}
水平垂直居中
个人常用的水平垂直居中方法，具体的可以戳链接我写的很全，在本文里只提供思路。
水平垂直居中无非分成内联元素的居中和块级元素的居中。最简单的方法就是使用flex布局，但要注意浏览器兼容性问题，包括后面提到的transform。
内联元素的水平和垂直居中分别可以使用text-align: center;和line-height解决
块级元素的水平和垂直居中又需要考虑这个元素的宽高是否固定，如果固定则定位和margin的auto属性就能解决。例：
#container{
width: 1000px;
height: 1000px;
position: relative;
}
#center{
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
还有一种方法，拿水平居中来举例：
step1：left:50%; 将子元素定位到父元素1/2宽的位置
step2：margin-left:-1/2自身宽 将子元素向左移动自身宽度的一半
当宽高不固定的时候，也可以使用transform:translateX(-50%)来实现step2。
由于使用了float后，浮动元素脱离了普通文档流，因此块级元素常用的margin:auto无效了。改用定位的方法（即上面提到的step1、step2）
好，正文开始。
▶盒子模型
介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？
每一个盒子都被划分为四个区域：内容区、内边距区、边框区、外边区。
样式设置里with和height指的内容区的宽高。
标准盒子模型：padding、border和margin不会影响content的尺寸，但是会增加元素框的总尺寸。
IE盒子模型：内容区大小包含了padding、border。
box-sizing属性？
用来控制元素的盒子模型的解析模式，默认值为content-box
context-box：联想W3C的标准盒子模型。元素盒子的width和height属性指的是内容盒子，这时候添加边框和内边距不会影响内容盒子的大小，但会导致整个元素盒子变大。
border-box：联想IE传统盒子模型。width和height属性的值将会包含padding和border，从视觉上规定了箱子的大小。
▶样式与选择器
为什么要初始化CSS样式
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
CSS 预处理器
用的最多的：Less、Scss、Stylus
CSS预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题，例如你可以在CSS中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性，可以让你的CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。
CSS优先级算法如何计算？
优先级：!important > style > id > class、属性、伪类 > 元素、伪元素
-
!important声明的样式优先级最高，如果冲突再进行计算。
-
如果优先级相同，则选择最后出现的样式。
-
继承得到的样式的优先级最低。
CSS选择器有哪些？
CSS选择符：id选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器（ul > li）、后代选择器（li a）、通配符选择器（*）、属性选择器（a[rel=”external”]）、伪类选择器（a:hover, li:nth-child）
CSS那些属性可以继承？
可继承的属性：visibility、color、cursor、zoom、direction（特殊：<a>标签的字体颜色不能被继承）
字体全部都可以继承：font、font-style、font-variant、font-weight、font-size、font-family、font-stretch
文本除了vertical-align，其它都可继承：text-align、text-justify、text-indent、line-height、word-wrap等等
文本装饰：text-underline-position、text-shadow
li相关：list-style、list-style-image、list-style-position、list-style-type
不可继承的样式：定位、布局、尺寸、内边距、外边距、背景、边框相关等等
::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用
:before 和 :after 这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，单冒号表示伪类，伪元素的语法被修改成使用双冒号，成为::before ::after。伪元素并不存在与dom中，只存在于页面之中。
::after用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。
::before 创建一个伪元素，其将成为匹配选中的元素的第一个子元素。
浏览器是怎样解析CSS选择器的？
浏览器在碰到HTML中指向CSS文件的链接时，会获取并解析CSS文件。CSS文件会被浏览器转为CSS对象模型。不仅是外部CSS，内部style元素或行内style属性中的CSS也会被解析并添加到这个对象模型中。这个对象模型事宜个树形结构，包含页面中样式的层次结构。
每个CSS选择符都会匹配一个DOM节点，然后浏览器会基于层叠、继承和特殊性来计算每个DOM节点的最终样式。
▶CSS3
CSS3新增伪类有那些?
p:first-of-type 选择属于其父元素的第一个出现的p
p:last-of-type 选择属于其父元素最后一个出现的p
p:only-of-type 选择属于其父元素唯一的p元素
p:only-child 选择属于其父元素的唯一子元素（没有任何兄弟元素的p元素）
p:nth-child(2) 选择属于其父元素的第二个子元素
:enabled :disabled 表单控件的禁用状态。
:checked 单选框或复选框被选中。
CSS3有哪些新特性？
CSS3参考手册属性列表（链接中紫色链接表示该属性在CSS3有修改或者增加了新的属性值；橙色链接表示该属性是CSS3新增属性 ）
下面列出容易记的几个
- 媒体查询（@media (min-width:600px)）
- 嵌入web字体（@font-face）
- 过渡（transition）与动画（animation）
- 【阴影】box-shadow
- 【边框】创建圆角（border-radius）、边框图片（border-image）
- 【背景】背景图片尺寸（background-size）、背景图片定位（background-origin）、背景裁剪（background-clip）、多重背景（background-image:url(1.jpg),url(2.jpg);）
- 【文字】允许长单词换行（word-wrap:break-word）、文字阴影（text-shadow）
- 【颜色】rgba和透明度opacity
- 【渐变】线性渐变（gradient）
- 【布局】flex、grid、多栏布局
- 【盒模型】box-sizing
▶包含块
包含块的确定
确定一个元素的包含块的过程完全依赖于这个元素的 position 属性：
-
static、relative、sticky：包含块可能由它的最近的祖先块元素的内容区的边缘组成。也可能会建立格式化上下文(比如说 table container, flex container, grid container, 或者是block container 自身)。
-
absolute： 包含块就是由它的最近的 position 的值不是 static 的祖先元素的内边距区的边缘组成。
❗注意以上两个，一个是内容区、一个是内容边距区
- fixed：在连续媒体的情况下包含块是窗口视图（viewport）,分页媒体下的情况下包含块是分页区域(page area)。
如果position值是absolute或fixed，包含块也可能是由满足以下条件的最近父级元素的内边距区的边缘组成的：
注意：根元素()所在的包含块是一个被称为初始包含块的矩形。
元素竖向的百分比设定是相对于容器的高度吗？
如果某些属性被赋予一个百分值的话，它的计算值是由这个元素的包含块计算而来的。这些属性包括盒模型属性和偏移属性：
-
height、top、bottom：通过包含块的 height 的值。如果包含块的 height 值会根据它的内容变化，而且包含块的 position 属性的值被赋予 relative 或 static ，那么，这些值的计算值为 auto。
-
width、left、right、padding、margin 这些属性由包含块的 width 属性的值来计算它的百分值。
这里特别强调padding和margin讲的是上下左右四个都是根据包含块的width
▶BFC
对BFC规范(块级格式化上下文：block formatting context)的理解？
BFC指的是块级格式化上下文，简单的来说，BFC就是创建一个div盒子或者给已存在的盒子激活BFC，盒子内部的元素布局不影响盒子外部的元素。也就是所谓的相互隔绝，互不影响。
常见的创建BFC方式
- float：none以外的属性值。如：left 、 right
- overflow：visible以外的属性值。如：hidden、auto 、 scroll
- position属性值为：absolute、fixed（只有这两个可以）
- dispaly属性值为：inline-block、 flex、 inline-flex、 table-cell、 table-caption 反正block不行就是了
BFC应用
详细解决方案戳上面给的链接。
- 解决margin重叠
- 解决使用float时浮动元素和非浮动元素重叠（也是一种清除浮动的方法啦）
- 解决使用float时容器高度塌陷
▶中插小点
你对line-height的理解？
line-height指的是行盒子的总高度，更通俗的叫法是行间距。行盒子的整体行高减去font-size，得到的值平分，就是里面文本的上下空白位置。
可以给line-height设置像素值、百分比值或em值，但要注意body元素的所有子元素都会继承line-heoght的计算值，但无单位的值就不会这样。因此，设置，line-height:1.5，那么子元素继承的是一个系数，永远与自己的font-size成比例。一般取值在1.2~1.5范围内。
将行高设置为height的值，可以实现文本的垂直居中。
手动写动画，最小时间间隔？
17ms，红宝书原话：
大多数电脑显示器的刷新频率是60HZ，大概相当于每秒重绘60次。大多数浏览器都会对重绘操作加以限制，不超过显示器的重绘频率，因为即使超过那个频率用户体验也不会有提升。因此，最平滑动画的最佳循环间隔是1000ms/60，大概相当于17ms。以这个循环间隔重绘的动画是最平滑的，因为这个速度是最接近浏览器的最高限速。为了适应17ms的循环间隔，多重动画可能需要加以节制，以便不会完成太快。
网页中应该使用奇数还是偶数的字体?
偶数。
- 相对来说偶数字号比较容易和页面中其他部分的字号构成一个比例关系。
- 低版本的浏览器ie6会把奇数字体强制转化为偶数，即13px渲染为14px。
- Windows 自带的点阵宋体（中易宋体）从 Vista 开始只提供 12、14、16 px 这三个大小的点阵，而 13、15、17 px 时用的是小一号的点阵（即每个字占的空间大了 1 px，但点阵没变），于是略显稀疏。
常见的兼容性问题
CSDN浏览器兼容问题，这个人写的很全。我下面列几个我能记住的，