《Web前端开发修炼之道》笔记三：高质量CSS(二)

还需要深入了解的：

浏览器兼容

文档流，z-index

1.低权重原则——避免滥用子选择器

CSS的选择符是有权重的，当不同选择符的样式设置有冲突时，会选用权重高的选择符设置的样式。

权重规则：HTML标签的权重是1，class的权重是10，id的权重是100。

所以上图1234567890的颜色是red。

如果CSS选择符权重相同，那么样式会遵循就近原则，哪个选择符最后定义，就采用哪个选择符的样式。所以上图颜色为green。

使用子选择器，会增加css选择符的权重，css选择符权重越高，样式越不易被覆盖，越容易对其他样式产生影响。所以，除非确定html结构非常稳定，一定不会再修改了，否则尽量不要使用子选择器。为了保证样式容易被覆盖，提高可维护性，css选择符权重应该尽可能低。

少用子选择器，就需要多添加class。与子选择器相比，新增class反而更容易维护。

2.CSS Sprite

（关于css sprite的使用细节，这里就不多说了。）

将页面内的多个图片组成一张图片，减少对服务器的请求，以减少服务器的压力。

但是也存在一些问题：将多张图片合并为一张，需要通过background-position进行定位，需要精确测量坐标，也要考虑如何尽可能密集地排列图片。另一方面，大图中每个小图的坐标值都不能轻易改动，因为会影响周边的图片。

所以：

CSS Sprite的最大好处是减少Http请求数，减少服务器压力，但它要付出“降低开发效率”和“增大维护难度”的代价。所以是否使用CSS Sprite主要取决于网站流量。

3.CSS的编码风格

多行式和一行式。

多行式可读性强，但行数过多影响开发速度。过多空格也会增加css文件的大小。

后来调试工具的流行使得调试不再需要仔细阅读css文件，所以一行式风格称为新的主流。

4.CSS Hack

1.IE条件注释法

这种方式向后兼容性最好，但是缺点也很明显：将同一CSS选择符下的样式分散到多个文件中，增加了开发和维护成本。

2.选择符前缀法

3.样式属性前缀法

原理是在样式的属性名前加前缀，这些前缀只在特定浏览器下才生效。

5.解决超链接访问后hover样式不出现的问题

首先，说下CSS链接的四种状态 ：
a:link 普通的、未被访问的链接样式 
a:visited 用户已访问的链接样式 
a:hover 鼠标指针位于链接上方样式 
a:active 链接被点击的时刻样式 

只要把hover放在visited后面就可以解决那个问题。（关于四种状态的排序问题，有个简单好记的原则，叫做l(link)ov(visited)e h(hover)a(active)te原则）

6.块级元素和行内元素的区别

常见块级元素： div,p,form,ul,ol,li

常见行内元素：span,strong,em

1.块级元素会独占一行，默认情况下宽度自动填满其父元素宽度。行内元素不会独占一行，直到一行放不下才会换行。

2.块级元素可以设置width,height属性，行内元素设置width,height属性无效。(块级元素即使设置了宽度，仍然是独占一行的。)

3.块级元素可以设置margin和padding属性。行内元素的margin和padding属性很奇怪，水平方向的这两个属性会产生效果，但是竖直方向的不会产生边距效果。（如下图）

4.块级元素和行内元素的CSS相关属性是display,其中块级元素对应于display:block,行内元素对应于display:inline。我们可以通过修改display属性来切换块级元素和行内元素。

（display:inline-block是一种特别有用的display类型，它是行内的块级元素，它拥有块级元素的特点，可以设置长宽，可以设置margin和padding值。但它不是独占一行的，可以和其他行内元素排在同一行。）

7.居中

1.水平居中

1）文本、图片等行内元素

设置text-align:center

2)确定宽度的块级元素的水平居中

通过设置margin-left:auto和margin-right:auto来实现。

3)不确定宽度的块级元素的水平居中

3种方法：

以分页模块为例，因为分页的数量是不确定的，所以我们不能通过设置宽度来限制它的弹性。

1.

2

3.

2.竖直居中

1.父元素高度不确定的文本、图片、块级元素的竖直居中

给父元素设置相同的上下边距： padding-top,padding-bottom

2.父元素高度确定的单行文本的竖直居中

给父元素设置line-height值，该值与父元素的高度值相同。

3.父元素高度确定的多行文本、图片、块级元素的竖直居中

两种方法：

1.

2.

8.z-index的相关问题

网页其实是三维结构的，除了x，y轴，还有z轴。z轴在元素设置position为absolute或relative后被激活，其大小由z－index设置，z－index越大，元素位置越靠上。z－index可以为负值。

设置负边距可以让相邻元素的位置产生重叠，谁浮在上面，取决于html标签出现的先后，后出现的标签浮于先出现的标签之上。

Flash默认以窗口形式展示，无论如何设置z－index都会浮于所有元素之上。解决办法是把wmode属性设置为opaque(非窗口不透明)或transparent（非窗口透明），默认值为window。

9.多版本IE并存方案——CSS调试利器IETester

IE6,7,8都有不小的市场份额，我们的网页需要在这3个不同版本的IE下兼容。通常情况下，只能安装一个版本的IE。但是IETester可以提供多个不同版本的IE。