1.display:none和visibility：hidden的区别？
display：none 隐藏对应的元素，在文档布局中不再给他分配空间，他各边 的元素会合拢，就当他从来不存在。
visibility：hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。
2.CSS中的link和@import的区别是？
1.link属于html标签，而@import是CSS提供的；
2.页面被加载时，link会同时加载，而@import引用的css会等到页面加载完在加载；
3.import只在IE5以上才能被识别，而link是HTML标签，无兼容问题；
4.link方式的样式的权重高于@import的权重。
3.position的absolute与fixed共同点与不同点
A：共同点：
- 1.改变行内元素的呈现方式，display被置为block；
- 2.让元素脱离普通流，不占据空间；
- 3.默认会覆盖到非定位元素上
B：不同点：absolute的“根元素”是可以设置的，而fixed的“根元素”固定为浏览器窗口。当你滚动网页，fixed元素与浏览器窗口之间的距离是不变的。
4.介绍一下CSS的盒子模型？
1）有两种：IE盒子模型、标准W3C盒子模型；IE的content部分包含了border和padding；
2）盒模型：内容（content）、填充（padding）、边界（margin）、边框（border）。
5.CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？CSS3新增伪类有哪些？
- id选择器（#myid）
- 类选择器（.muclass）
- 标签选择器（div）
- 相邻选择器（h1+p）
- 子选择器（ul>li）
- 后代选择器（li a）
- 通配符选择器（*）
- 属性选择器（a[rel = "external"]）
- 伪类选择器（a: hover）
可继承的样式： font-size font-family color text-indent；
不可继承的样式：border padding marging width height；
优先级就近原则，同权重情况下样式定义最近者为准；
载入样式以最后载入样式为准；
优先级为：
- ！important > id > class > tag
- important 比 内联优先级高，但内联比id要高
CSS3新增伪类举例：
- p:first-of-type 选择属于其父元素的 首个<p>元素的每个<p>元素
- p:last-of-type 选择属于其父元素的 最后<p>元素的每个<p>元素
- p:only-of-type 选择属于其父元素的唯一<p>元素的每个<p>元素
- p:only-child 选择属于其父元素的 唯一子元素的每个<p>元素
- p:nth-child（2） 选择属于其父元素的第二个子元素的每个<p>元素
- :enabled :disabled 控制表单控件的禁用状态。
- :checked 单选框或复选框被选中。
6.列出display的值，说明他们的作用。position的值，relative和absolute分别是相对于谁进行定位的？
1.display的值：
- block 像块类型元素一样显示。
- inline 缺省值。像行内元素类型一样显示。
- inline-block 像行内元素一样显示，但其内容像块类型元素一样显示。
- list-item 像块类型一样显示，并添加样式列表标记
2.position的值：
- absolute 生成绝对定位的元素，相对于static定位以外的第一个祖先元素进行定位
- fixed（老IE不支持）生成绝对定位的元素，相对于浏览器窗口进行定位。
- relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。
- static 默认值。没有定位，元素出现在正常的流中（忽略top，bottom，left，right、z-index声明）
- inherit 规定从父元素继承position属性的值。
7.CSS3有哪些新特性？
CSS3实现圆角（border-radius），阴影（box-shadow），对文字加特效（text-shadow），线性渐变（gradient），旋转（transform）
transform：rotate（9deg） scale（0.85， 0.90） translate（0px，-30px）skew（-9deg，0deg）//旋转，缩放，定位，倾斜
增加了更多的CSS选择器 多背景 rgba
在CSS3中唯一引入的伪元素是::selection
媒体查询，多栏布局
border-image
8.为什么要初始化CSS样式？
因为浏览器的兼容问题，不同的浏览器对有些标签的默认值是不同的，如果没有对CSS初始化往往会出现浏览器之间的页面差异。
当然初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。
最简单的初始化方法就是：
* { padding:0; margin: 0; }
//不建议
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th,td { margin: 0; padding: 0; } body, button, input, select, textarea { font: 12px/1.5 tahoma,arial, \5b8b\4f53; } h1, h2, h3, h4, h5, h6 { font-size: 100%; } address, cite, dfn, em, var { font-style: normal; } code, kbd, pre, samp { font-family: couriernew, courier, monospace; } small { font-size: 12px; } ul, ol { list-style: none; } a { text-decoration: none; } a:hover { text-decoration: underline; } sup { vertical-align: text-top; } sub { vertical-align: text-bottom; } legend { color: #000; } fieldset, img { border: 0; } button, input, select, textarea { font-size: 100%; } table { border-collapse: collapse; border-spacing: 0; }
9.对BFC规范的理解？
BFC，块级格式化上下文，一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。在同一个BFC中的两个毗邻的块级盒在垂直方向的margin会发生重叠。
（W3C CSS2.1 规范中的一个概念，他决定了元素如何对其内容进行布局，以及与其他元素的关系和相互作用。）
10.解释下CSS sprites，以及你要如何在页面或网站中使用它？
CSS sprites 其实就是把网页中的背景图片整合到一张图片文件中，再利用CSS的"background-image", "background-repeat", "background-position"的组合进行背景定位
，background-position可以用数字能精确的定位出背景图片的位置。这样可以减少很多图片的请求的开销，因为请求耗时时间长；请求虽然可以并发，但是也有限制，一般浏览器都是6个。对于未来而言，就不需要这么做了，因为有了http2。
11.解释下浮动和它的工作原理？清除浮动的技巧
浮动元素脱离文档流，不占据空间。浮动元素碰到包含他的边框或者浮动元素的边框停留。
清除浮动的技巧：
1.使用空标签清除浮动。这种方法在所有浮动标签后面添加一个空标签 定义CSS clear:both。弊端就是添加了无意义标签。
2.使用overflow。给包含浮动元素的富父标签添加CSS属性 overflow：autoz; zoom:1; zoom:1用于兼容IE6。
3.使用after伪对象清除浮动。该方法只适用于非ie浏览器。具体写法可参照以下示例。使用中需要注意以下一点：该方法中必须为需要清除浮动的伪对象中设置height:0，否则该元素会比实际高出若干像素。
12.浮动元素引起的问题和解决方法？
问题：
1.父元素的高度无法被撑开，影响与父元素同级的元素
2.与浮动元素同级的非浮动元素会跟随其后
3.若非第一个元素浮动，则该元素之前的元素也需要浮动，负责会影响页面显示的结构
解决方法：
使用CSS中的clear：both;属性来清除元素的浮动可解决2,3问题，对于问题1，添加如下样式，给父元素添加clearfix样式：
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { display: inline-block; /*for IE/Mac*/ }
