06月07, 2013

Web前端开发修炼之道-CSS篇(转+改)

模块拆分原则: 1.模块与模块之间尽量不要包含相同的部分,如果有相同的部分,应将它们提取出来,拆分成一个独立的模块. 2.模块应在保证数量尽可能少的原则下,做到尽可能的简单,以提高重用性。

CSS调用: 1.将相同的部分抽取出来单独成为一个calss 2.多用组合,少用继承 3.多使用<div calss="a b c"></a>,少使用<div class="a_b_c"></div>

上下边距(Margin): 1.如果不确定模块的上下margin特别稳定,最好不要讲它写到模块的类里,而使用类的组合,单独为上下margin挂用于边距的原子类(例如mt10、mt20)。模块最好不要混用margin-top和margin-botton,统一使用margin-top或margin-botton. 2.连着的margin-top和margin-botton会合并取两者最大的值。margin-left和margin-right则不会有这样的问题。

低权重原则 1.CSS选择符是有权重的,当不同选择符的样式设置有冲突时,会采用高的选择符设置样式。 2.权重规则:HTML标签的权重是1,class的权重是10,id的权重是100,有important标识的权重最大。例如p的权重是1,“div em"权重就是1+1=2,"strong.demo"的权重是1+10=11,"#test .red"的权重是100+10=110. 3.如果CSS选择符权重相同,那么样式会遵循就近原则,那个选择符最后定义,就采用那个选择符的样式。 4."就近原则"指的是选择符定义的先后顺序,而不是挂class名的先后顺序。 5.为了保证样式容易被覆盖,提高可维护性,CSS选择符需要保证权证尽可能低。

CSS sprise 1.是否使用CSS sprise主要取决于网站的流量。最大的好处是减少HTTP请求数,减轻服务器的压力,但“降低开发效率”,“增大维护难度”。

ID和Class 1.一般情况下,多使用clsss,少使用id

CSS hack 1.IE条件注释法 <!--[if IE 6]> CSS内容 <![endif]--> 2.选择符前缀法 '' 前缀最对IE6有效, '+前缀只对IE7有效 3.样式属性前缀法 '_' 只在IE6下生效, ''(这是一个星号)在IE6和IE7生效 <style> .test{width:80px;_width:70px;_*width:60px} </style> 4.超链接的顺序 LoVe HAte 5.hasLayout haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。hasLayout属性是微软特有的过时属性,在IE8、IE9中,hasLayout属性已经被废弃。

haslayout 问题引起的常见 bug: IE6 及更低版本的双空白边浮动 bug bug 修复: display:inline;

IE5-6/win 的 3 像素偏移 bug bug 修复: _height:1%;

IE6 的躲躲猫(peek-a-boo) bug bug 修复: _height:1%; 使用"zoom:1"可以触发hasLayout.

6.块级元素和行内元素的区别 常见块级元素:div、p、form、ul、ol、li等。 常见行内元素:sapn、strong、em等。 块级元素即使设置了宽度,仍然是独占一行的,宽度自动填满其父元素宽度。 行内元素不会独占一行,其宽度仅仅随元素的内容而变化。相邻的行内元素会排列在同一行里,直到一行排不下去,才会换行。 块级元素可以设置margin和padding属性。行内元素的margin和padding属性只有水平边距,没有竖直边距。行内元素竖直方向的padding虽然增大了面积,但并没有和相邻元素拉开距离。

版权声明:本文为博主原创文章,未经博主允许不得转载。

本文链接:https://imjiaolong.cn/post/15.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。