标签：
网页布局
1.申明文档模式
2.设置css标签重置，避免各浏览器解析不同。
3.网页css模块划分，base.css，common.css，page.css
4.低权重原则---避免滥用子选择器
css权重规则：HTML标签的权重是1，class的权重是10，id的权重是100
如果css选择符权重相同，那么样式会遵循就近原则，哪个选择符最后定义，就采用哪个选择符样式。
为了保证样式容易被覆盖，提高可维护性，css选择符需要保证权重尽可能低。
5.css sprite
图片的加载是会发出HTTP请求的，一张图片需要一条HTTP请求，如果一个页面需要加载多张图片，那么它会相应地发出多条HTTP请求。HTTP请求数越多，访问服务器的次数就越多，服务器压力也就越大。将多张图片合并成一张大图，会大大减少网页的HTTP请求数，减少服务器压力。
是否使用css sprite主要取决于网站流量。
6.css的编码风格
css hack
<!--[if IE]><![endif]-->
<!--[if IE 6]><![endif]-->
关键词：lte/lt/gte/gt/！
lte：小于等于，lt：小于，gte：大于等于，gt：大于，！：不等于
7.解决超链接访问后hover样式不出现的问题
简单原则：love hate原则，即：l（link）ov（visisted）e h（hover）a（active）te
8.hasLayout
通用触发hasLayout方法：设置zoom:1
特殊情况下如果无效，可通过设置position:relative来触发hasLayout
9.块级元素和行内元素的区别
常见块级元素：div/p/form/ul/ol/li等
常见行内元素：span/strong/em等
块级元素独占一行，默认情况下，其宽度自动填满其父元素宽度，行内元素不会独占一行，
相邻的行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素内容而变化。
行内元素设置width/height属性无效。
10.居中
父元素高度确定的多行文本/图片/块级元素的竖直居中两种方法
一.firefox和IE8设置display:table-cell激活vertical-align属性，但IE6/7不支持该属性，为了实现跨浏览器兼容，直接用表格嵌套父元素。
二.对支持display:table-cell的IE8和Firefox用display:table-cell和vertical-align:middle来实现居中，对不支持该属性的IE6/7使用特定格式的hack。
例子说明：
.wrap{display:table-cell;vertical-align:middle;*position:relative;}
.verticalWrap{*postion:absolute;*top:50%;}
.vertical{*position:relative;*top:-50%;}
<div class="wrap">
<div class="verticalWrap">
<div class="vertical">hello word<br/></div>
</div>
</div>
标签：
原文地址：http://www.cnblogs.com/chenjz/p/4715031.html
