缩写
Margin元素和Padding元素的缩写方法。
值遵从上右下左的顺时针顺序来缩写。
E.G.
padding-top: 20px;
padding-right: 30px;
padding-bottom: 20px;
padding-left: 30px;
简写为：padding: 0px 20px 30px 10px;
或者 padding: 20px(上下)30px（左右）;背景缩写
background-color: white;
background-image: url(image/1.gif);
background-repeat: repeat-x;
简写为
background: white url(image/1.gif) repeat-x;
Margin外边距
1.两个块之间,上下的外边距会被叠加
2.父子级包含的情况下,子级块的margin-top会传递给父级
缩写: margin: top right bottom left;
font
- size最小为12px，并尽量保证数值为偶数。
- family 中文默认为宋体
块元素的特点
每个块级元素都从新的一行开始，并且其后的元素也另起一行。
元素的高度、宽度、行高以及顶和底边距都可设置。
元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
行内元素（内联元素）的特点
- 和其他行内元素都在一行上；
- 元素的高度、宽度及顶部和底部边距不可设置；
- 元素的宽度就是它包含的文字或图片的宽度，不可改变。
display： inline-block的特性
- 可以使块元素在一行内显示。
- 可以使行内元素支持宽高设置。
- 换行被解析（换行的空格会占据宽度）
- 不设置宽度的时候，其宽度由内容撑开（行内元素特性）
float的特性
- 可以使块元素在一行内显示
- 可以使行内元素支持宽高
- 换行不被解析
- 不设置宽度的时候，其宽度由内容撑开（行内元素特性）
- 会让元素脱离文档流 飘在文档流上方
- 但是文档流的文字不会被浮动元素所遮挡
元素加了浮动之后，会脱离文档流，按照指定方向移动，直到碰到一个父级元素的边界或者另一个浮动为止。
清浮动
- 给父级元素也加浮动（缺点，父级无法居中，且父级也脱离文档流，若父级上面还有父级会造成更多麻烦）
- 给父级增加display：inline-block（缺点，无法居中，但不脱离文档流）
- 在浮动元素下方增加一个空的div并设置以下样式（缺点，丑，影响html的可读性）
div{ height: 0px; font-size: 0px; clear: both; } - 在浮动元素下方增加换行，并增加clear属性<br clear=“all”/ >(但不符合W3C标准)
W3C标准：结构、样式、行为，三者必须分离 - 使用伪元素：after
div:after{ content: ""; display: block; clear: both; } - 兼容ie6、7的设置
1.给父级元素设置
div:after{ zoom: 1; }
2.使用伪元素：after
div:after{ content: ""; display: block; clear: both; } - 给浮动元素的父级增加overflow： hidden；（由于ie6、7的兼容性，最好配合使用zoom: 1;）
文字不折行且溢出部分省略的代码
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
