显示效果、列表、定位方式
显示
显示方式
一、作用：显示方式决定了元素在页面中如何摆放定位。
二、语法
它的属性为： display
取值为：
1、none
让生成的元素不显示 “隐藏”
特点：脱离文档流即不占据页面空间。
2、block
让元素变得和块级元素一样
3、inl ine
让元素变得和行内元素一样
4、inline-block
让元素变得和行内块元素一样
多个元素在一行显示，允许修改尺寸
显示效果
1、visibility 属性
作用为：控制元素的可见性(显示/隐藏)
它的属性为：visibility
取值:
（1）、visible
它的默认值，可见的
（2）、hidden
隐藏元素，但依然占据页面空间
（3）、collapse
使用在表格元素上，删除一行或一列时，不影响表格整体布局
注意：
display：none和visibility：hidden区别
（1）、display ：none
脱离文档流，所以隐藏后不占据页面空间
（2）、visibility：hidden
隐藏元素，但并不脱离文档流，导致空间依然占据
2、opacity 属性
作用为：改变元素的透明度
属性为： opacity
取值为：0.0(完全透明) ~ 1.0(正常)
3、vertical-align属性
属性：vertical-align
取值:
top/ middle/bottom/baseline(默认，基线
对齐)
作用：
（1）、设置单元格内容的垂直对齐方式；
（2）、为行内块元素设置vertcial-align，相当于设置该元素两端的文本相对于该元素
的垂直对齐方式
（3）、设置图片两端的文本相对于图片的垂直对齐方式
注意：基线就是文本的最后一行文本所在的位置
光标
光标
它的属性为：cursor
取值为：
1、default
默认
2、pointer
小手.
3、crosshair
"+"类似于准心
4、text
就类似于下图：
5、wait
等待
6、help
帮助
列表
1、列表项标识，
它的属性为：list-style-type
取值为：
（1）、none
无标记
（2）、disc
实心圆
（3）、circle
空心圆
（4）、square
实心方块
2、列表项图像
它的作用为：由自定义图像作为显示的标识
它的属性为：list-style- image
取值为：ur1(图像路径)
3、列表项位置
列表项默认位置是在列表项内容区域之外，列表的内边距范围内
它的属性： list-style- pos ition
取值为：
（1）、outside：默认值，列表项标识位置在列.
表项之外
（2）、inside：将标识放在列表项区域之内
4、列表属性
它的属性：list-style
取值为：type ur1() position；
常用方式：
list-style：none；
定位
一、定位属性
1、position 属性
作用为：指定元素的定位类型
属性为：position
取值为：
（1）、static：默认值
（2）、relative：相对定位
（3）、absolute：绝对定位
（4）、fixed：固定定位
2、 偏移属性
作用为：改变元素在页面中的位置(移动元素)
属性为：
（1）、top
（2）、bottom
（3）、left
（4）、right
取值：偏移距离，以px为单位的数值
找个图来理解一下：
3、堆叠顺序
作用：在元素出现堆叠效果时，改变他们的顺序
属性为：
z-index
取值：没有单位的数字，值越大，越靠上
二、定位方式
1、相对定位
（1）、什么是相对定位：
元素会相对于它原来的位置偏移某个距离，相对定位元素原本所占的空间会被保留。
（2）、下面说所语法：
语法：position：relative；
配合着偏移属性top/bottom/left/right
实现元素的位置移动
（3）、使用场合
实现元素位置微调时使用
2、绝对定位
（1）、什么是绝对定位
绝对定位的元素会脱离文档流-不占据
页面空间；
绝对定位的元素会相对于它最近的已定
位的祖先元素实现位置的初始化。
如果元素没有已定位的祖先元素，那么元素就会相对于最初的包含块实现位置的初始化，如：
body，html
已定位元素：absolute/relative/fixed 称之
为已定位元素
祖先元素：无限父级元素
（2）、说说它的语法
语法：position：absolute；
配合着偏移属性实现位置的改变
（3）、特殊效果
绝对定位元素会变成块级元素；
绝对定位元素依然可以使用margin，但是正
常情况下，auto会失效。
3、固定定位
（1）、它的作用：
将元素固定在页面的某个位置处，不会随着滚动条变化而发生改变。
（2）、它的语法：position：fixed；
配合着偏移属性实现位置的定位
（3）、注意
固定定位元素脱离文档流；
固定定位元素会变块级；
固定定位元素永远都相对于body实现位摆放。
[^1]：好了，这就是关于web中显示、列表、定位方式的相关知识，希望对你有所帮助，最后让我们一起加油吧！