提示
本文主要讲解 CSS 常用的装饰标签。@ermo
# 装饰效果
# vertical-align
vertical-align 表示设置元素的对齐方式。首先要了解浏览器在对文字排版时使用的基线 baseline，vertical-align 设置的垂直对齐方式就是基于 baseline 进行设置的。
有以下几种主要的属性值：
- baseline，为默认值，基线对齐
- top，顶部对齐
- middle，居中对齐
- bottom，底部对齐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input {
height: 50px;
box-sizing: border-box;
/* vertical-align: middle; */
}
</style>
</head>
<body>
<input type="text"><input type="button" value="搜索">
</body>
</html>
上例中文本框和搜索框不能完全对齐，那是因为浏览器针对行内和行内块元素默认使用文字的排版方式，默认就是基线对齐。
针对这种问题，可以设置 vertical-align 属性为 middle，就可以解决这种问题。
# cursor
cursor 属性表示鼠标在某一个元素内需要展示的形状。主要有以下几种属性值：
- default，默认类型，为箭头
- pointer，小手效果，表示当前元素可以点击时使用
- move，十字箭头，表示当前元素可以移动时使用
- text，工字型，表示当前元素为文本内容，可以复制时使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
cursor: pointer;
}
</style>
</head>
<body>
<div>div</div>
</body>
</html>
# border-radius
当元素需要设置圆角边框时可以使用 border-radius，属性值可以使用数字、百分比和像素 px。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
margin: 0 auto;
width: 200px;
height: 200px;
background-color: pink;
border-radius: 50%;
}
/* 头像 */
.avatar {
width: 100px;
height: 100px;
background-color: skyblue;
border-radius: 50%;
}
/* 胶囊 */
.capsule {
width: 200px;
height: 100px;
background-color: yellow;
border-radius: 50px;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="avatar"></div>
<div class="capsule"></div>
</body>
</html>
圆角的常用使用场景有头像、胶囊按钮。
# overflow
overflow 控制内容溢出部分显示效果，属性值有4个：
- visible，默认值，溢出部分可见
- hidden，溢出部分隐藏
- scroll，不论是否溢出，都显示滚动条
- auto，根据是否溢出，自动显示或者隐藏滚动条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 300px;
height: 300px;
background-color: pink;
/* overflow: hidden; */
/* overflow: scroll; */
overflow: auto;
}
</style>
</head>
<body>
<div class="box">测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果测试溢出效果</div>
</body>
</html>
工作中一般使用 auto 属性值，可以自动设置溢出文字的展现方式。
# 元素本身隐藏
针对元素隐藏，一般有两种主要解决方式。
（1）visibility: hidden
这种方式隐藏元素后，隐藏的元素依然后占位，工作中使用到的情况比较少。
（2）display: none
这种方式同样可以隐藏元素，并且隐藏后的元素不再占位，网站的菜单栏基本都是使用这种方式实现。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.one {
width: 200px;
height: 200px;
background-color: pink;
/* visibility: hidden; */
display: none;
}
.two {
width: 200px;
height: 200px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
</html>
# opacity
opacity 属性可以设置元素的透明度。
属性值只能输入0~1之间的数字，0表示完全不透明，1表示完全透明。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 400px;
height: 400px;
background-color: pink;
opacity: 0.5;
}
</style>
</head>
<body>
<div class="box">
普通文字普通文字普通文字普通文字
<img src="./images/hot.png" alt="">
</div>
</body>
</html>
opacity 属性设置元素会对所有子级元素生效。