1. 介绍一下盒模型
标准盒模型：给元素设置width、height只包括content，不包含border、padding、margin
IE盒模型：给元素设置width、height包括content、border、padding，不包含margin
1.1 通过什么属性来控制盒模型
box-size:
content-box ---------默认值，标准盒模型
border-box ---------IE盒模型、怪异盒模型
2. CSS选择器有哪些
id选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器（ul > li）、后代选择器（li a）、通配符选择器（*）、属性选择器（a[rel=”external”]）、伪类选择器（a:hover, li:nth-child）
3. CSS有哪些属性可以继承，哪些不能继承
可继承的属性：font-size, font-family, color
不可继承的样式：border, padding, margin, width, height
4. CSS选择器优先级
!important:无穷大
内联样式：1000
id：0100
Class：0010
标签选择器：0001
结论：
- 有!important声明的样式优先级最高
- 计算权重，权重不可进位，权重大的优先级高，权重相同，按顺序后面的优先级高
- 继承得到的样式的优先级最低
5. display有哪些值？说明他们的作用?
- inline（默认）–内联
- none–隐藏
- block–块显示
- table–表格显示
- list-item–项目列表
- inline-block-内联块
6.块元素、内联元素、内联块元素有什么区别
块元素：
独占一行
书写完会自动换行
宽和高可以修改
内联元素：
不独占一行
书写完成后不会自动换行
没有宽和高
在浏览器显示会有一个空格间距
6.1 有哪些块级元素和内联元素
块级元素:div h1 p li table hr
内联元素:img span a input
7. position的值？
- static（默认）：按照正常文档流进行排列；
- relative（相对定位）：不脱离文档流，参考自身静态位置通过 top, bottom, left, - right 定位；
- absolute(绝对定位)：参考距其最近一个不为static的父级元素通过top, bottom, left, right 定位；
- fixed(固定定位)：所固定的参照对像是可视窗口。
8. 外边距重叠问题
8.1 为什么会发生外边距重叠
- 都是普通流中的元素且属于同一个 BFC
- 没有被 padding、border、clear 或非空内容隔开
- 两个或两个以上垂直方向的「相邻元素」
这里的「相邻元素」可能是兄弟节点也可能是父子节点，比如：
一个元素的 margin-top 和它的第一个普通流子元素的 margin-top；
一个元素的 margin-bottom 和它下一个普通流兄弟的 margin-top；
一个高度为 auto 元素的 margin-bottom 和它的最后一个子元素的 margin-bottom
8.2 如何避免外边距折叠
- 避免外边距折叠只需破坏掉触发的条件即可，比如创建一个 BFC。
- 给父元素加padding、border、overflow:hidden（BFC）
9. BFC
BFC指的是块级格式化上下文，一个元素形成了BFC之后，那么它内部元素产生的布局不会影响到外部元素，外部元素的布局也不会影响到BFC中的内部元素。一个BFC就像是一个隔离区域，和其他区域互不影响。
创建BFC
（1）根元素或包含根元素的元素
（2）浮动元素float＝left|right或inherit（≠none）
（3）绝对定位元素position＝absolute或fixed
（4）display＝inline-block|flex|inline-flex|table-cell或table-caption
（5）overflow＝hidden|auto或scroll(≠visible)
作用：
(1) 清除元素内部浮动
(2) 解决外边距合并问题
1.给父元素添加边框 border: 1px solid transparent
2.触发bfc,如flost:left 或 display: inline-block
3.加padding
4.overflow:hidden
10. 清除浮动
1.父级div定义height
2.父级div：overflow:hidden
3.父级div也浮动，弹药加width
4.br标签：clear:both
5.结尾处加空div：clear:both
6.伪元素：
.clearfix:after{
content: "";
display: block;
clear: both;
}
11.水平、垂直居中
水平居中：
text-align:center
margin:0 auto
dispaly:flex; justify-content:center
display: table-cell;
position:relative; left:0;right:0;margin:auto;
position:absolute; left: 50%;transform: translateX(-50%);
垂直居中：
line-height为height值
dispaly:flex; align-item：center
position:absolute; top: 50%;transform: translateY(-50%);
display: table-cell; vertial-align：middle
12. display: none;与visibility: hidden;的区别
- 联系：它们都能让元素不可见
- 区别：
- display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；visibility: hidden;不会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可见
- display: none;是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示；visibility: hidden;是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式
- 修改常规流中元素的display通常会造成文档重排。修改visibility属性只会造成本元素的重绘。
- 读屏器不会读取display: none;元素内容；会读取visibility: hidden;元素内容
13. CSS3有哪些新特性？
RGBA和透明度
background-image:
background-origin(content-box/padding-box/border-box)
background-size
background-repeat
文字阴影：text-shadow： 5px 5px 5px #FF0000;（水平阴影，垂直阴影，模糊距离，阴影颜色）
font-face属性：定义自己的字体
圆角（边框半径）：border-radius 属性用于创建圆角
边框图片：border-image: url(border.png) 30 30 round
盒阴影：box-shadow: 10px 10px 5px #888888
媒体查询：定义两套css，当浏览器的尺寸变化时会采用不同的属性
14. CSS里的visibility属性有个collapse属性值？在不同浏览器下以后什么区别？
当一个元素的visibility属性被设置成collapse值后，对于一般的元素，它的表现跟hidden是一样的。
-
chrome中，使用collapse值和使用hidden没有区别。
-
firefox，opera和IE，使用collapse值和使用display：none没有什么区别。
15. position跟display、overflow、float这些特性相互叠加后会怎么样？
display属性规定元素应该生成的框的类型；position属性规定元素的定位类型；float属性是一种布局方式，定义元素在哪个方向浮动。
float 或者absolute定位的元素，只能是块元素或表格。
（1）首先我们判断display属性是否为none，如果为none，则position和float属性的值不影响元素最后的表现。
（2）然后判断position的值是否为absolute或者fixed，如果是，则float属性失效，并且display的值应该被 设置为table或者block，具体转换需要看初始转换值。
（3）如果position的值不为absolute或者fixed，则判断float属性的值是否为none，如果不是，则display 的值则按上面的规则转换。注意，如果position的值为relative并且float属性的值存在，则relative相对 于浮动后的最终位置定位。
（4）如果float的值为none，则判断元素是否为根元素，如果是根元素则display属性按照上面的规则转换，如果不是，则保持指定的display属性值不变。
总的来说，可以把它看作是一个类似优先级的机制，"position:absolute"和"position:fixed"优先级最高，有它存在的时候，浮动不起作用，'display'的值也需要调整；其次，元素的'float'特性的值不是"none"的时候或者它是根元素的时候，调整'display'的值；最后，非根元素，并且非浮动元素，并且非绝对定位的元素，'display'特性值同设置值。
16. 元素竖向的百分比设定是相对于容器的高度吗？
当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。
17. 什么是包含块，对于包含块的理解?
包含块（containingblock）就是元素用来计算和定位的一个框。
（1）根元素（很多场景下可以看成是<html>）被称为“初始包含块”，其尺寸等同于浏览器可视窗口的大小。
（2）对于其他元素，如果该元素的position是relative或者static，则“包含块”由其最近的块容器祖先盒的contentbox
边界形成。
（3）如果元素position:fixed，则“包含块”是“初始包含块”。
（4）如果元素position:absolute，则“包含块”由最近的position不为static的祖先元素建立，具体方式如下：
如果该祖先元素是纯inline元素，则规则略复杂：
•假设给内联元素的前后各生成一个宽度为0的内联盒子（inlinebox），则这两个内联盒子的paddingbox外面的包
围盒就是内联元素的“包含块”；
•如果该内联元素被跨行分割了，那么“包含块”是未定义的，也就是CSS2.1规范并没有明确定义，浏览器自行发挥
否则，“包含块”由该祖先的paddingbox边界形成。
如果没有符合条件的祖先元素，则“包含块”是“初始包含块”。
