学习【Web前端开发修炼之道】总结

网页布局

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>