常见问题
# 文字渐变
.text{
background: linear-gradient(90deg, #FFDCA1 0%, #FF9B70 100%);;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
1
2
3
4
5
2
3
4
5
# 小于1px的边框
.border-06px::before {
content: '';
position: absolute;
top: 0.3px;
left: 0.3px;
width: calc(100% - 0.6px);
height: calc(100% - 0.6px);
border: 0.6px solid #FDDDC0;
border-radius: .08rem;
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 引用字体
- WOFF (Web Open Font Format):
woff
: 这是专门为网页设计的字体格式,支持压缩,具有良好的兼容性。woff2
: 这是 WOFF 的更新版本,具有更好的压缩比和性能
- OpenType
opentype
或otf
: 这是 TrueType 的扩展版本,支持更多的特性和更丰富的字体格式。OpenType 可以包含 TrueType 或 PostScript 字体轮廓。
- Embedded OpenType:
eot
: 这是微软开发的一种字体格式,主要用于 Internet Explorer 浏览器。
- Scalable Vector Graphics:
svg
: 这是基于矢量图形的字体格式,可以在网页中使用矢量图形定义字体。常用于图标字体。
@font-face {
font-family: 'MyFont';
src: url('./fonts/myfont.woff2') format('woff2'),
url('./fonts/myfont.woff') format('woff'),
url('./fonts/myfont.ttf') format('truetype'),
url('./fonts/myfont.svg#MyFont') format('svg');
font-weight: normal;
font-style: normal;
font-display: swap;
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 1.flex布局最后一行列表左对齐
当使用flex布局的时候,justify-content
属性用于控制列表水平对齐,设置space-between
表示其两端对齐
但是当最后一列中的个数不满,则最后一行则不会靠左对齐,而是两边对齐,中间居中
# 每行列数固定
- 不使用
justify-content:space-between
来两端对齐,使用margin设置边距.container{ width: 430px; border: 1px solid #ccc; display: flex; flex-wrap: wrap; align-items: center; } .container .item{ width: 100px; height: 100px; background: #ccc; margin-bottom: 10px; } .item:not(:nth-child(4n)){ /* :not 用来匹配不符合选择器的元素,这里指用来匹配不是当前最右边的元素 */ /* 4表示固定列数4列 */ margin-right: calc(30px / 3); }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 - 使用
justify-content:space-between
设置两端对齐,同时单独设置最后一个元素的右边距.container{ width: 430px; border: 1px solid #ccc; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; } .container .item{ width: 100px; height: 100px; background: #ccc; margin-bottom: 10px; } /* 如果最后一行是3个元素,需要加上一个列表的宽度和边距 */ .item:last-child:nth-child(4n - 1) { margin-right: calc(100px + 30px / 3); } /* 如果最后一行是2个元素,需要加上二个列表的宽度和二个列表的边距 */ .item:last-child:nth-child(4n - 2) { margin-right: calc(200px + 60px / 3); }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# 列宽度不固定
- 最后一项
margin-right:auto
.container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.item:last-child{
margin-right: auto;
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
- 包裹盒子创建伪元素并设置flex:auto或flex:1
.container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.container::after{
content: '';
flex:1; /* 或flex:auto */
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 列数不固定
- 使用空白标签进行填充占位
使用足够多的占位标签进行占位,具体的占位数量是由最多列数的个数决定的
<div class="container">
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<i></i><i></i><i></i><i></i><i></i>
</div>
<style>
.container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-right: -10px;
}
.list {
width: 100px; height:100px;
background-color: skyblue;
margin: 15px 10px 0 0;
}
.container > i {
width: 100px;
margin-right: 10px;
}
</style>
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
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
# 列数不固定HTML不能调整
<div class="container">
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
</div>
<style>
.container {
display: grid;
justify-content: space-between;
grid-template-columns: repeat(auto-fill, 100px); /* 不兼容IE */
grid-gap: 10px;
}
.list {
width: 100px; height:100px;
background-color: skyblue;
margin-top: 5px;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
上次更新: 2024/06/25, 17:43:56