css中注意的重要的东西.docVIP

CSS框架/命名/规则 注意要点 -- 补充 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开始,