标签：
Doctype是document type（文档类型）的简写，是用来说明所用的XHTML或HTML是什么版本的。XHTML1.0 提供了三种DTD声明可供选择，分别是：
1、过渡的(Transitional，也叫混杂模式)：要求比较宽松，允许继续使用HTML4.01的标识，完整声明为
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tranisitional.dtd">
2、严格的(Strict)：要求严格的DTD，不能使用任何表现层的标识和属性，完整声明为
<!DOCTYPE html PUBLIC "-W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3、框架的(Frameset)：专门针对框架页面设计使用的DTD，如果页面中包含有框架，可以采用DTD，完整声明为
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
定义成相应的声明就可以触发相应的模式。
区分的意义是为了最终能达到数据与表现相分离的目地。
行内元素会再一条直线上，是在同一行的。如 我是行内元素span 我是行内元素a
块级元素会各占一行。如
我是块级元素p
行内元素主要有：<span>、<a>、<b>、<img>、<br>、<button>、<strong>、<textarea>、<select>
块级元素主要有：<div>、<ul>、<li>、<p>、<fieldset>、<form>、<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<hr>、<iframe>、<ol>、<pre>、<table>、<tr>、<td>
行内元素可以通过display:block转为块级元素。另外块级元素的margin和padding都正常，行内元素左右maring和左右padding正常，上下不识别，也就是说不能通过margin-top和padding-top来改变行高。
CSS盒模型：网页设计中的每个元素都是长方形的盒子，如下图所示
Margin 比较特别，它不会影响盒子本身的大小，但是它会影响和盒子有关的其他内容。盒子本身的大小是这样计算的：
width(即MSIE中的offsetWidth)：width + padding-left + padding-right + border-left + border-right
height(即MSIE中的offsetHeight)：height + padding-top + padding-bottom + border-top + border-bottom
CSS与HTML文档结合的4中方法：
1、使用<link>元素链接到外部的样式文件
2、在<head>元素中使用"style"元素来指定
3、使用CSS "@import"标记来导入样式表单
4、在<body>内部的元素中使用"style"属性来定义样式
Demo:
<html>
<head>
<title>css demo</title>
<link rel=stylesheet type="text/css" href="css/name.css" title="cool">
<style type="text/css">
@import url(css/name2.css);
h1 {color:red}
</style>
</head>
<body>
<h1>CSS demo</h1>
<p style="color:blue">Test</p>
</body>
</html>
本质上，这两种方式都是为了加载CSS文件，但还是存在着细微的差别。
1、老祖宗的差别。link属于XHTML标签，而@import完全是CSS提供的一种方式。link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。
2、加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。
3、兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
4、使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
CSS选择符主要有以下10类：
1、通配选择符：*{margin:0px;}
2、类型选择符：a{text-decoration:none;}
3、属性选择符：input[type="button"]{padding:5px;}
4、包含选择符：div.code a{text-decoration:none;}
5、子对象选择符：ul.test>li{font-size:14px;}
6、ID选择符：#test {color:red;}
7、类选择符：.test{color:red;}
8、选择符分组：body,ul,li{margin:0px;}
9、伪类及伪对象选择符：div:first-letter{font-size:16px;}、a.test:hover{text-decoration:underline;}
10、相邻选择符：li+li{font-weight:bold;}
CSS可以继承的属性有：
1、文字相关：font-family、font-size、font-style、font-variant、font-weight、font、letter-spacing、line-height、text-align、text-indent、text-transform、word-spacing
2、列表相关：list-style-image、list-style-position、list-style-type、list-style
3、颜色相关:color
4、透明度：opacity(opacity的继承有问题，子元素会继承祖元素的opacity，但是无法更改。)
另外，font-size继承的是父元素的大小，而不是比例。line-height当父元素是百分比或px值的时候，子元素跟父元素相同，当父元素是normal或数字的时候，子元素的line-height是子元素的字体大小乘以数字。
关于继承性参考了博客：css 继承的一点总结
重要性和来源的优先级排序从低到高是：
1、浏览器默认样式
2、用户在浏览器中定义的普通样式（normal规则，不带important规则）
3、开发人员定义的普通样式（ normal规则，不带important规则）
4、开发人员定义特殊样式（带important规则）
5、用户在浏览器中定义特殊样式（带important规则）
另外还有一些原则：
1、相同的样式在CSS规则后添加了!important的优先于没有添加的。
2、CSS规则在文档中出现的顺序后面定义的的优先于前面定义的。
3、内联样式优先于用link引入的样式和页面上<style>里的样式。
常见的用以上规则就可以确定了，如果以上规则还不能区分，请参考这里：http://www.w3.org/TR/CSS21/cascade.html#specificity
important高，DEMO：
<style type="text/css">
.test{
padding:10px;
border-radius:5px;
border:1px solid red!important;
}
</style>
...
<div class="test" style="border:1px solid blue;">Test</div>
1、结构层：由 HTML 或 XHTML 之类的标记语言负责创建，仅负责语义的表达。解决了页面“内容是什么”的问题。
2、表示层：由CSS负责创建，解决了页面“如何显示内容”的问题。
3、行为层：由脚本负责。解决了页面上“内容应该如何对事件作出反应”的问题。
选择符{属性1:值1;属性2:值2;...}等。
IE：Trident内核
Mozilla FireFox：Gecko内核
Chrome、Safari：Webkit内核
Opera：Presto内核
1、浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。
2、IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。解决方案是在float的标签样式控制中加入 display:inline;将其转化为行内属性。测试代码如下：
<html>
<head>
<title>Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
.one{
float: left;
width: 150px;
height:150px;
background:#EEE;
margin: 5px 0 5px 150px;
}
</style>
</head>
<body>
<div class="one">Double Margin Bug(150*150)</div>
</body>
</html>
正常的应该是：
但在IE6中是这样的：
加上display:inline;后才正常。
3、在ie6，ie7中元素高度超出自己设置高度。原因是IE8以前的浏览器中会给元素设置默认的行高的高度导致的。解决方案是加上overflow:hidden或设置line-height为更小的高度。测试代码：
.one{
height:5px;
width:100px;
background:#F60;
}
HTML没变，还是<div class="one"></div>，在IE6下显示为：
这个一看就知道不止5px，CSS改为下面两种之一就可以了：
.one{
height:5px;
width:100px;
overflow:hidden;
background:#F60;
}
/*--或--*/
.one{
height:5px;
width:100px;
font-size:2px;
line-height:2px;
background:#F60;
}
注意这里加了line-height:2px后还要加上font-size才行。效果如图：
4、min-height在IE6下不起作用。解决方案是添加 height:auto !important;height:xxpx;其中xx就是min-height设置的值。
5、透明性IE用filter:Alpha(Opacity=60)，而其他主流浏览器用 opacity:0.6;
6、a(有href属性)标签嵌套下的img标签，在IE下会带有边框。解决办法是加上a img{border:none;}样式。
7、input边框问题。去掉input边框一般用border:none;就可以，但由于IE6在解析input样式时的BUG(优先级问题)，在IE6下无效。
ie6的默认CSS样式，涉及到border的有border-style:inset;border-width:2px;浏览器根据自己的内核解析规则，先解析自身的默认CSS，再解析开发者书写的CSS，达到渲染标签的目的。IE6对INPUT的渲染存在bug，border:none;不被解析，当有border-width或border-color设置的时候才会令IE6去解析border-style:none;。
解决方案是用:border:0或border:0 none;或border:none:border-color:transparent;，推荐用第三种方案。
8、父子标签间用margin的问题，表现在有时除IE(6/7)外的浏览器子标签margin转移到了父标签上，IE6&7下没有转移。测试代码：
<body>
<style type="text/css">
.box1{
height:150px;
background:#CCC;
}
.box1_1{
height:50px;
margin-top:50px;
background:#AAA;
}
</style>
<div class="box1">
<div class="box1_1">box1_1</div>
</div>
</body>
chrome & FireFox & IE8 & IE9下的效果为：
IE6 & IE7 下的效果：
对于这两种显示效果，我倒认为IE6&IE7是正确的，不知道是否有朋友能给出解释。
解决办法就是父子标签间的间隔建议用padding，兄弟标签间用margin。
9、假设两块div，第一块浮动而第二块没有浮动，IE6下第二块就会跑到第一块边上，并且二者之间还留有间距，但标准浏览器中是第二块重合于第一块。测试代码：
<body>
<style type="text/css">
div{
width:100px;
height:100px;
border:1px solid #CCC;
}
.one{
float:left;
height:50px;
}
</style>
<div class="one">One</div>
<div class="two">Two</div>
</body>
正常应该是：
IE6中是：
解决办法是改变设计思路，如果真有两个div重合的需求，可以用下面的代码实现：
<body>
<style type="text/css">
div{
width:100px;
height:100px;
border:1px solid #CCC;
}
.parent{
position:relative;
}
.one{
position:absolute;
left:0;
top:0;
}
</style>
<div class="parent">
<div class="one">One</div>
<div class="one">Two</div>
</div>
</body>
10、父子关系的标签，子标签浮动导致父标签不再包裹子标签。测试代码：
<body>
<style type="text/css">
.parent{
background:#888;
border:5px solid #888;
}
.one{
float:left;
width:100px;
height:100px;
background:#F60;
}
</style>
<div class="parent">
<div class="one">One</div>
</div>
</body>
在IE、Chrome、Firefox下都是下面的效果：
可以看到父元素并没有包裹子元素，这是因为float造成的，解决方案是清除浮动就行了，用下面的代码可以解决：
<body>
<style type="text/css">
.parent{
background:#888;
border:5px solid #888;
zoom:1;/*--for IE--*/
}
.parent:after{ /*--for other broswer--*/
content:".";
display:block;
line-height:0;
clear:both;
visibility:hidden;
}
.one{
float:left;
width:100px;
height:100px;
background:#F60;
}
</style>
<div class="parent">
<div class="one">One</div>
</div>
</body>
现在效果是：
最后关于float力荐两篇文章：CSS float浮动的深入研究、详解及拓展(一)、CSS float浮动的深入研究、详解及拓展(二)
父元素和子元素同时左浮动，然后父元素相对左移动50%，再然后子元素相对右移动50%，或者子元素相对左移动-50%也就可以了。
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta charset="utf-8"/>
<style type="text/css">
.p{
position:relative;
left:50%;
float:left;
}
.c{
position:relative;
float:left;
right:50%;
}
</style>
</head>
<body>
<div class="p">
<h1 class="c">Test Float Element Center</h1>
</div>
</body>
</html>
1、对各个项目中CSS，JS里的稳定的通用代码进行提取，形成公共文件，然后利用CDN等资源进行缓存，减轻服务器压力。
2、去掉JS、CSS里的冗余代码，对代码进行精减。
3、对JS、CSS进行压缩合并，减少请求次数。
4、对页面上的小图标，背景等图片进行合并，减少请求次数。
5、JS、CSS、图片均用版本控制工具进行管理，方便修改与恢复。
我能想到的就这么多，请大家继续补充。
以上总结只是依据本人目前的水平给出的自己的看法，不确保严格正确，如果有误欢迎大家指出。
以上题目主要是选自淘宝HTML&CSS面试题，今天就总结这几个，现在出去吃饭，以后会继续。如果大家有什么好的前端面试题，欢迎提供。
标签：
原文地址：http://www.cnblogs.com/viewcozy/p/4579059.html
