css中列表的属性和定位以及网页中元素显示效果
css中列表的属性和定位以及网页中元素显示效果
css中的列表属性
1.列表项显示
属性：list–style-type
取值：
1.none 无标记
2.disc：实心圆
3.circle：空心圆
4.square：实心矩形
实际效果如下
2.列表项图像
作用：由自定义图像作为标识
属性：list-style-image
取值：url（路径）
3.列表项位置 列表的内边距中
属性：list-style-position
取值：
1.outside：默认值，列表项标识位置在列表项之外
2.inside：在列表项标识位置在列表项之内
4.列表属性
属性：list-style
取值：type url（） position；
常用方式：
list-style:none;
取消列表项
5.列表使用场合
列表会经常配合浮动来制作网页，像是图中蓝色框圈起来的就是用列表做的
2.浮动定位
1.定位概念
定位就是改变元素在页面上的默认位置
2.定位分类
1.普通流定位（元素默认定位方式）
2.浮动定位
3.相对定位
4.绝对定位
5.固定定位
3.普通流定位
又称“文档流定位”，是网页中默认定位方式
页面中的块级元素按照从上到下的方式排列，而且每个元素独占一行
页面中行内元素按照从左到右方式排列 元素超过屏幕时会自动换行
4.浮动定位： 解决多个块级元素在一行内显示
1.浮动定位特点
1.浮动定位会被排除文档流之外即脱离文档流，元素不在占据页面空间，其他未浮动元素要上前不补位
2.浮动元素会停靠在父元素左边或右边，或停靠偶在其他已浮动元素的边缘上
3.浮动元素只会在但当前行内浮动
4.浮动元素依然位于父元素之内
5.浮动定位处理的问题-让多个块级元素在一行内显示
2.语法
属性：float
取值：
1.none 没有浮动
2.left：做左浮动，让元素停靠在父元素的左边，或停靠在左侧已有浮动元素的边缘上
3.right：做右浮动，让元素停靠在父元素的右边，或停靠在右侧已有浮动元素的边缘上
3.浮动的特殊效果
1.当父元素的宽度显示不下以浮动子元素时，最后一个将换行（有可能卡住）
2.元素一旦浮动起来，宽度将变成自适应（在没有指定的情况下）
3.元素浮动起来后，那么将变成块级元素，对行内元素影响最大
块级元素：可以修改尺寸
行内元素：无法修改尺寸
4.文本，行内块元素，行内元素是使用环绕方式排列，不会被浮动压在下面，会避开浮动元素
4.清除浮动
元素浮动起之后，除了影响自己位置还会影响之后的元素位置
如果后续元素不想被浮动元素效果影响，需要使用清除浮动来解决影响效果
属性：clear
取值：
1.none 默认值 不做任何操作
2.left
清除当前元素的前面元素左浮动带来的影响。当前元素不会上前占位，
并且左侧不会有浮动元素
3.right
清除当前元素的前面元素右浮动带来的影响。当前元素不会上前占位，
并且右侧不会有浮动元素
4.both
清除前面元素左右浮动带来的影响
5.浮动对父元素带来的影响
由于浮动元素会脱离文档流，所以会导致元素不占据父元素的页面空间，所以会对父元素的
高度带来影响。如果一个元素中所有的子元素全部都浮动了，那么父元素高度为0
解决方案如下
1.直接设置父元素高度
弊端：必须要知道父元素的准确高度
2.设置父元素也浮动
弊端：对后续元素会有影响
3.为父元素设置overflow，取值为hidden或auto
弊端：如果有子级内容要溢出显示的话也一同被隐藏了
4.在父元素中追加空子元素，并设置其clear属性为both
第四种是常用的解决方案基本上没有影响
3.网页中元素的显示效果
1.显示方式，决定了元素在页面中如何拜访定位。
2.语法
属性：display
取值常用：
1.none
让生成的元素不显示-隐藏
特点：脱离文档流即不占据页空间
2.bolck
让元素变得和块级元素一样
3.inline
让元素变得和行内元素一样
4.inline-bolck
让元素变得和行内块元素一样
多个元素在一行显示，允许修改尺寸
2.显示效果
1.visibility
作用：控制元素的可见性（显示/隐藏）
属性：visibility
取值
1.visible
默认值，可见
2.hidden
隐藏元素，但依然占据页面空间
3.collapse
使用在表格元素上，删除一行或者一列时，不影响表格整体布局
2.opacity
改变元素透明度
属性：opacity
取值：0.0（完全透明） 0.5（半透明） 1.0（完全不透明）
3.vertical-align
属性：vertical-align
取值
top/middle/bottom/ baseline(默认，基线对齐) middle居中对齐
作用：
1.设置单元格内容的垂直对齐方式
2.为行内块元素设置vertcial-align，相当于设该元素两
端的文本相对于该元素的垂直对齐方式
3.设置图片两端的文本相对于图片的垂直对齐方式
取值为baseline 文本将在图片下方3个像素的位置
3.光标
鼠标移动到元素上时光标的显示
属性：cursor
取值
1.default
默认
2.pointer
小手
3.crosshair
十字标
4.text
输入
5.等待
6.help
帮助