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 style="background:url(图片路径) left top no-repot; padding-left:(图片宽+10);width= height="＞文字文字文字＜/div＞]
而在图片有链接,或是动态的时候:
＜div class=gm＞＜img src="图片路径" width= height= boder= style="padding-right:10px; float:left"＞＜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判断不了高度！
补充,在浮动出错时,应用嵌套写法.会避免很多问题
