CSS小技巧

1.元素水平居中

内联元素水平居中text-align:center;

块元素水平据居中margin:0 auto;

2.单行文字垂直居中

height:n px;

line-height:n px;

3.文字相对图片、输入框垂直居中

vertical-align:middle;

4.元素自适应高度

父元素未指定高度，子元素有浮动，父元素不能自增。

overflow:hidden|auto;

5.background

元素背景覆盖范围：

IE7：content+padding

IE8+，FF：content+padding+border

body背景覆盖范围：content+padding+border+margin

6.margin

塌陷：竖直排列的块级元素之间的间隔是margin-bottom和margin-top两者中的较大值。

成父子关系的块级元素，子元素的margin以父元素的content为参考，倘若子元素的content+margin的高度超过了父元素高度值，IE会自动扩大，保持子元素的margin-bottom和父元素的padding-bottom，FF则保持父元素高度不变，子元素会超粗父元素范围。

成父子关系的块级元素,如果父元素和子元素之间没有其他元素,浏览器则会把子元素的margin-top作用于父元素。

可给父元素设置以下属性：

padding-top:n px;

overflow:hidden|auto;

position:absolute;

display:inline-block;

float:left|right;

7.position

absolute：使用绝对定位的元素以最近的已经定位的祖先元素为基准进行偏移，若没已经经定位的祖先元素则以浏览器窗口为基准进行偏移；绝对定位的元素从标准文档流中脱离，对其他元素的定位没有影响。设置绝对定位而不设置偏移的元素将脱离文档流且保持在原来的位置。

fixed：固定定位的元素以浏览器窗口为基准进行定位。

8.z-index

z-index属性取值为auto|number，作用于position属性设置为relative|absolute|fixed的元素。

同一个层叠上下文中，层叠级别大的显示在上，层叠级别小的显示在下；相同层叠级别时，遵循后来居上的原则；不同层叠上下文中，元素显示顺序以父级的层叠级别来决定显示的先后顺序，与自身的层叠级别无关。

9.border

单独设置border-left|right|top|bottom写出多样的三角形状。

{

border: n px solid color;

border-left|right|top|bottom-color: color|transprent;

}

10.伪类

(1)链接伪类出现的顺序必须遵循a:link a:visited a:hover a:active

(2):after和:before

element{position:relative;}

element:after,element:before{

position:absolute;

content:" ";

content: attr data-letter;

}

11.溢出省略

white-space: nowrap;//限制文本换行

overflow: hidden;//溢出隐藏

text-overflow: ellipsis;//显示省略标记

-o-text-overflow:ellipsis;//兼容Opera