1，显示方式
display：
none：隐藏，不显示元素
block：让元素的表现形式和块级元素一样
特点:独占一行，可设置宽高，垂直外边距
inline：让元素的表现形式和行内元素一样
特点：多个元素公用一行，不能设置宽高和垂直外边距
inline-block：让元素的表现适合和行内元素一样
特点：多个元素公用一行，不能设置宽高和垂直外边距
table：让元素的表现适合和table一样
特点：尺寸以内容为准，每个元素独占一行，允许修改尺寸
总结：用的比较多的：会把行内元素显示方式修改为块级或者行内快
元素不显示的时候使用none
<a href="#" style="display:block">块级</a>
<a href="#" style="display:inline-block">行内块级</a>
<a href="#" style="display:table">table</a>
<a href="#" style="display:inline">行内元素</a>
<a href="#" style="display:none">none</a>
显示：
**visibility:hidden;**默认是visible
透明度
/* background:rgba(0,0,0,0.3);*/不会影响子元素的颜色
background:#000;
opacity:0.3 会影响子元素的颜色
垂直对齐方式
vertical-align
top
middle
bottom
baseline（img中和图片的基线一样）
使用场合：
1，table中，控制文字的垂直对齐
2，img标签，控制图片与前后文字的垂直对齐方式
img{
vertical-align:bottom;
}
</style>
</head>
<body>
<img src="../img/book.png" alt="">我是帅哥，我很帅气
光标的样式
cursor
取值：
default:默认箭头
pointer：手
text：大写的I
crosshair：十字
wait：转圈，等待
help：问号
列表
列表标示项list-style-type
list-style-type:none;去点
list-style-type:circle;空心圆
列表项图片
list-style-image:url("…/img/微信.png");
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="Cache-Control" content="max-age=3600">
<!--引入外部样式-->
<style>
ul{
/* list-style-type:circle;*/
list-style-image:url("../img/微信.png");
}
</style>
</head>
<body>
<ul>
<li>烤馍</li>
<li>花生米</li>
<li>啤酒</li>
<li>串</li>
<li>烤腰子</li>
</ul>
</body>
</html>
列表项位置
list-style-position:inside;
简写方式
转载：https://blog.csdn.net/weixin_43755916/article/details/101033036
查看评论