css样式小技巧

1.css样式小技巧

HTML怎样设定使背景图片不随页面滚动而滚动

background-attachment:fixed;

 

2.实现li a 超过长度内容出现省略号…

overflow:hidden;

white-space:nowrap;

text-overflow:ellipsis;

 

3.使用 line-height 垂直居中

line-height:24px;

 

4.清除容器浮动

#main {    overflow:hidden;}

 

5.不让链接折行

a {    white-space:nowrap;}

 

6. 使块元素水平居中

margin:0 auto;

其实就是 margin-left: auto;margin-right: auto;

 

7.删除链接上的虚线框

a:active, a:focus {outline:none;}

 

8.position属性四大可选值用法

Position属性有四个可选值，它们分别是：static、absolute、fixed、relative。

position:static　无定位：该属性值是所有元素定位的默认情况，在一般情况下，我们不需要特别的去声明它。

position:absolute　绝对定位

position:fixed　相对于窗口的固定定位

position:relative　相对于元素的对象定位

 

9. 首字下沉

伪对象:first-letter配合font-size、float可以制作首字下沉效果。

 

10、竖排文字

writing-mode属性有两个值lr-tb和tb-rl，前者是默认的左-右、上-下，后者是上-下、右-左。

 

11、首行缩进

可以使得容器内首行缩进一定单位。比如中文段落一般每段前空两个汉字。可以这么写： p{ text-indent:2em;/*em是相对单位，2em即现在一个字大小的两倍*/ }如果font-size是12px的话，那么text-indent:2em则缩进24px。