1、标签的几种常见”display”属性
| block | “块”元素 |
| inline | “行内”元素 |
| inline-block | 行内块元素 |
| none | 隐藏 |
块元素、行内元素和行内块元素可以互相转化
2、浮动(float)
float : left 左浮动
float :right 右浮动
float : none 默认 不浮动
加了浮动的元素会自动块化
3、如何清除浮动带来的影响
1.给父元素加height
2.给父元素加overflow:hidden
3.在所有有浮动的元素后加一个空元素div,给此空元素添加样式clear:both
clear:left 清除左浮动
clear:right 清除右浮动
clear:both 清除左、右浮动
4.给父元素添加伪元素,在此伪元素上清除浮动
.clearfix::after{
display:block;
content:"";
clear:both;
}
4、定位(position)
(1)static 默认 正常文档流定位
(2)relative 相对定位 相对于原来的自己定位
(3)absolute 绝对定位
a)包含框无定位,相对于浏览器定位
b)包含框有定位,相对于离自己最近的有定位的元素定位
(4)fixed 固定定位 始终相对于浏览器定位
配合left、right、top、bottom的值来改变元素位置,z-index z轴的堆叠顺序(只有在定位中才管用)
5、列表样式
list-style-type 列表样式类型(disc/square)
list-style-image 列表样式图片
list-style-position 列表样式位置(outside / inside)
6、其他样式补充
元素不可见 display:none
visibility:visible/hidden
opacity:取值0-1
光标样式 default 默认 白箭头
text 默认 文本工字型
wait 等待状态
help 帮助状态
pointer 链接样式 小手状
url("图片路径"),auto 自定义光标样式
本文详细介绍了CSS中重要的样式属性,包括块级元素与行内元素的`display`转换,浮动效果及清除方法,定位原理与应用,列表样式的设置,以及元素可见性、光标样式的控制。通过这些概念,可以帮助前端开发者更好地理解并控制网页布局。
、如何清除浮动带来的影响、定位(position)、列表样式、其他样式补充&spm=1001.2101.3001.5002&articleId=123447093&d=1&t=3&u=44bb0d9353604ea09c9db8215165296f)
1104

被折叠的 条评论
为什么被折叠?



