css面试常见问题：
1、css有哪些基本选择器？
它们的权重是如何表示的/ css基本选择器有类选择器、属性选择器和ID选择器。 css选择器的权重预示着CSS选择器样式渲染的先后顺序，渲染时，权重高的选择器会覆盖权重低的选择器样式。通常权重分为4个等级；可用0.0.0.0来表示这四个等级。！important关键字优先级最高。 内联样式（非元素器）的优先级可以看成1.0.0.0 ID选择器的优先级为0.1.0.0 类属性选择器、属性选择器、伪类的优先级为0.0.1.0 元素选择器、伪元素选择器的优先级为0.0.0.1 通配符选择器对特殊性没有任何贡献值。 当把选择器组合使用的时候，相应的层级权重也会递增，例如#id.class的权重为0.1.1.0
2、CSS引入方式有哪些？link和@import的区别是什么？
行内式：写在元素的style属性内； 内嵌式：写在style元素内； 外链式：通过link标签，引入css文件内的样式。 通过link标签引入样式与@import方法引入样式有如下区别。
（1）加载资源的限制。 link是XHTML的标签，除了加载CSS文件外，还可以加载RSS等其他事务，如加载模板等； @import只能加载CSS文件。
（2）加载方式。 如果用link引用CSS，在页面加载时同时加载，即同步加载； 如果用@import引用CSS，则需要等到网页完全载入后，再加载CSS文件，即异步加载。
（3）兼容性 link是XHTML的标签，没有兼容问题。 @import是在CSS2.1中提出来的，不支持低版本的浏览器。
（4）改变样式 link的标签是DOM元素，支持使用Javascript控制DOM和修改样式； @import是一种方法，不支持控制DOM和修改样式；
3、浮动元素引起的问题和解决方法是什么？
问题：
（1）父元素的高度无法撑开，影响与父元素同级的元素；
（2）与元素同级的非浮动元素会紧随其后（类似遮盖现象）
（3）如果一个元素浮动，则该元素之前的元素也需要浮动，否则，会影响页面显示的结构（通常所说的串行现象）
解决方法如下：
（1）为父元素设置固定高度；
（2）为父元素设置overflow：hidden即可清除浮动；让父元素的高度被撑开；
（3）用clear：both样式属性清除元素浮动。
注：如果只要左浮动或者右浮动，可以单独设置clear：left和clear：right，但是设置clear:both则都可以解决。
（4）外墙法是指在父元素外面，添加一道墙,设置属性clear：both。
（5）内墙法是指在父元素内部，浮动元素的最后面，添加“一道墙”,设置属性clear：both。
（6）伪元素是指为了少创建元素，对父元素添加after伪元素，设置属性content："";display:block;clear:both。
（7）使用通用类clearfix，clearfix的实现如下：
.clearfix{
content:'';
display:block;
clear:both;
}
4、position的值分别是相对于哪个位置定位的？
relative表示相对定位；相对于自己本身所在正常文档流中位置进行定位。 absolute表示相对定位：相对于最近一级（从直接父级元素往上数，直到根元素）定位，相对于static的父元素进行定位。 fixed用于生成绝对定位，相对于浏览器窗口或者frame进行定位。 static是默认值，没有定位，元素出现在正常的文档流中； sticky是生成粘性定位的元素，容器的位置根据正常文档流计算得出。
5、请说明position：absolute和float属性的异同。
共同点：可以脱离文档流、可以设置其宽高。 不同点是float仍可占据位置，不会覆盖在另一个BFC区域上，浮动的框可以向左向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止，absolute会覆盖文档流中的其他元素。即遮盖现象。
6、css选择器（符）有哪些？
（1）id选择器（#myId） （2）类选择器（.myClassName) (3)标签选择器（div,p,h1). (4)相邻选择器（h1+p) （5）子选择器（ul>li) (6)后代选择器（li a） (7)通配符选择器（*） (8)属性选择器（button[disabled="true"])。 (9)伪类选择器(a:hover、li:nth-child)表示一种状态。 (10)伪元素选择器(li:before、":after"、":first-letter"、":first-line"、":selecton")表示文档某个部分的表现。
7、CSS的哪些样式可以继承？哪些不可以继承？
可继承的样式有font-size font-family color 、ul li dl dd dt 不可以继承的样式border、padding、margin、width、height、
8、CSS优先级如何排序？
！important>style(内联)>id(权重100)>class(权重10)>标签（权重1），同类别的样式中，后面的会覆盖前面的。
9、为什么要初始化CSS？
因为浏览器的兼容性问题，不同浏览器对有些标签的默认值是不同的，如果没有初始化CSS，往往会导致页面在不同浏览器之间出现差异。
最简单初始化方法：*{padding:0;margin:0}.
10、如何居中div？如何居中一个浮动元素？
确定容器的宽高，例如宽400px、高200px的div。设置层的外边距。
div{float:left;width:400px;height:200px;
margin:-100px 0 0 -200px;
/注意，由于左上外边距优先级高于右下外边距优先级，因此可以简化设置margin：-150px -250px;/
position:relative;
left:50%;top:50%;
background-color:pink;}
11、display有哪些值？说明它们的作用？
block：块类型。默认宽度为父元素宽度，可设置宽高，换行显示 none：元素不会显示，已脱离文档流； inine：行内元素类型，默认宽度为内容宽度，不可设置宽高，同行显示。 inline-block默认宽度为内容宽度，可设置宽高，同行显示。 list-item是指像块类型元素一样显示，并添加样式列表标记。 table是指此元素会作为块级表格显示； inherit是指从父元素继承display属性的值。
12、简要描述块级元素和行内元素的区别
块级元素的前后都会自动换行，默认块级元素会独占一行。例如
13、解释浮动及其工作原理
浮动的元素可以向左向右移动，直到它的外边缘碰到包含元素（父元素）或者另一个浮动元素的边框为止，要想使元素浮动，必须为其设置一个宽度，虽然浮动元素已不在文档流，但是它浮动后所处的位置依然在浮动之前的水平方向上。因为浮动元素不在文档流中，所以文档流中的块级元素表现得就像浮动元素不存在一样，下面的元素会填补原来的位置，有些元素会在浮动元素的下方，但是这些元素的内容并不一定会被浮动的元素遮盖，当定位内联元素时，要考虑浮动元素的边界，围绕浮动元素设置内联样式，也可以把浮动元素想象成被块元素忽略的元素，而内联元素会关注的元素。
14、解释一下CSS Sprite,以及如何在页面或网站中使用它。
CSS Sprite其实就是把网页中的一些背景图片整合到一张图片中，再利用CSS的"background-image" "background-repeat" "background-position"的组合进行背景定位，background-position可以用数字精确地定位出背景图片的位置。
15、在书写高效CSS时有哪些问题需要考虑？
（1）样式；向左向右解析一个选择器； （2）类型选择器的速度，ID选择器最快，Universal（通配符*）最慢，常用4种类型快慢速度为：ID、class、tag和universal。 （3）不要用标签限制ID选择器（如：ul#main-navigation{}，ID已经是唯一的，不需要Tag来限制，这样会让选择器变慢）。 （4）后代选择器最糟糕（换句话说，html body ul li a{}这个选择器是很低效的）。 （5）想清楚需求，再去书写选择器； （6）CSS3选择器（如nth-child）能够漂亮地定位我们想要的元素，又能保证CSS整洁易读。然而，这些选择器会浪费很多的浏览器资源。 （7）如果都用id选择器会降低代码的可读性和可维护性等。
16、说出几种解决IE6 BUG的方法。
（1）双边距问题，是使用float引起的。解决方法是display：inline； （3）3像素问题，是使用float引起的，解决方法是使用_magin-right:-3px; （3）超链接hover伪类样式，单击后失效。 （4）z-index问题。解决方法是给父级添加position：relative。 （5）PNG图片半透明问题。解决方法是使用Javascript代码库，或使用IE滤镜。
20、页面重构怎样操作/
编写CSS，让页面结构更合理化，提升用户体验，达到良好的页面效果并提升性能。
21、display:none和visibility:hidden的区别是什么？
display:none隐藏对应的元素，在文档流中不再给它分配空间，它各边的元素会合拢，即脱离文档流。 visibility:hidden隐藏对应的元素，但在文档流中保留原来的空间。
22、内联元素可以实现浮动吗？
在CSS中，任何元素都可以浮动，不论浮动元素是何种元素，都会生成一个块级框，因此，对于内联元素，如果设置为浮动，会产生和块级框相同的效果。
23、简要描述css中content属性的作用
content属性与：before及：after伪元素配合使用，用来插入生成的内容，可以在元素之前或之后放置生成的内容。可以插入文本、图像、引号，并可以结合计数器，为页面元素插入编号，比如，查看如下代码
body{
counter-reset:chapter;
}
h1:before{
content:"第"counter(counter)"章"
}
h1{
counter-increment:chapter;
}
<h1></h1>
<h1></h1>
<h1></h1>
使用content属性，并结合：before选择器和计时器counter，可以在每个h1元素前插入新的内容。
24、如何定义高度很小的容器？
因为有一个默认的行高，所以在IE6下无法定义小高度的容器。 两个解决方法是overflow:hidden 或font-size：容器高度px。
25、如何在图片下方设置几像素的空白间隙？
定义img为display：block 或定义父容器为font-size：0。
26、如何解决IE6双倍margin的bug？
使用display：inline。
27、如何让超出宽度的文字显示为省略号?
输入
overflow:hidden;width:xxx;white-space:nowrap;text-overflow:ellipsis
28、如何使英文单词发生词内断行？
输入word-wrap：break-word。
29、如何实现IE6的position:fixed?
具体代码如下：
html_{overflow:hidden;}
body_{overflow:auto;height:100%;}
.fixed{position:fixed;_position:absolute; left:0; top:0; padding:10px;
background:#000;}
30、如何让min-height兼容IE6？
具体代码如下：
min-height{
min-height:100px;
_height:100px;
background:red;}
31、已知高度的容器如何在页面水平垂直居中？
具体代码如下：
<style type="text/css">
#box{
width:200px;
height:200px;
background:red;
position:absolute;
left:50%;
top:50%;
margin:-100px 0 0 -100px; /*或者margin：-100px*/
}
<style>
<div id="box"></div>
32、px和em的区别是什么？
px的值是固定的，指定为多少就为多少，计算容易；em的值不是固定的，是相对容器字体的大小，并且em会继承父级元素的字体大小。浏览器的默认字体高都是16px；所以未经调整的浏览器都符合1em=16px，那么12px=0.75em，10px=0.625em。与em对应的另一个长度单位rem，是指相对于根元素（通常是HTML元素）字体的大小。
33、div+css布局较table布局的优点？
（1）改版的时候更方便；只需要改动css文件 （2）页面加载速度更快、结构清晰、页面简洁； （3）表现与结构分离； （4）搜索引擎优化（SEO）更友好，排名更靠前。 34、见图片
