CSS的十条常用技巧
1. 元素的垂直居中:
元素加上行高line-height等于自身高度的情况下,该元素内的文本会垂直居中对齐。
2. 元素的水平居中:
1) 在网页拥有DTD文件的情况下直接对居中目标加上CSS的margin:0 auto;属性即可;
2) 网页不存在DTD文件的情况下解决IE居中问题,现在body加上text-align:center;然后再对目标元素加上margin:0 auto;属性;
3. DIV的绝对定位:
元素的绝对定位属性是以离本身最近的一个拥有相对或者绝对定位的父级元素作为参照物的,如果没有找到,即以浏览器为参照物,而不是以body为参照。
4. 列表的列表项图像:
尽量对li元素使用背景图片来实现,因为使用list-style-image属性不好控制图标的位置;
5. CSS的书写和命名:
1) 尽量采用关联选择器,这样有利于修改时方便查找定位;
2) 一定要写上注释,比如公用的CSS样式前面请写上/*======common======*/,这样使代码更加清晰,增加可读性;
3) 选择器命名要有意义,避免出现p1,p2,one,two,three这样无意义名称,头部就header,主要的部分就main,底部就footer,这样很清晰的就知道各部分的作用;
4) 能缩写的尽量所写,比如背景background,外边距margin,内边距padding等。
5) 不要用大写;
6. clear元素的使用:
在每次多数float的时候或者一部分结尾浮动的时候请加上一个clear的div清除一下浮动,我建议大家把它的作用理解为:把它的上面和下面的内容分界,互不影响。
7. 盒子模型的计算:
分别对IE和非IE进行定义宽和高,或者尽量少把padding和width或者height加在一起使用,因为IE和非IE对和模型的计算是不一样的。
IE对盒模型的计算:margin+border+(width/height)
非IE对盒模型的计算:margin+border+padding+(width/height)
这就是为什么有时候加了padding以后盒子在非IE浏览器下会被撑大的原因,所以在拥有padding的情况下请分别定义width或者height。
8. 关于height和width:
1) 如果对元素加了height:100%;或者width:100%;它会以父级元素的指定尺寸来计算自己的宽和高,所以在使用width:100%或者height:100%的时候请检查一下它的父级元素有没有具体指定的高度;
2) DIV如果不需要行内排列,也就是DIV不浮动或者独占整行的情况下,请不用写width,因为DIV是块级元素,本身就是无限宽;
9. DIV的尺寸特性:
1) DIV在没有指定宽度的情况下会尽可能的宽;
2) DIV在不指定宽度的情况下加上float属性,宽度会尽可能小,小到内容宽度;
3) DIV在不指定宽度情况下加上position绝对定位absolute属性,也会尽可能缩小;
10. 导航菜单的li:
请使用padding来替代width来定义导航菜单的宽度,因为width是死的,文字过长会错乱,而通过padding给li内容左右两边加上填充更加灵活。
希望能对大家有解惑特效!! 哈哈 打个广告:win8中文网,www.win8it.com 求关注!
分享到:
相关推荐
CSS的常用技巧 CSS的常用技巧
CSS的常用技巧放送,CSS的常用技巧放送,CSS的常用技巧放送
本文收集整理了IE7,6与Fireofx的CSS兼容性处理技巧,供大家参考。 CSS兼容常用技巧
CSS中常用的 reset.css文件,用于重置html默认样式
css常用代码大全(html+css代码).pdfcss常用代码大全(html+css代码).pdfcss常用代码大全(html+css代码).pdfcss常用代码大全(html+css代码).pdfcss常用代码大全(html+css代码).pdfcss常用代码大全(html+css代码).pdf
前端知识之CSS常用技巧荟萃
css入门常用的代码css入门常用的代码css入门常用的代码css入门常用的代码
css3常用画图代码 css3常用画图代码 css3常用画图代码
CSS样式表设计的十条技巧
css排版技巧 表格已死 css才是王道 一步步教您css的排版技巧
css常用文字定义 包含了一些常用的CSS代码 的文字解释
css常用属性
整理了一套用到CSS3的各种知识,包括各个选择器的使用,各个属性的使用,属性的区别,实际开发中需要注意的问题,以及如何解决这些问题等等
各类css常用属性 大全 各类css常用属性 大全
css最常用和实用的技巧.docx
CSS样式表常用小技巧
CSS全攻略与CSS实用常用参考源码特效实例,CSS全攻略与CSS实用常用参考源码特效实例。
经典好看的各式控件样式CSS样式,各种常用控件好看CSS样式,可自己修改,决定好用