七.CSS分类 (Classification)

分类 (Classification)
1.把元素显示为内联元素/块级元素/隐藏元素 display
p {display: inline} 把段落设置为内联元素,不会换行
span { display: block } 把行内元素元素span设置为块级元素

2.浮动属性 float
(1)使图像浮动于一个段落的右侧
图像会浮动到右侧，并且添加了点状的边框。为图像添加了边距，这样就可以把文本推离图像
img {float:right;border:1px dotted black;margin:0px 0px 15px 20px;}
(2)使段落的首字母浮动于左侧
span { float:left; width:0.7em; font-size:400%; font-family:algerian,courier; line-height:80%; }
(3)创建水平菜单
ul{float:left;width:100%;padding:0;margin:0;list-style-type:none;}
li {display:inline}
(4)创建无表格首页
http://www.w3school.com.cn/tiy/t.asp?f=csse_float6

3.定位：相对定位/绝对定位/固定定位
相对定位:relative 相对于原位置;原空间保留;会与移动后所在位置的内容叠加显示;
绝对定位:absolute 相对于负元素进行定位；原空间删除；会与移动后所在位置的内容叠加显示;
固定定位:fixed 相对于浏览器定位(其实是相对于HTML文件)；
通过"left", "top", "right" 以及 "bottom"进行定位

4.使元素不可见 visibility
visibility
值   描述
visible     默认值。元素是可见的。
hidden      元素是不可见的。
collapse    当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。
visibility:hidden与display:none区别
visibility:hidden只是隐藏元素空间仍在
display:none是隐藏并删除该空间

5.改变光标cursor
值   描述
url         需使用的自定义光标的 URL。
                                注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。
default     默认光标（通常是一个箭头）
auto        默认。浏览器设置的光标。
crosshair   光标呈现为十字线。
pointer     光标呈现为指示链接的指针（一只手）
move        此光标指示某对象可被移动。
e-resize    此光标指示矩形框的边缘可被向右（东）移动。
ne-resize   此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize   此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize    此光标指示矩形框的边缘可被向上（北）移动。
se-resize   此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize   此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize    此光标指示矩形框的边缘可被向下移动（北/西）。
w-resize    此光标指示矩形框的边缘可被向左移动（西）。
text        此光标指示文本。
wait        此光标指示程序正忙（通常是一只表或沙漏）。
help        此光标指示可用的帮助（通常是一个问号或一个气球）。

6.清除元素的侧面 clear
值                   描述
left    在左侧不允许浮动元素。
right   在右侧不允许浮动元素。
both    在左右两侧均不允许浮动元素。
none    默认值。允许浮动元素出现在两侧。