Css注意点&tips

缩写

• 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属性
  (但不符合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;