CSS显示与列表

一、显示

1.显示方式
显示方式对定了元素在页面中如何摆放定位
属性：display
取值：
none：让生成的元素不显示(隐藏)
特点：脱离文档流即不占据页面空间
block：让元素变得和块级元素一样
inline：让元素变得和行内元素一样
inline-block：让元素变得和行内块元素一样，多个元素在一行内显示，允许修改尺寸
2.显示效果
visibility属性
作用：控制元素的可见性(显示/隐藏)
属性：visibility
取值：
visivle：默认值可见的
hidden：隐藏元素，但依然占据页面空间
collapse：使用在表格元素上，删除一行或一列时，不影响表格整体布局
注意：
display:none和visibility:hidden区别
display:none：脱离文档流，所隐藏后不占据页面空间
visibility:hidden：隐藏元素，但并不脱离文档流，导致空间依然占据
opacity属性
作用：改变元素的透明度
属性：opacity
取值：0.0(完全透明)~1.0(完全不透明)
vertical-align属性
属性：vertical-align
取值：top/middle/bottom/baseline(默认，基线对齐)(基线：相对文本来讲基线是最后一行文本)
作用：设置单元格内容的垂直对齐方式
为行内块元素设置vertical-align，相对于设置该元素两端的文本相对于该元素的垂直对齐方式
设置图片两端文本相对于图片的垂直对齐方式
3.光标
属性：cursor
取值：default：默认
pointer：小手
crosshair：+
text：I
wait：等待
help：帮助

ex：

    
    
    
    



    
"d1">
    
"d2">

效果图如下：

二、列表

1.列表项表示
属性：list-style-type
取值：
none：无标记显示
disc：实心圆
circle：空心圆
square：实心方块
2.列表项图像
作用：有自定义图像作为显示的标识
属性：list-style-image
取值：url(图像路径)
3.列表项位置
列表项默认位置在列表项内容区域之外，列表的内边距范围内
属性：list-style-position
取值：
outside：默认值，列表项表示位置在列表项之外
inside：将标识放在列表区域之内
4.列表属性
属性：list-style
取值：type url() position
常用方式为list-style:none;
5.列表使用场合
列表能够使用在纵向和横向排列的元素中