css杂项

一、元素的隐藏和显示

1、display显示

display:none隐藏某个元素，隐藏之后，不再保留位置

display:block可以用来转换模式，也可以显示某个元素

2、visibility可见性

visible对象可视

hidden对象隐藏隐藏之后，位置继续保留

3、overflow溢出

visible不剪切内容也不添加滚动条

auto超出自动显示滚动条，不超出不显示滚动条

hidden不显示超出对象尺寸的内容，超出的部分隐藏掉（实际工作中，最为常用的）

scroll不管内容是否超出，总是显示滚动条

二、清除浮动

浮动元素不再占有原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这个问题，此时就需要在该元素中清除浮动

1、清除浮动本质：

解决父级元素因为子级元素浮动而引起的高度为0的情况

2、清除浮动的方法

(1)额外标签法(内墙法)：

在浮动元素的末尾加一个空标签.clear{clear:both;}

添加许多无意义标签，结构化较差，不推荐使用。

(2)父级添加overflow：hidden；属性方法

缺点:容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的内容

(3)after伪元素法：

.clearfix：after {

content:".";

display:block;

height="0";

visibility:hideen;

clear:both;

}

.clearfix {

*zoom: 1;(ie6、7专有)

}

(4)after伪元素空余字符法

.clearfix：after {

content:"\200B或者\0200";

display:block;

height="0";

clear:both;

}

.clearfix {

*zoom: 1;(ie6、7专有)

}

(5)双伪元素法

.clearfix：after,.clearfix：before {

content:"";

display:table;

}

.clearfix:after {

clear:both;

}

.clearfix{

*zoom:1;

}

三、css用户界面样式

1、鼠标样式cursor

设置或检索在对象上移动指标采用何种系统预定义的光标形状

cursor:default小白(默认的)

pointer小手

move移动

text文本

2、轮廓outline

outline:color

style width;去掉轮廓outline：0;

3、防止拖拽文本域

resize：none;防止谷歌火狐等浏览器拖拽文本域

四、vertical

1、vertical-align垂直对齐

不影响块级元素中的内容对齐，只针对于行内元素或行内块元素,通常用来控制图片和表单

vertical-align:

baseline（基线对齐）middle（中线对齐）top（顶对齐）

2、去除图片底侧空白缝隙

（1）给img设一个vertical-align：middle或者top就行，让图片不要和基线对齐

（2）给img添加display：block；转换为块级元素，