大涛子客栈

总结在平时开发中遇到的一些小问题,大概很长一段时间就会来这么一次,小片段剧场.

页面布局

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;

关于 ios 下的 input 输入框光标上移的问题

一般外框设置高度为auto,取消掉line-height,input 本身设置字号大小,使用 padding 撑开,取消’height、line-height’

下拉框箭头重写

1
2
3
4
5
6
7
8
9
10
11
12
13
/* --ie清除--*/
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>
  • ~ 选择器:查找某个元素后面的所有兄弟元素
  • + 选择器:查找某个元素后面紧邻的兄弟元素

多列等高问题

  1. padding + margin:每列设置一个比较大的padding-bottom,然后通过取负值的 margin-bottom,缺点很明显:如下方无法看到圆角,无法看到 border-bottom
  2. display: table
  3. display: 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

学习资料

 评论