总结在平时开发中遇到的一些小问题，大概很长一段时间就会来这么一次，小片段剧场.
页面布局
white-space | word-break | word-wrap
white-space
控制空白字符的显示，同时还能控制是否自动换行。它有五个值：normal | nowrap | pre | pre-wrap | pre-line
word-break
控制单词如何被拆分换行。它有三个值：normal | break-all | keep-all
word-wrap（overflow-wrap）
控制长度超过一行的单词是否被拆分换行，是 word-break 的补充，它有两个值：normal | break-word
兼容 Windows、Mac 的 font-family
1
2
3
| font-family: Helvetica Neue For Number, -apple-system, BlinkMacSystemFont,
Segoe UI, Roboto, PingFang SC, "PingFangSC-Light", "Microsoft yahei", Arial,
Helvetica, sans-serif;
|
一般外框设置高度为auto,取消掉line-height,input 本身设置字号大小，使用 padding 撑开，取消’height、line-height’
下拉框箭头重写
1
2
3
4
5
6
7
8
9
10
11
12
13
|
select::-ms-expand {
display: none;
}
select {
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
padding-right: 30px !important;
background: #fafafb url("/select-logo.png") 98% 50% no-repeat !important;
}
|
用 CSS 写三角形箭头
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
| .wx-wper-con {
position: absolute;
left: 0;
top: 40px;
width: 158px;
height: auto;
background-color: #fff;
border: 1px solid #e9e9e9;
padding: 0px 5px;
text-align: center;
z-index: 100;
box-shadow: 0 0 6px -2px #aaa;
}
.wx-wper-con:before,
.wx-wper-con:after {
position: absolute;
top: -9.5px;
right: 20px;
display: inline-block;
border-right: 8px solid transparent;
border-bottom: 8px solid #dadada;
border-left: 8px solid transparent;
content: "";
}
.wx-wper-con:after {
top: -8.5px;
border-bottom: 8px solid #fff;
}
|
border 边框渐变+圆角
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| .border-test {
width: 200px;
height: 200px;
position: relative;
border: 4px solid transparent;
background-color: #fff;
border-top-right-radius: 50px;
background-clip: padding-box;
}
.border-test::after {
content: "";
display: block;
position: absolute;
top: -4px;
right: -4px;
bottom: -4px;
left: -4px;
border-top-right-radius: 50px;
background: linear-gradient(155deg, red, blue);
z-index: -1;
}
|
文字两端对齐
1
2
| text-align: justify;
text-align-last: justify;
|
每个单词的首字母大写
1
| text-transform: uppercase;
|
这是 CSS2 中的属性，参数有 capitalize | uppercase | lowercase | none
参数介绍：
- none： 默认。定义带有小写字母和大写字母的标准的文本。
- capitalize： 文本中的每个单词以大写字母开头。
- uppercase： 定义仅有大写字母。
- lowercase： 定义无大写字母，仅有小写字母。
单选高亮
原文
1
2
3
4
5
6
7
8
9
| .input:checked + .colors {
border-color: #e63838;
color: #e63838;
}
<div class="single-check">
<input class="input" type="radio" name="colors" value="1">
<div class="colors">天空之境</div>
</div>
|
~ 选择器：查找某个元素后面的所有兄弟元素+ 选择器：查找某个元素后面紧邻的兄弟元素
多列等高问题
padding + margin：每列设置一个比较大的padding-bottom，然后通过取负值的 margin-bottom，缺点很明显：如下方无法看到圆角，无法看到 border-bottom 等display: tabledisplay: flex
1px 方案
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
| .min-device-pixel-ratio(@scale2, @scale3) {
@media screen and (min-device-pixel-ratio: 2),
(-webkit-min-device-pixel-ratio: 2) {
transform: @scale2;
}
@media screen and (min-device-pixel-ratio: 3),
(-webkit-min-device-pixel-ratio: 3) {
transform: @scale3;
}
}
.border-1px(@color: #DDD, @radius: 2px, @style: solid) {
&::before {
content: "";
pointer-events: none;
display: block;
position: absolute;
left: 0;
top: 0;
transform-origin: 0 0;
border: 1px @style @color;
border-radius: @radius;
box-sizing: border-box;
width: 100%;
height: 100%;
@media screen and (min-device-pixel-ratio: 2),
(-webkit-min-device-pixel-ratio: 2) {
width: 200%;
height: 200%;
border-radius: @radius * 2;
transform: scale(0.5);
}
@media screen and (min-device-pixel-ratio: 3),
(-webkit-min-device-pixel-ratio: 3) {
width: 300%;
height: 300%;
border-radius: @radius * 3;
transform: scale(0.33);
}
}
}
.border-top-1px(@color: #DDD, @style: solid) {
&::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
border-top: 1px @style @color;
transform-origin: 0 0;
.min-device-pixel-ratio(scaleY(0.5), scaleY(0.33));
}
}
|
css 之 flex 和 grid
flex
grid
使用 flex 还是 grid
学习资料
