CSS显示、列表、布局

1.显示

1、显示方式

属性：display

取值：

1、none
	让生成的元素不显示 - 隐藏
	特点：
		脱离文档流
2、block
	让元素表现的和块级元素一样
	特点：
		1、独占一行
		2、允许修改尺寸
		3、允许正常处理垂直方向的外边距
3、inline
	让元素表现的和行内元素一样
	特点：
		1、多个元素一行内显示
		2、不允许修改尺寸
		3、垂直外边距无效
4、inline-block
	让元素表现的和行内块一样
	特点：
		1、多个元素能在一行内显示
		2、允许修改尺寸
5、table
	让元素表现的和表格元素一样
	特点：
		1、每行只显示一个
		2、尺寸以内容为准

2.显示效果

（1）显示 / 隐藏属性

属性：visibility

取值：

1、visible : 默认值，可见的
2、hidden : 隐藏，依然占据空间

（2）透明度

属性：opacity

取值：0.0(完全透明) ~ 1.0(完全不透明) 之间的数字　

（3）垂直对齐方式

属性：vertical-align

作用：设置 td 和 img 的垂直对齐方式

取值：

1、设置在 td 上的 值
	1、top
	2、middle
	3、bottom
2、设置在img上的值
	设置图片两边的文本，相对于图片的垂直对齐
	1、top
	2、middle
	3、bottom
	4、baseline ：基线对齐（默认值）
常用操作：
	在开发网页过程中，通常会先将所有的图片(img)的vertical-align属性修改为除baseline以外的其他值

3.光标

作用：当鼠标悬停在元素上时表现的形式

属性：cursor

取值：

1、default
2、pointer ：小手
3、crosshair ：+
4、text ： I
5、wait ：等待
6、help ：帮助

2.列表

1.列表项标识

属性：list-style-type

取值：

1、none
2、disc
3、circle
4、square

2.列表项图片

作用：以自定义的图像来作为列表项的标识

属性：list-style-image

取值：url（图像地址）

3.列表项位置

属性：list-style-position

取值：

1、outside
	将标识放置与 li 的外面
2、inside
	将标识放置与 li 的里面

4.列表属性

属性：list-style

取值：style image position

常用用法：list-style : none;

3.定位-布局

1.定位属性

（1）定位方式属性

  属性：position

  取值：static（默认） / relative（相对的） / absolute（绝对的） / fixed（固定的）

  注意：如果将position修改为 relative / absolute / fixed 中的任何一种的话，那么元素就被称为“已定位元素”　

（2）偏移属性（只适用于“已定位元素”）

  属性：top / right / bottom / left

  取值：以 px 为单位的数值

 

2.定位方式

（1）相对定位

作用：元素会相对于它原来的位置偏移某个距离，多数会实现在位置微调时使用

 语法：

position:relative;
配合着top/right/bottom/left实现位置的微调

 练习：

1、页面中创建一个div，尺寸为100*30，设置边框或背景色
2、当鼠标悬停在元素上时，让元素向左上角移动5px(相对定位)

　　

            #postion{
                width: 100px;
                height: 100px;
                border: 1px solid #000;
                background-color: #009951;
            }
            #postion:hover{
                position: relative;
                top: -5px;
                left: -5px;
            }

（2）绝对定位

  绝对定位 & 特点

绝对定位的的元素会脱离文档流，不占页面空间
绝对定位的元素会相对于离它最近的，已定位的，祖先元素 去实现位置的初始化和偏移
如果不存在已定位的祖先元素的话，那么就相对于body去实现位置的初始化和偏移

  语法：

position:absolute;
配合着偏移属性top/right/bottom/left实现位置的偏移

  特点：

1、绝对定位元素会脱离文档流，所以会压在其它元素之上
2、绝对定位的元素会变为块级元素
3、绝对定位的元素margin可以正常处理，但margin:0 auto 会失效

（3）堆叠顺序

  一旦将元素变为已定位元素的话，元素则有可能出现堆叠的效果

  属性：z-index

  取值：无单位的数字，数字越大越靠上

  注意：只有已定位元素才能使用z-index

            父子元素间，z-index无效，永远都是子压在父上　　

（4）固定定位

  定义：将元素素固定在页面的某个位置处，位置不会随着滚动条而发生改变。固定在可视化的区域中。

  语法：

position:fixed;
        配合着 top / right / bottom / left 改变位置
注意
	1、固定定位的元素会脱离文档流-不占页面空间
	2、固定定位的元素会变成块级元素
	3、固定定位的元素永远都是相对于body去实现位置的初始化和偏移

（5）黏性定位

  作用：在指定的位置进行黏性操作

  语法：

 

position:sticky
   配合 top / bottom / left / right 使用
注意：
   如果不定义 top / bottom / left / right 的值，该方式 position:sticky 则会没有效果