二、高质量的CSS

最新推荐文章于 2024-10-13 19:30:05 发布

chasemars

最新推荐文章于 2024-10-13 19:30:05 发布

阅读量527

点赞数

分类专栏：前端/HTML/Css 文章标签： ie class 浏览器 css html div

本文链接：https://blog.csdn.net/chasemars/article/details/7000778

版权

前端/HTML/Css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

学习《编写高质量代码--Web前端开发修炼之道》

1.组织CSS
a.按功能(颜色color.css/布局layout.css)
b.按区块(头部head.css/底部foot.css/侧边栏sidebar.css/主体main。css)

c.按重用性(基本base.css/公共common.css/详细页page.css)

2.base.css说明
a.".fl"和".fr"类：设置display:inline 为了解决IE6的双外边距bug。在IE6下，如果对元素设置了浮动，同时设置了margin-left或者margin-right，margin值会加倍，如设置margin-left:10px在IE6下会显示为margin-left:20px。解决办法就是设置display:inline。
b.".bc"类：全称是“。blockCenter”，作用为使块级元素居中。直接试用她是不能使块级元素居中的，还需设定宽度。
c.".clearfix"类。这个类用于在父容器直接清除子元素浮动。通常为了让浮动元素的父容器能够根据浮动元素的高度而自适应高度，有三种做法：
1).让父容器同时浮动起来，如：<div class="fl"><div class="fl"></div></div>，缺点影响后面布局。
2).让浮动元素后面紧跟一个用于清除浮动的空标签，如：<div><div class="fl"></div><div class="cb"></div></div>，增加空标签破坏语义化。
3).给父容器一个特殊的class，直接从父容器清除浮动元素的浮动，如：<div class="clearfix"><div class="fl"></div></div>，推荐使用。

d.".zoom"类：不是CSS标准中的标准属性，IE专有属性。涉及hasLayout。(暂时不清楚什么意思)

3.模块化CSS
a.模块与模块之间尽量不要包含相同的部分，如果有相同部分，应将他妈提取出来，拆分成一个独立的模块。

b.模块应该在保证数量尽可能少的原则下，做到尽可能简单，以提高重用性。

4.CSS命名
a.使用英文不要试用汉字、拼音
b.骆驼命名法(第二个单词开始首字母大写)，划线命名法(单词用"-"或"_"隔开)

c.尽量不要试用子选择符(如：.nav li{xxx})使用新类代替(如：.navli{xxx})，减少冲突。由于这样看起来没有从属关系所以将骆驼命名法和划线法结合起来命名，骆驼命名法用于区别不通单词，划线用于表面从属关系。(如：.navli{xxx}可表示为.nav_li{xxx})

5.多用组合少用继承

6.低权重原则—避免滥用子选择器
a.当不同选择符的样式设置有冲突时，会采用权重高的选择符设置的样式。权重规则：HTML标签的权重是1，class的权重是10，id的权重是100。如：p的权重是1，“div p”的权重是1+1=2，“strong .demo”的权重是10+1=11，“#test .red”的权重是100+10=10。

b.如果CSS选择符权重相同，那么样式会遵循哪个选择符后定义，就采用哪个选择符的样式。(而不是组合调用是的顺序)

7.CSS sprite(背景图合并到一张大图上)

8.编码风格：一行式(减少CSS文件大小)

9.CSS hack
a.IE条件注释法:如果想针对某个范围以内版本的IE进行hack，可以结合lte、lt、gte、gt、！关键字来进行注释，其中lte(小于等于)，lt(表示)，gte(大于等于)，gt（大于），！(不等于)
1).CSS文件test.css只加载到IE浏览器:
2).只加载到IE6浏览器:<!--[if IE 6]>
3).只在IE6以上版本生效:<!--[if gt IE 6]>
4).只在IE6上不生效：<!--[if ! IE 6]>
b.选择符前缀法：在CSS选择符前加一些只有特定浏览器才能识别的前缀，从而让某些样式只对特定浏览起生效。如：“*html”前缀只对IE6生效，“*+html”前缀只对IE7生效。
<style>
.test{width:80px;} /*IE6、IE7、IE8*/
*html .test{width:60px;} /*only for IE6*/
*+html .test{width:70px;} /*only for IE7*/
</style>
注：选择符前缀法不能用语内联样式上，即<div class="test" style="width:60px;"></div>就无法使用选择符前缀法来hack，因为他根本就没有用到选择符。
c.样式属性前缀法：在样式的属性名前加前缀，这些前缀只在特定的浏览器下才生效。如：“_”只在IE6下生效，“*”在IE6和IE7下生效。

10.访问后hover样式不出现问题：设置a:visited和a:hover样式，一旦访问超链接后，hover的样式就不在出现，这是因为将a:visited和a:hover的顺序放错了。正确顺序：link-visited-hover-active

11.hasLayout:CSS在IE下有时候会出现奇怪问题。如设置border的时候，有时候border会断开，刷新页面或拖动滚动条断开的部分又会链接起来。这些奇怪的问题就涉及到hasLayout(IE特有属性)，很多时候触发HasLayout就可以解决了。

12.块级元素和行内元素：块级元素会独占一行，行内元素不会独占一行。常见块级元素：div、p、form、ul、ol、li等，常见行内元素：span、strong、em等。

注：行内元素设置width/height属性无效，设置竖直方向的margin没有效果，竖直方向的padding效果也不大。块级元素和行内元素可以通过display属性来切换，block(块级)/inline(行内)。

13.display:inline-block和hasLayout
a.display:inline-block它是行内的块级元素，它拥有块级元素的特点，可以设置长宽、margin、padding值，但它却不独占一行，而是和行内元素一样，可以和其他行内元素排在同一行里。(IE6/IE7不支持display:inline-block)
b.IE6/IE7下模拟inline-block(主要是通过触发hasLayout)
例子：<style>span{color:red;widht:100px;background:#ccc;height:30px;display:inline-block;vertical-align:-10px;}</style>
<body>123<span>abcdefg</span></body>
注：显示正常了，这里display:inline-block并不是真的在IE6/IE7下生效了，它只是令span触发了hasLayout属性，其效果和设置zoom:1一样。为了兼容IE8和firefox等其他浏览器，所以还是试用display:inline-block。这里的vertical-align是设置文字对齐的。

c.缺点:1).它只能对行内元素实现display:inline-block;如果是块级元素就不行。2).这个方法中还用到了针对IE的hack，* vertical-align 这也是不好的，能不用hack就尽量不要用hack。

14.relative、absolute和float
a.position:relative和position:abslute都可以让元素激活left、top、right、bottom和z-index属性(默认情况下，这些属性未激活[z-index:0]，设置了也无效)。
b.position:relative会保留自己在z-index:0层的站位，left、top、right、bottom值是相对于自己在z-index:0层的位置而移动的。
c.postion:absolute会完全脱离文档流，不再在z-index:0层保留占位符，其left、top、right、bottom值是相对于自己最近的一个设置了position:relative或position:absolute的祖先元素的，如果祖先元素全都没有设置position:relative或position:absolute,那就相对于body元素。
d.float也可以改变正常的文档流排列，但它只能在z-index:0层，不会“上浮”到另一个z-index层。(left、top、right、bottom属性对其无效)

注：position:absolute和float和用会隐式的改变display类型(display:none除外)，让元素以display:inline-block的方式显示(float在IE6下的双倍边距bug就是利用添加display：inline来解决的)，值得注意的是position:relative不会隐式改变display的类型。