装饰
基线：浏览器文字类型元素排版中存在用于对齐的基线（baseline）
文字对齐问题
场景：解决行内/行内块元素垂直对齐问题
问题：当图片和文字在一行中显示时，其实底部不是对齐的
# 垂直对齐方式
属性名： vertical-align
属性值：
| 属性值 | 效果 |
|---|---|
| baseline | 默认，基线对齐 |
| top | 顶部对齐 |
| middle | 中部对齐 |
| bottom | 底部对齐 |
# 案例
# 搜索与搜索框对齐
<style>
/*浏览器遇到行内和行内块标签当做文字处理，默认文字是按基*/
input{
height:50px;
box-sizing:border-box; /*浏览器自动计算多余大学，自动在内容这减去*/
vertical-align:middle;
}
</style>
<body>
<input type="text">
<input type="button" value="搜索">
</body>
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 图片与搜索框对齐
<style>
img{
vertical-align: middle;
}
</style>
<body>
<img src="../images/1.jpg" alt="">
<input type="text">
</body>
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# DIV元素与对话框顶部对齐
<style>
.father{
width:400px;
height:400px;
background-color:pink;
}
input {
/*vertical-align:middle;*/
vertical-align:top;
}
</style>
<body>
<div class="father">
<input type="text">
</div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 图片与背景高度对齐
<style>
.father{
width:400px;
background-color:pink;
}
img{
/*浏览器把行内和行内块标签当做文字处理，默认基线对齐*/
/*vertical-align:middle;*/
/*从标签显示模式上考虑: block之后不再是行内块，浏览器把它当作标签去处理，就不会当中文字去处理，就没有基线的说法*/
display:block;
}
</style>
<body>
<div class="father">
<img src="../images/1.jpg" alt="">
</div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 图片垂直水平居中
工作中用得比较多，
浏览器处理行内或行内标签都当作文字去处理，img就相当于一个很大的文字，文字水平居中使用：text-align: center
<style>
.father{
width:600px;
height:600px;
background-color:pink;
line-height: 600px;
text-align: center;
}
img {
vertical-align:middle;
}
</style>
<body>
<div class="father">
<img src="../images/1.jpg" alt="">
</div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 光标类型
场景：设置鼠标光标在元素上时显示的样式
属性名：cursor
常见属性值：
| 属性值 | 效果 |
|---|---|
| default | 默认值，通常是箭头 |
| pointer | 小手效果，提示用户可以点击 |
| text | 工字型，提示用户可以选择文字 |
| move | 十字光标，提示用户可以移动 |
<style>
div{
width:200px;
height:200px;
background-color:pink;
cursor: pointer;
}
</style>
<body>
<div>div</div>
</body>
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 边框圆角
边框圆角场景：让盒子四个角变得圆润，增加页面细节，提升用户体验
属性名：border-radius
常见取值：数字+px、百分比
原理：
- 赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角！
/*一个值：表示4个角是相同的*/
border-radius:10px;
/* 4值：左上 右上 右下 左下--从左上顺时针转一圈*/
border-radius:10px 20px 40px 80px;
/* 从左上开始，按照顺时针转一圈，对应没有的值，取对角的值为当前角的数据*/
border-radius:10px 40px 80px;
border-radius:10px 80px;
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 工作中常用的圆角形式
画一个圆：
- 盒子必须是正方形
- 设置边框圆角为盒子宽高的一半 :
border-radius: 50%
胶囊按钮：
- 盒子要求是长方形
- 设置：
border-radius: 盒子高度的一半
# overflow溢出部分显示效果
溢出部分：指的是盒子内容部分所超出盒子范围的区域
场景：控制内容溢出部分的显示效果，如：显示、隐藏、滚动条
属性名：overflow
常见属性值：
| 属性值 | 效果 |
|---|---|
| visible | 默认值，溢出部分可见 |
| hidden | 溢出部分隐藏 |
| scroll | 无论是否溢出，都显示滚动条； 滚动：无论内容是否超出都显示滚动条的位置 |
| auto | 根据是否溢出，自动显示或隐藏滚动条；根据内容是否超出，判断是否显示滚动条 |
工作常用：idden、auto
# 元素本身隐藏
使用场景：网站导航中导航下的向下小箭头，点击显示出来，默认是隐藏的状态
场景：让某元素本身在屏幕中不可见。如：鼠标：hover之后元素隐藏
常见属性：
- visibility:hidden =>占位隐藏
- display:none => 不占位隐藏
# 案例
定位中的导航二维码隐藏
<head>
<style>
ul 1i .app {
position:relative; /*父级相对定位*/
}
.code{
position:absolute; /*子级绝对定位，绝对定位不占位置*/
left:50%; /*居中*/
top:41px; /*向下一点*/
transform:translate(-50%); /*水平居中*/
/*默认隐藏*/
display:none;
}
/*鼠标悬停a ,显示二维码图片*/
.nav li a:hover img {
display:block;
}
</style>
</head>
<body>
<!--导航-->
<div class="nav">
<ul>
<1i><a href="#">我要投资</a></1i>
<1i><a href="#">平台介绍</a></li>
<1i><a href="#">新手专区</a></1i>
<!--因为用户鼠标放在二维码图片上也能跳转，所以证明img也是在a的范围内，因此把img写在a标签的内部-->
<li><a href="#”class="app">手机微金所
<img src="./images/code.jpg”alt=""class="code"></a></li>
<1i class="last"><a href="#">个人中心</a></li>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
# 元素整体透明度
(拓展)元素整体透明度场景：让某元素整体（包括内容）一起变透明
属性名：opacity
属性值：0~1之间的数字
- 1：表示完全不透明
- 0：表示完全透明
注意点：opacity会让元素整体透明，包括里面的内容，如：文字、子元素等
上次更新: 2024/07/10, 18:38:04