1、简述一下CSS盒模型
当对一个文档布局的时候，浏览器渲染引擎会将所有的元素表示为一个矩形盒子，这个矩形盒子就是盒模型。如下图所示：
1-1、盒模型
盒模型分为标准盒模型和IE盒模型；
标准盒模型：标准盒模型主要由以下4部分组成，包含margin、border、padding和content；
IE盒模型：IE盒模型主要由以下2部分组成，包含margin和content；在IE盒模型中，元素的content值包含了元素的border值和padding值。
1-2、元素的宽高值的计算
在一个盒模型中，元素的实际宽高值不包含margin值；如果我们计算一个元素的占位宽高值，则应该包含margin值；如果计算一个元素的实际宽高值，则不包含margin值。在IE盒模型中，元素的实际width值就是内容的width值。实际的计算如下：
- 标准盒模型占位宽高值的计算：
元素的占位width值 = margin * 2 + border * 2 + padding * 2 + content[设置的元素的width值]
元素的占位height值 = margin * 2 + border * 2 + padding * 2 + content[设置的元素的height值]
- IE盒模型的占位宽高值的计算：
元素的占位width值 = margin * 2 + content[包含元素的border值和padding值]
元素的占位height值 = margin * 2 + content[包含元素的border值和padding值]
1-3、盒模型中margin、border、padding的取值
margin可以为负值，也可以设置为百分比，设置百分比时参考的是当前元素的父元素，而不是元素自身设置。
padding不可以设置负值，可以设置百分比，设置百分比时参考的是当前元素的父元素，而不是元素自身设置。
border取值必须是实际的值，不能是百分比。
2、box-sizing的取值有哪些？区别是什么？
box-sizing属性用于更改计算元素宽高的默认的CSS盒子模型；它的取值有5个：content-box、border-box、inherit、initial、unset；实际应用中，用的比较多的两个属性值就是content-box和border-box。
2-1、属性出现的背景
在CSS中，为一个元素的设置宽高属性值时，只会应用到这个元素的内容区域。如果这个元素设置了padding值和border值，绘制到屏幕上的盒子的宽度和高度值就会加上设置的padding值和border值，浏览器就需要去重新计算盒子的宽高值，这种设置非常不利于响应式布局。
2-2、content-box和border-box的区别
1> content-box
默认值。内容区域的宽高值不包含元素的padding和border值，也就是说：假如我们给元素设置了一个width值为50px，那么这个元素的内容区域的width值就是50px；元素设置的padding值和border值不包含在这个设置的width中。【content-box就相当于是标准盒模型。】
2>、border-box
内容区域的宽高值包含元素的padding和border值，也就是说：假如我们给元素设置了一个width值为50px，那么这个元素的内容区域的width值小于等于50px；元素设置的padding值和border值会包含在这个设置的width值50px中。【border-box就相当于是IE盒模型】
3、CSS隐藏元素的方式有哪些？区别是什么？
3-1、opacity
用法：opacity: 0;
说明：
该属性的意思是检索或设置对象的透明度；
当opacity的值为0时，元素在视觉上消失了，但是它仍然占据这那个位置，并且会对页面布局起作用；
3-2、display
用法：display: none;
说明：
该属性设置为none时，会将元素直接从文档中删除；不利于SEO；
使用该属性设置元素的隐藏，不占页面空间，对页面布局没有影响；
3-3、visibility
用法：visibility: hidden;
说明：
该属性只是将元素隐藏，不会将元素从文档中移除；
隐藏的元素仍然占据位置，会影响页面布局；
该属性会继承，如果父元素使用了该属性，子元素也会被隐藏；
3-4、position
用法：position:absolute;left: -10000px;
说明：
使用了定位方式的元素，只要将元素的4个方向的值设置足够大，超出浏览器的可视区域范围，元素就会处于隐藏状态；
4、简单说一下CSS元素分类：块元素和行内元素
4-1、CSS元素主要分为块级元素和行内元素
块级元素：div dl dd dt h1~h6 header footer form ul ol li hr p table
行内元素： a img em strong i label input textarea select sub sup b
4-2、块状元素和内联元素的区别
块级元素是其他元素的容器，可以容纳内联元素和其他块状元素，可以为其设置宽高值
内联元素只能容纳文本和其他内联元素，不能设置宽高值
4-3、块级元素和内联元素可以通过display属性来转换
1> 将一个块级元素的`display`属性设置为<font color="red">inline</font>，块级元素就被转换成了内联元素；
2> 将一个内联元素的`display`属性设置为<font color="red">block</font>，内联元素就被转换成了块级元素；
3> 将元素的`display`属性的值设置为<font color="blue">inline-block</font>，也可以为元素设置宽高值；但是该值<b>不支持IE6/7</b>
5、CSS清除浮动的几种方式
浮动的认识：https://blog.csdn.net/mengStudents/article/details/84893505
5-1、使用空标签清除浮动
在浮动元素的后边添加空标签<br/>可以清除浮动，使用这个方式清除浮动时，要将其高度设置为0；（这是W3C标准推荐使用的做法:会增加无意义的标签）
<div style="float:left;"></div><br style="clear:all;"/>
5-2、在浮动元素之后添加一个空元素来清除浮动
<div style="float:left;"></div>
<div style="clear:both;"></div>
这种方式不兼容IE6，在IE6下，会将小于19px的元素的高度都默认设置为19px，解决方法如下：
.clear{
height:0;
font-size:0;//使用这种方式设置之后，仍然存在2px的偏差
clear:both;
}
5-3、给浮动元素的父级添加属性-overflow:hidden
使用这种方式清除浮动，需要配合zoom属性一起使用，只有设置了zoom属性，才会触发IE浏览器的haslayout
父元素{
overflow:hidden/auto;
zoom:1;
}
注意：
在IE6/7下，浮动元素的父级有高度，就不需要清除浮动;
在IE6/7下，两个元素并在同一行，需要给两个元素都加浮动
5-4、给父元素添加浮动：不推荐使用
5-5、给父元素添加属性
display:inline-block;
5-6、定义一个单独的类清除浮动
.clear{
zoom:1;//兼容IE6
}
.clear:after{
display:block;
content:"";
clear:both;
height:0;
}
6、CSS元素居中
参考：https://blog.csdn.net/mengStudents/article/details/76222838
7、写出IE6 bug的几种解决方式
7-1、常见的普通兼容性问题
1>、问题描述
在IE6下，如果希望两个块级元素并列排在一行，需要给两个元素都添加浮动样式；如果给一个元素添加了浮动样式，另一个元素通过margin值来设置，在IE6下会存在3px的偏差；
解决办法：给两个块级元素都添加浮动
2>、元素嵌套问题
P标签嵌套h3标签，将P元素设置宽高后，会出现两个块状元素
解决办法：注意元素的嵌套问题
3>、IE6最小高度问题：
当一个元素的高度小于IE6的最小高度19px时，会默认将元素的最小高度设置为19px;
解决办法：使用overflow:hidden;来设置使用font-size:0;来设置
4>、margin值传递：
在任何浏览器下，子元素的margin值会传递的父元素的margin值
在标准浏览器下，父级或子级浮动都不会出现问题
解决办法：在使用overflow:hidden;时，在标准浏览器下显示正确，IE6下不起作用（没有触发IE6的haslayout）；在IE6下，需要结合zoom:1，一起使用，zoom用来触发IE6的haslayout
5>、问题描述
在IE6下，父级有边框，子元素的margin值会消失
解决方式：触发父元素的haslayout，即添加zoom:1
6>、a标签伪类：
在IE6浏览器下，只支持a标签的伪类；标准浏览器下支持所有标签的hover类
解决方式：使用JS中的onmouseover方法实现hover伪类
7-2、float浮动出现的bug
1>、IE6下的双边距bug
当IE6下的块元素同时设置浮动和横向margin值时，块元素会存在双边距bug，这时横向margin值就会被放大为两倍；
当有多个块元素浮动时，设置margin-left时，左边第一个会有双边距；设置margin-right时，右边第一个会有双边距
解决办法：使用display:inline;来实现
2>、IE6下的li问题
在IE6、7下，li元素本身不浮动，li下的子元素浮动，那么li就会产生间隙
解决办法：
a、给li添加浮动、设置li的宽度
b、给li添加vertical-align：top
3>、在IE6下，当元素的最小高度和li的间隙共同存在时，需要给li元素同时添加浮动和overflow属性
4>、给添加浮动的多个DIV添加margin值时（上下左右都设置），在IE6下，下margin值会消失
原因：当一行子元素占有的宽度之和与父元素的宽度值相差超过3px时，或者不满一行时，最后一行的下margin值就会失效，目前这种bug没有解决方案
5>、IE6下的文字溢出bug
当子元素与父元素的宽度差值小于3px时，文字就会溢出，两个元素都是浮动元素
溢出情况：两个浮动元素中间有注释或者内嵌元素时的出现
解决办法：父元素的宽度大于子元素的宽度，且宽度差值大于3px；在两个浮动元素中间添加块元素
6>、浮动和定位
当浮动元素和绝对定位元素是并列关系时，在IE6下绝对定位元素会消失
解决办法：给绝对定位元素添加父元素包裹起来
7-3、定位问题
1>、相对定位问题
在IE6、7下，当子元素有相对定位时，父级的overflow:hidden;包不住子级的高度
解决办法：给父级添加相对定位
2>、绝对定位问题
在IE6下，绝对定位元素的父级宽高为奇数时，right和bottom属性有1px的偏差
3>、固定定位
固定定位在IE6下不兼容
7-4、IE6中的边框问题
IE6不支持1px的点线，支持2px及以上的点线边框
需要点线边框时，利用背景图来实现
7-5、透明度兼容性
标准浏览器下，使用opacity设置透明度
IE6 7 8下，透明度的设置：filter：alpha(opacity=50)；
7-6、表单兼容性
1>、input标签
在IE6 7下，输入类型的表单控件上有1px的间隙
解决方法：给input添加浮动
2>、 input下的图片背景问题
在IE6 7下，背景图片会随着文字的输入而发生移动
解决办法：给父级添加背景，且父级的宽度与子级的宽度一致，清除本身的背景色
3>、border问题
在IE6 7下设置border:none;无效，
解决办法：给input重新添加背景
7-7、图片格式问题
1>、gif：背景图片全透明部分可以显示，半透明部分会失效
2>、jpg：jpg格式的图片显示出来是不透明的
3>、png8：与gif合适的图片一样
4>、png24：全透明和半透明效果都会保留
注意：png格式的图片在IE6下不支持
解决方法：
引入script库：DD_belatedPNG_0.0.8a.js
在IE6下可以使得浏览器兼容png图片,调用.fix方法：DD_belatedPNG.fix(".类名")
7-8、CSS hack
IE代码解析：<!--[if IE 8]--><[endif]-->给浏览器添加特殊标识，限定当前CSS样式只能在某些浏览器下被解析
* + 表示被IE7以下的IE浏览器解析
\9：IE10以下的浏览器解析
_：下划线表示IE6之前的浏览器解析
谷歌浏览器的CSS hack:@media screen and (-webkit-min-device-pixel-ratio:0){.box{color:red;}}
7-9、important
修饰CSS样式，提升样式的优先级，添加important的CSS样式的优先级最高，大于行内样式
但是在IE6下，在important样式后边添加一条同样的样式之后，这个样式会失效，会按照原来默认的优先级设置样式
7-10、margin值的设置
在使用margin赋值时，如果使用负值设置，在IE6下超出父级的部分会被父级隐藏
解决方法：给子元素添加position：relative;
7-11、IE的haslayout
当元素本身有高度时，就会触发IE浏览器的haslayout
7-12、IE及标准浏览器中的div居中问题
标准浏览器中设置margin:0 auto可以设置元素居中，在IE中，不起作用
标准浏览器中设置text-align:center;可以设置文本居中，但是在IE浏览器中，他会默认一切居中，包括标签
在IE中，如果不想设置其他元素的文本居中，在可以在父级设置text-align:left;就可以恢复为默认属性，其他浏览器不会受影响
7-13、margin值
外边距会出现上下叠压；
父子级嵌套问题：自己的margin会传递给父级，一般使用padding值来替代margin值
8、CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？CSS3有哪些新特性？
9、CSS伪类和伪元素
参考：https://blog.csdn.net/mengStudents/article/details/85267678