相关知识点
布局、 浮动、 盒子模型、 弹性和模型、 选择器优先级、 居中定位、 兼容性、 hack写法......
题目&答案如何理解css的盒子模型？
每个html元素都是长方形盒子。 （1）盒子模型有两种：ie盒子模型、标准w3c盒子模型；ie的content部分包含了border和pading。 （2）标准w3c盒模型包含：内容(content)、填充(padding)、边界(margin)、边框(border)。
link和@import的区别？
（1）link属于xhtml标签，而@import是css提供的。
（2）页面被加载时，link会同时被加载，而@import引用的css会等到页面被加载完再加载。
（3）import只在ie 5以上才能识别，而link是xhtml标签，无兼容问题。
（4）link方式的样式权重高于@import的权重。
（5）使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
css 选择符有哪些？哪些属性可以继承？优先级算法如何计算？css 3新增伪类有哪些？
id选择器（# myid）
类选择器（.myclassname）
标签选择器（p、h1、p）
相邻选择器（h1 + p）
子选择器（ul < li）
后代选择器（li a）
通配符选择器（ * ）
属性选择器（a[rel = "external"]）
伪类选择器（a: hover, li: nth - child）
可继承： font-size font-family color, ul li dl dd dt;
不可继承 ：border padding margin width height ;
优先级就近原则，样式定义最近者为准，载入样式以最后载入的定位为准。
优先级为：
!important > id > class > tag
important 比 内联优先级高
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 单选框或复选框被选中。
如何居中p，如何居中一个浮动元素？
给p设置一个宽度，然后添加margin:0 auto属性
p{
width:200px;
margin:0 auto;
}
如何居中一个浮动元素
确定容器的宽高，如宽500、高 300的层，设置层的外边距
.p {
width:500px ; height:300px;//高度可以不设
margin: -150px 0 0 -250px;
position:relative;相对定位
background-color:pink;//方便看效果
left:50%;
top:50%;
}
经常遇到的浏览器的兼容性有哪些？原因、解决方法是什么？
（1）png24为的图片在ie6浏览器上出现背景，解决方案是做成png8。
（2）浏览器默认的margin和padding不同，解决方案是加一个全局的*{margin:0;padding:0;}来统一。
（3）ie6双边距bug:块属性标签float后，又有横行的margin情况下，在ie 6显示margin比设置的大。
（4）浮动ie产生的双边距问题：块级元素就加display：inline；行内元素转块级元素display：inline后面再加display：table。
.bb{
background-color:#f1ee18; /*所有识别*/
.background-color:#00deff\9; /*ie6、7、8识别*/
+background-color:#a200ff; /*ie6、7识别*/
_background-color:#1e0bd1; /*ie6识别*/
}
常用hack的技巧：
（1）ie下，可以使用获取常规属性的方法来获取自定义属性，也可以使用getattribute()获取自定义属性；
（2）firefox下，只能使用getattribute()获取自定义属性。解决方法：统一通过getattribute()获取自定义属性。
（3）ie下，even对象有x,y属性，但是没有pagex,pagey属性；
（4）firefox下，event对象有pagex,pagey属性，但是没有x,y属性。解决方法是条件注释，缺点是在ie浏览器下可能会增加额外的http请求数。
（5）chrome 中文界面下默认会将小于12px的文本强制按照12px显示，可通过加入 css属性-webkit-text-size-adjust: none;来解决。
（6）超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不再具有hover和active了，解决方法是改变css属性的排列顺序：
l-v-h-a : a:link {} a:visited {} a:hover {} a:active {}
列出display的值，说明它们的作用。position的值里，relative和absolute定位原点是？
display的值：
block 像块类型元素一样显示。
none 缺省值。像行内元素类型一样显示。
inline-block 像行内元素一样显示，但其内容像块类型元素一样显示。
list-item 像块类型元素一样显示，并添加样式列表标记。
relative和absolute定位原点：
absolute：生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。
relative：生成相对定位的元素，相对于其正常位置进行定位。
为什么要初始化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.5tahoma, 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; }
css是怎样定义权重规则的？
以下是权重的规则：标签的权重为1，class的权重为10，id的权重为100，以下例子是演示各种定义的权重值：
/*权重为1*/
p{
}
/*权重为10*/
.class1{
}
/*权重为100*/
#id1{
}
/*权重为100+1=101*/
#id1 p{
}
/*权重为10+1=11*/
.class1 p{
}
/*权重为10+10+1=21*/
.class1 .class2 p{
}
如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现。
如何理解表现与内容相分离？
表现与结构相分离简单的说就是html中只有标签元素 表现完全是由css文件控制的。
如何定义高度为1px的容器？
p{
heigh：1px;
width:10px;
background:#000;
overflow:hidden
}
ie 6下这个问题是默认行高造成的，overflow:hidden | zoom:0.08 | line- height:1px这样也可以解决。
如何解决ie 6的3px问题？
_zoom:1; margin-left: value; _margin-left: value-3px;
firefox下文本无法撑开容器的高度，如何解决？
清除浮动 .clear{ clear:both; height:0px; overflow:hidden;}
怎么样才能让层显示在flash之上呢?
解决的办法是给flash设置透明属性
<param name="wmode" value="transparent" />或者<param name="wmode" value="opaque" />
cursor:hand在ff下不显示小手，如何解决？
cursor; pointer;
在ie中内容会自适应高度，而ff不会自适应高度，怎么办？
在要自适应高度的层中加一个层，样式为
.clear{clear:both;font-size:0px;height:1px}，
这样解决有一个小小的问题，高度会多一个像素。还有一种解决方法，给当前层加上一个伪类。
#test:after {
content: .;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
用纯 css 创建一个三角形的原理是什么？
把上、左、右三条边隐藏掉（颜色设为 transparent）
#demo {
width:0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent transparent red transparent;
}
如何设计一个满屏“品”字布局？
简单的方式：
上面的p宽100%，
下面的两个p分别宽50%，
用float或inline使其不换行。
怎么让chrome支持小于12px 的文字？
body{-webkit-text-size-adjust:none}
前端页面有哪三层构成，分别是什么？作用是什么？
最准确的网页设计思路是把网页分成三个层次，即：结构层、表示层、行为层。
网页的结构层（structural layer）由html或xhtml之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，p 标签表达了这样一种语义：“这是一个文本段。”
网页的表示层（presentation layer）由css负责创建。 css对“如何显示有关内容”的问题做出了回答。
网页的行为层（behavior layer）负责回答“内容应该如何对事件做出反应”这一问题。这是javascript语言和dom主宰的领域。
::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用。
单冒号(:)用于css3伪类，双冒号(::)用于css3伪元素。
伪元素由双冒号和伪元素名称组成。双冒号是在css3规范中引入的，用于区分伪类和伪元素。但是伪类兼容现存样式，浏览器需要同时支持旧的伪类，比如:first-line、:first-letter、:before、:after等。
对于css2之前已有的伪元素，比如:before，单冒号和双冒号的写法::before作用是一样的。
提醒，如果你的网站只需要兼容webkit、firefox、opera等浏览器，建议对于伪元素采用双冒号的写法，如果不得不兼容ie浏览器，还是用css2的单冒号写法比较安全。
现在html5中css3可以写出一个旋转的立方体，请写出要用到的css属性。
-webkit-transform-style: preserve-3d;
-webkit-transform: rotatey(30deg) rotatex(10deg);
-webkit-animation: rot 4s linear infinite;
介绍一下 sass 和 less 是什么？它们有何区别？
sass (syntactically awesome stylesheets)是一种动态样式语言，语法跟css一样(但多了些功能)，比css好写，而且更容易阅读。sass语法类似与haml，属于缩排语法（makeup），用意就是为了快速写html和css。
less一种动态样式语言. 将css赋予了动态语言的特性，如变量，继承，运算， 函数. less 既可以在客户端上运行 (支持ie 6+, webkit, firefox)，也可一在服务端运行 (借助 node.js)。
区别：
(1))sass是基于ruby的，是在服务端处理的，而less是需要引入less.js来处理less代码输出css到浏览器，也可以在开发环节使用less，然后编译成css文件，直接放到项目中，也有less.app、simpleless、codekit.app这样的工具，也有在线编译地址。
(2)变量符不一样，less是@，而scss是$，而且变量的作用域也不一样，后面会讲到。
(3)输出设置，less没有输出设置，sass提供4中输出选项：nested, compact, compressed 和 expanded。
(4)sass支持条件语句，可以使用if{}else{},for{}循环等等。而less不支持。
常见ie6的浏览器兼容bug（3-5个）？文字本身的大小不兼容。
同样是font-size:14px的宋体文字，在不同浏览器下占的空间是不一样的，ie下实际占高16px，下留白3px，ff 下实际占高17px，上留白1px，下留白3px，opera下就更不一样了。解决方案：给文字设定 line-height 。确保所有文字都有默认的 line-height 值。
ie6吞吃现象。
上下两个p，上面的p设置背景，却发现下面没有设置背景的p 也有了背景，这就是吞吃现象。对应上面的背景吞吃现象，还有滚动下边框缺失的现象。解决方案：使用zoom:1。这个zoom好象是专门为解决ie6 bug而生的。
ie6注释bug
注释也能产生bug~~~“多出来的一只猪。”这是前人总结这个bug使用的文案，ie6的这个bug 下，大家会在页面看到猪字出现两遍，重复的内容量因注释的多少而变。
解决方案：用“<!–[if !ie]> picrotate start <![endif]–>”方法写注释。
img 下的留白，如下代码：
<p>
<img src=“1.jpg” />
</p>
把p的border打开，你发现图片底部不是紧贴着容器底部的，是img后面的空白字符造成，要消除必须这样写
<p>
<img src=”1.jpg” /></p>
后面两个标签要紧挨着。ie7下这个bug 依然存在。解决方案：给img设定 display:block。
失去line-height
<p style=”line-height:20px”><img />文字</p>，很遗憾，在ie6下单行文字 line-height 效果消失了。原因是<img />这个inline-block元素和inline元素写在一起了。
解决方案：让img 和文字都 float起来。
clear层应该单独使用。也许你为了节省代码把clear属性直接放到下面的一个内容层，这样有问题，不仅仅是ff和op下失去margin效果，ie下某些margin值也会失效。
<p style=”background:red;float:left;”>dd</p>
<p style=”clear:both;margin-top:18px;background:green”>ff</p>
ie 下overflow:hidden对其下的绝对层position:absolute或者相对层 position:relative无效。
解决方案：给overflow:hidden加position:relative或者position: absolute。
另，ie6支持overflow-x或者overflow-y的特性，ie7、ff不支持。
更多前端开发面试题总结之—css3 。