1.CSS3中的伪类与伪元素
伪类可以通过添加实际的类来实现 ，伪元素可以通过添加实际的元素来实现，其区别就是是否抽象创造出新元素。CSS3的标准是伪类使用单冒号“:” ，而伪元素使用双冒号“::”，但是在此之前无论是伪类还是伪元素都使用单冒号“:” 。注意在使用时，伪类就像真正的类一样，可以叠加使用；伪元素在一个选择器中只能出现一次，并且只能出现在末尾 。
2::before 和 :after中双冒号和单冒号有什么区别？解释一下这两个伪元素的作用。
单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于DOM之中，只存在在页面之中。:before 和 :after 这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before ::after。
3.CSS优先级
！important>行内样式>ID选择器>类选择器>标签选择器>通配选择器>继承>默认
权重计算规则：内联样式表的权值为 1000；ID 选择器的权值为 100；Class 类选择器的权值为 10；HTML 标签选择器的权值为 1。
当优先级相同时，采用就近原则，后出现的样式覆盖前面的样式 。
4.CSS选择器为什么是从右往左解析的？
CSS选择器的解析是从右向左解析的。若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。两种匹配规则的性能差别很大，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点），而从左向右的匹配规则的性能都浪费在了失败的查找上面。
5.字体大小font-size
单位为em时，相对于父元素字体的倍数；单位为%时，现对于父元素字体大小的百分比；
6.行高line-height
行高是指上下文本行之间的基线间的垂直距离。基线是指大部分字母坐落其上的一条看不见的线。行高单位为em时，行高为当前字体大小的倍数，行高单位为%时，为当前字体大小的倍数。
单行文本垂直居中：把line-height的值设置为height一样大。
多行文本垂直居中：需要把display属性设置为inline-block。
7. 用纯CSS创建一个三角形的原理是什么？
把元素的宽度、高度设为0，再设置三条边框为透明。
8.元素竖向的百分比设定是相对于容器的高度吗？
当按百分比设定一个元素的宽度和一些表示竖向距离的属性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，依据的都是父容器的宽度，而不是高度。
9.为什么要初始化CSS样式
因为浏览器兼容性的问题，不同浏览器对有些标签的默认值是不同的，如果没有初始化CSS往往会出现浏览器之间的页面显示差异。
10.上下外边距合并
标准排版流中，两个或更多相邻块级元素在垂直外边距相遇时，会将垂直方向上的外边距合并为一个外边距。如果发生合并的外边距全部是正值，则合并后的高度等于这些发生合并的外边距的高度值中的最大者；如果发生合并的不全为正值，则会拉近两个块级元素的垂直距离，甚至发生重叠现象：
（1）相邻元素外边距合并——塌陷
上边元素的margin-bottom与下边元素的margin-top发生合并：全部是正值时，合并后的高度等于发生合并的外边距的高度值中的最大者；若不全为正值，则合并后外边距的高度为发生合并的外边距的和，当和为负值时，相邻元素在垂直方向上发生重叠，重叠高度等于外边距和的绝对值。
（2）包含元素外边距合并：当父元素没有内容或内容在子元素后边，且没有内边距，且没有边框时，子元素的上外边距将和父元素的上外边距合并为一个上外边距，值为两者中较大者，同时该上外边距作为父元素的上外边距。要防止父子元素上下外边距合并，只需要在子元素前面设置内容或者给父元素设置边框或内边距，也可以通过触发BFC来解决。
11.块级元素，行内元素和行内块元素的特点
（1）块级元素：a、独占一行；b、不设置宽度时，宽度自动撑满父元素的宽度；c、可以设置宽高以及四个方向的内外边距。常见的块级元素有div、p、h1~h6、ul、ol等；
（2）行内元素：a、相邻的行内元素会从左往右依次排列在同一行里，直到一行排不下为止；b、不可以设置宽度及高度，其宽高由内容的长度和高度决定；c、可以设置四个方向的内边距及左右外边距，不可以设置上下外边距；常见的行内元素有span等；
（3）行内块元素：a、和相邻的行内元素或行内块元素依次从左往右排列在同一行，直至一行排不下为止（另外，与行内元素一样，源代码中的换行会被解析为空格）；b、可以设置宽度和高度；c、可以设置四个方向的内外边距。常见的行内块元素有input和img。
12.display的取值及作用
inline（行内元素）；block（块元素）；inline-block（行内块元素）；table（表格显示）；list-item（列表项目显示）；none（隐藏）
13.display设置为none和visibility设置为hidden的区别？visibility设置为collapse在不同浏览器下有什么区别？
display设置为none则不显示对应的元素，在文档布局中不再分配空间；visibility设置为hidden则隐藏对应的元素，但在文档布局中仍然保留原来的空间。在Chrome中，visibility设置为collapse与visibility设置为hidden效果相同；在Firefox，Opera和IE中，visibility设置为collapse与display设置为none效果相同。
14.浮动（float）
元素设置为浮动以后，其display变成了block。
浮动元素的特征：（1）浮动可以让块级元素显示在同一行；（2）浮动使行内元素具有了块级元素的特征，即可以设置宽高和四个方向的内外边距；（3）浮动元素不设置宽高时，宽高由内容撑开；（4）当父元素没有设置高度，且所有子元素设置浮动后，父元素高度塌陷；（5）浮动元素会脱离文档流，提升层级，任何显示在浮动元素下方的元素将会在“上移”（使用BFC可以防止浮动元素覆盖文档流元素）；（6）浮动元素碰到包含它的边框或者浮动元素边框则停止。
15.解决父元素高度塌陷的问题
（1）设置父元素高度；（2）使用空div清除浮动；（3）使用伪元素（并将其display设置为block）清除浮动；（4）使用BFC来解决父元素高度塌陷问题；
16.触发BFC
（1）元素display设置为inline-block时触发BFC；（2）设置浮动触发BFC；（3）设置overflow为除默认值之外的其他值时触发BFC；（4）position设置为absolute或fixed；
17.position
（1）static（默认）；
（2）relative（相对定位）：a 相对于自身原始位置进行定位；b 不脱离文档流；c 提升层级；
（3）absolute（绝对定位）：a 相对于最近一个position不为static的祖先元素进行定位；b 脱离文档流；c 提升层级；d 绝对定位块级元素不设宽度时，宽度由内容撑开；e 绝对定位的行内元素可以设置宽高以及内外边距；f 触发BFC;
（4）fixed（固定定位）：a 相对于浏览器可视窗口进行定位；b 脱离文档流，提升层级，且不随滚动条滚动而变化；c 固定定位块级元素不设宽度时，宽度由内容撑开；d 固定定位的行内元素可以设置宽高以及内外边距；e 触发BFC。
18.CSS属性overflow属性定义溢出元素内容区的内容会如何处理?
scroll：必会出现滚动条；auto：子元素内容大于父元素时出现滚动条；visible：溢出的内容出现在父元素之外。
hidden：溢出隐藏。
19.水平居中的实现
（1）行内元素水平居中：把行内元素包裹在一个display属性为block的父元素中，并且给父元素设置text-align:center;
（2）单个块级元素水平居中：设置width及margin：0 auto；
（3）多个块级元素水平居中：（a）为多个块级元素设置display:inline-block属性，其父元素设置：text-align:center; （b）使用flex布局实现：在多个块级元素的父元素上设置display:flex;justify-content:center
20.垂直居中
（1）单行行内元素：设置子元素的line-height与父元素的height相等；
（2）多行行内元素：给父元素设置display: table-cell;vertical-align:middle；
（3）已知子元素宽度和高度时：在子元素上设置position：absolute；top:50%;left:50%(因为子元素的左右上下移动是以该元素的左上角的为顶点的，因此需要再利用margin-top和margin-left)再稍微调整。
21.水平垂直居中：
（1）单行行内元素：（a）img元素：在父元素上设置 display:table-cell；text-align：center ；vertical-align:middle ；（b）span元素：在父元素上设置text-align:center 自身设置line-height等于父元素的高度 ；
（2）单个块级元素：同时利用position和负margin;
（3）利用flex布局。
22.CSS3有哪些新特性？
RGBA和透明度；background-image、background-origin（背景图片定位区域）(content-box/padding-box/border-box) 、background-size（设置背景图片尺寸）、background-clip（背景图片绘制区域）(content-box/padding-box/border-box)；word-wrap（对长的不可分割单词换行）word-wrap：break-word；文字阴影：text-shadow；font-face属性：定义自己的字体；圆角：border-radius 属性用于创建圆角；边框图片：border-image；盒阴影：box-shadow；媒体查询：定义两套css，当浏览器的尺寸变化时会采用不同的属性。
23.box-sizing属性
用来控制元素的盒子模型的解析模式，默认为content-box。context-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是content部分的高/宽；border-box：IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽。
将一个页面涉及到的所有图片都包含到一张大图中去，然后利用CSS的 background-image，background- repeat，background-position 的组合进行背景定位。利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能；CSS Sprites能减少图片的字节。
25 什么是响应式设计？响应式设计的基本原理是什么？关于Viewpoint？
响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。页面头部必须有meta声明的viewport。
26.CSS3转换transform、过渡transition和动画animation
转换transform：平移translate；旋转rotate；缩放scale；倾斜skew；
过渡transition：transition-property transition-duration transition-timimg-function transition-delay;
动画animation：animation-name(由@keyframes定义关键帧) animaiton-duration animation-timing-function animaiton-delay animation-iteration-count animaiton-direction
27.CSS3弹性盒子
display:flexbox；
flex-direction:raw/raw-reverse/column/column-reverse；
justify-content:flex-start/flex-end/center/space-between/space-around;
align-items:flex-start/flex-end/center/baseline/stretch;
28.多媒体查询
@media not|only mediatype and（expressions）{CSS代码}；
<link rel="stylesheet" media="mediatype and|not|only(expressions)" href>
29.property和attribute的区别：
property是DOM中的属性，是javascript的对象；attribute是HTML标签上的特性，它的值只能是字符串；每一个DOM对象都会有它默认的基本属性，而在创建的时候它只会创建这些基本属性，我们在HTML标签中自定义的属性是不会直接放到DOM中的。DOM有其默认的基本属性，而这些属性就是所谓的“property”，无论如何，它们都会在初始化的时候在DOM对象上创建。如果在HTML标签对这些属性进行赋值，那么这些值就会作为初始值赋给DOM的同名property。HTML标签中定义的属性和值会保存该DOM对象的attributes属性里面。property能够从attribute中得到同步，attribute不会同步property上的值。
30.页面导入样式时，使用link和@import有什么区别?
（1）link属于HTML标签，除了用于加载CSS外，还能用于定义RSS、定义rel属性等作用；而@import是CSS提供的，只能用于加载CSS；（2）页面加载时，link会被同时加载，而@import要引用的CSS等到页面加载完才进行加载；（3）link无兼容性问题，而@import存在兼容性问题。