CSS常用规则总结

CSS布局基本技巧:

1:float(浮动)的理解:浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。
浮动框不属于文档中的普通流，当一个元素浮动之后，不会影响到 块级框的布局而只会影响内联框(通常是文本)的排列。
文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，也就会出现包含框不会自动伸高来闭合浮动元素("高度塌陷"现象)。
顾名思义，就是漂浮于普通流之上，像浮云一样，但是只能左右浮动。
正是因为浮动的这种特性，导致本属于普通流中的元素浮动之后，包含框内部由于不存在其他普通流元素了，也就表现出高度为0(高度塌陷)。

2:父级元素设置{overflow:hidden;height:auto;}清除浮动的理解:
overflow:hidden要有宽度或者高度才会溢出部分隐藏，如果外部盒子没有宽度或者高度，里面又是浮动元素，就会被撑开。

3:CSS文档流与块级元素(block)、内联元素(inline)
内联元素(inline):不能设置width、margin(padding)-top、margin(padding)-bottom。
块级元素(block):默认独占一行、支持所有css命令。
常见的行内标签：<a>、<span>、<strong>、<em>。
常见的块属性标签：<div>、<p>、<dl>、<dt> 、<dd> 、<ol>、<ul>、<li> 、<h1-h6>。

4:margin和padding使用需要注意的地方
margin在竖直方向上会重合，如某元素其上面元素的margin-bottom为30px，该元素自身margin-top为15px，两个元素之间的margin是30不是45。
margin:<top><ringht><bottom><left>如果只给定一个值，表示默认四个值相等。
用于清除不同浏览器给元素默认添加的margin和padding
*{margin:0px; padding:0px;}

5:<a>标签的常用设置
a:link{...}未访问是的样式设定
a:visited{...}访问过后的样式设定
a:active{...}鼠标点击与释放之间的样式设定
a:hover{...}鼠标悬停时的样式设定

6:元素宽度等于width+padding+margin+border