CSS框架/命名/规则及要点注意

from: http://www.onlyaa.com/html/htmlcss/20080602/2181.html

1:为什么每个layout下都有个inlayout?

我们将layout的宽/浮动等属性设置好之后,对于layout内的padding和margin,是否还需要去计算呢?

而这个时候,自适应的inlayout,可以帮我们免除计算的步骤!!!同样,在移动不同layout的内容的时候,甚至不需要有任何动作,直接copy代码即可.

2:提高通用型DIV(GM)的利用率,会让你的工作效率大大提高.

通用型DIV,当然是以class来使用它,当一个页面上,相同的padding/margin值的DIV很多的时候,那么gm就是我们的最佳选择.不要笑话我,这个gm,是我在google内输入"通用"二字得到的...

3:换个方向float,可能会让你少费点脑筋.

我想在DIV1中设置N个DIV2,左浮动,向左margin为20px;但是我又想左边的div2和div1的边缘重合.....怎么解决margin-left的值呢?

思路一:float:right吧!!

思路二:padding-right.

思路三:表格.

思路四:加一个表格,然后margin负值...

大家可以试一试...

4.Padding和margin的方向,在追求完美效果的同时,建议养成固定习惯.有利于以后的修改!

其实很多时候,在全局无float的情况下,或不同结构的情况下.margin-right和bottom是没有用的.

5:不要让文字破坏距离的美感...

我的标题设置好了...我的内容和标题有10px的距离,所以,我的div的padding为10px.可是,加上文字的行高,会让文字距离上方标题的长度大于其他方向,破坏了整体,所以,在文字内联及外联的时候,花一秒的时间想一下那个方向的padding或margin值应该小一点!

6:百分比的恶搞!

我要做一个无论什么分辨率下,都是全屏幕的网站.这个时候要注意了,50%+50%=100%,算术上是非常正确的.但是浏览器有的时候很容易把它算成101%..怎么避免?49.9%+49.9%就可以了..

7:关于文本缩进.

先清除p的值,然后赋予它text-indent:2em.如果它的行高,颜色等各有不同.那么＜p class=""＞＜/p＞吧.把不同的设置到class里..

在处理很长的文本的时候,直接copy文本在视图下粘贴,然后进入代码视图,一头一尾加上p和/p,中间位置用查找替换,查找

,替换成＜/p＞＜p＞,之后你会发现,原来处理文字其实这么简单!

8:巧用display:block...

weilaixu是个非常懒的人,他在排一个栏目标题+一段文字列表或其他东西时,先设置一个hx,比如h2,h2{font-size:14px; font-weight:bold; display:block; padding-top:4px; boder-bottom:1ps solid #ccc;},然后设置一个ul,最后,在一个div内用以下方法:

＜div class="gm"＞

＜h2＞新闻中心＜/h2＞

＜ul＞

＜li＞＜/li＞

＜li＞＜/li＞

＜/ul＞

＜/div＞

而当只有N行文字的时候,比如N行文字又在img下边,每行都不一样,都有链接,这个时候,weilaixu懒到直接把每行文字的css上加上display:block.....搞定!

9:图文混排最龌龊的方法.

如果图片上没链接,特别是静态的时候,weilaixu正常是这个样子:

＜div ＞文字文字文字＜/div＞]

而在图片有链接,或是动态的时候:

＜div class=gm＞＜img src="图片路径" width= height= boder= ＞＜a＞文字文字文字＜/a＞＜/div＞

这样了事.....而且,支持所有浏览器哦!

10:关于浮动:float;

如果你float用的很纯熟,计算的很到位,那么,它并不危险,甚至不需要去清除浮动...

如果你float很纯熟,但布局时犯了个未知错误,或修改工作量太大,那么,怎么半呢?这里以左右结构为例,就像我的blog;

从出错的那个float所在的div开始,向上所有位置在它前边的div让它position:absolute起来,然后在该div上position:absolute,加上float,这个时候,即使你是计算错误,还是其他...大不了左右中的一边被盖住一些,没问题....就象在宽度低于990px的屏幕上看我的blog..

关于循环的浮动,把宽度和高度问题解决,margin解决,基本不会有太大的问题..如果加上clear,那就更完美了...

下边说说解决DIV高度自适应内容的问题:

不设高度，overflow:hidden;

如果div内有浮动，则辅以清除浮动clear来解决针对IE6的有可能无法解析到高度的情况

如果浮动循环，那么，建议使用嵌套写法，可以自然的避免IE6的毛病！

循环浮动内，最好不要有HTML注释＜!----＞,否则IE6的BUG会让你吃尽苦头！

对于html解析DIV的高度，以下几种情况：

1：全为font文字的时候，无需设置高度，也无须overfllow，自动解析。

2：全部为img时，同上

3：图img文font混排时，需设置overfllow

4：object，特别是利用js插入flash时，需设置overfllow，但最好设置height；

补充，如果flash文件被js从文档流中移出，则必须设置height

补充，对于左图右文或右文左图的排列，推荐使用嵌套写法，div内直接包含img和font，img设置float，利用padding来控制img和文的隔离，font无需浮动。这种情况最容易让ie6判断不了高度！

补充,在浮动出错时,应用嵌套写法.会避免很多问题