CSS样式小技巧

1、默认样式重置（CSS reset）

　　body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin:0;padding:0;font-size:12px;}

　　ol,ul{margin:0;padding:0;list-style:none;}

　　a{text-decoration:none;}

　　img{border:none;}

 

2、选择符

　　类型选择符：body{margin:0;font-size:12px;}

　　class选择符：.box1{width:100px;height:100px;}　　ps:class(类)选择符，可重复使用的“id”。

　　id选择符：#box2{width:200px;height:100px;}

　　群组选择符：ol,ul{margin:0;padding:0;list-style:none;}

　　包含选择符：body a{text-decoration:none;}

　　行内选择符：<a href="#" style="color:#fff"></a>

　　通配选择符：*{color:#foo;}　　ps:*表示全部标签。

　　伪类选择符：　　ps:<a>的伪类顺序固定，要死记。

　　　　a:link{color:#f00;}
　　　　a:visited{color:#666;}
　　　　a:hover{color:#F60;text-decoration:none;}
　　　　a:active{color:#000;}

　　ps:选择符优先级

　　　　类型 < class < id < style < js

　　　　类型 < 类型 类型

　　　　　　ps:同级样式默认后者覆盖前者；

　　　　　 　　名字先后顺序与样式先后顺序无关。

 

3、标签分三种属性

　　 ①内联，内嵌，行内属性标签：<a>,<span>,<strong>,<em>

　　 特性：⑴默认同行可以并列同类型标签；

　　　　　 ⑵没有宽度时，内容撑开宽度；

　　　　　 ⑶不支持宽高属性；

　　　　　 ⑷不支持上下的margin和padding；

　　　　　 ⑸换行代码被解析。

　　②块属性标签：<p>,<h1>,<h2>,<h3>,<h4>,<h5>,<h6>,<dl>,<dd>,<ol>,<ul>,<div>

　　特性：⑴默认独占一行显示；

　　　　   ⑵支持所有CSS命令；

　　　　   ⑶没有宽度时，默认撑满一排

　　③inline-block属性标签：<img>

　　特性：⑴能让块在一行显示；

　　　　　⑵内嵌支持宽高；

　　　　　⑶没有宽度时，内容撑开宽度；

　　　　　⑷换行代码被解析；

　　　　　⑸IE7不支持inline-block。

　　属性间相互转换

　　display:inline　　转变为行内属性

　　display:block　　转变为块属性

　　display:inline-block　　转变为inline-block属性

 

4、浮动(float)

　  float:left | right | none | inherit;

　  特性：⑴能让块在一行显示；

　　　  　⑵内嵌支持宽高；

　　　  　⑶没有宽度时，内容撑开宽度；

　　　  　⑷换行代码被解析；

　　　  　⑸IE6、7支持；

　　　  　⑹脱离文档流，按照指定的一个方向移动直到碰到父级的边界或者另外一个浮动元素停止。

　　　  　　ps:float比inline-block高级；

　　　　　　　 浮动提升层级半层；

　　　　　　　 文档流：是文档中可显示对象在排列时所占用的位置。

 

5、清浮动（clear）

　　clear:left | right | both | none | inherit；

　　方法：①直接给父级加高；　　ps：扩展性不好

　　　　　②给父级加浮动；　　ps:页面中所有元素都加浮动，margin左右自动失效

　　　　　③给父级加display:inline-block；　　ps:margin左右自动失效

　　　　　④在浮动元素下加空div；　　ps:IE6最小高度19px，解决后还有2px偏差。

　　　　　　.clear{height:0px;font-size:0px;clear:both;}

　　　　　　<div class="clear"></div>

　　　　　⑤在浮动元素下加br；　　ps:不符合工作中：结构、样式、行动　　三者分离要求。

　　　　　　<br clear="all"/>

　　　　　⑥after伪类（现在主流方法）

　　　　　　.clear{zoom:1;}

　　　　　　.clear:after{content:"";display:block;clear:both;}

　　　　　　ps:给浮动元素的父级加class="clear"；

　　　　　　　 after伪类： 元素内部末尾添加内容；

　　　　　　　 :after{content"添加的内容";} IE6，7下不兼容；

　　　　　　　 zoom 缩放

　　　　　　　 触发 IE下 haslayout，使元素根据自身内容计算宽高。

 　　　　　⑦overflow溢出

　　　　　　 overflow: scroll | auto | hidden；

　　　　　　 ps:给浮动元素的父级加overflow；

　　　　　　　　在IE6下无效，需要配合宽度或者zoom兼容IE6、7。

　　　　　　 auto　　溢出显示滚动条；

　　　　　　 scroll　　默认就显示滚动条；

　　　　　　 hidden　　溢出隐藏。

　　　　　 ⑧在IE6、7下浮动元素的父级有宽度就不用清浮动

　　　　　　 ps:haslayout：根据元素内容的大小或者父级的大小来重新计算元素的宽高。

　　　　　　　  display:inline-block　　float:(left或right)　　width:(任何值除了auto)　　height:(任何值除了auto)　　zoom:(除normal外任意值)

 

6、浮动的兼容性

　　①IE6双边距BUG（IE6下块属性标签浮动，并且有横向margin，横向margin加倍。）：

　　　让块属性标签加display:inline;解决；

　　　只有块属性标签才会出现双边距。

　　②IE6下 li部分兼容性问题：

　　　左右两列布局，右边右浮动IE6 IE7下折行；(左边元素浮动)

　　　IE6 IE7 li 下元素都浮动 在IE6 IE7下 li 下方会产生4px间隙问题。（加vertical-align:top；）

 

7、vertival-align/img

　  ①vertical-align （垂直对齐方式）

　  　加垂直对齐方式的同排元素都要加垂直对齐方式；

　  　垂直对齐方式可以解决元素下方间隙问题。

　　②图片下方间隙

　　　display:block; (改变标签本身特性)

　　　overflow:hidden;(必须知道图片高度)

　　　vertival-align(暂时最完美的方案)

 

8、定位

　  ①relative相对定位/定位偏移量

　　position:relative;相对定位

　　top/right/bottom/left 定位元素偏移量。

　　　　⑴不影响元素本身的特性；

　　　　⑵不使元素脱离文档流；

　　　　⑶如果没有定位偏移量，对元素本身无影响。