CSS随手记(持续)

  • start date: 2018-08-27 13:00:45

CSS: CSS (Cascading Style Sheets) is a declarative language that controls how webpages look in the browser.

通用

1 尴尬的文字溢出显示”…”

单行:

1
2
3
4
5
p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

多行:

1
2
3
4
5
6
p {
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; /* 2行 */
-webkit-box-orient: vertical;
}

2 处理display: inline-block元素间隔的空隙

解决方案:将它父元素的 fotn-size 设置为0

原因:将两个或多个元素设置为 display: inline-block 或 display: inline 时,会在他们之间制造出一个小的空间,因为浏览器把这些元素解释成了单词,所以会在他们之间添加一个字符的间距。

如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
ul {
font-size: 0;
}
li {
font-size: 16px;
display: inline-block;
}
</style>
<ul>
<li>li 1</li>
<li>li 2</li>
<li>li 3</li>
</ul>

3 当字体颜色跟border颜色相同时可简化

定义了一个元素的文字颜色,意味着这个元素的边框颜色也被定义了。

如:

1
2
3
4
.u-btn {
color: red;
border: 1px solid;
}

4 伪元素:first-letter

“first-letter” 伪元素用于向文本的首字母设置特殊样式。

:first-letter 伪元素选择一个块的第一行(第一个格式化行块)的第一个字符,如果这一行中在它前面没有跟着任何其它内容(例如图片或者 inline table)的话。表格单元或者inline-block 元素的首字母不能作为其祖先元素的首字母。

如:

1
2
3
4
5
6
7
8
9
10
11
12
<style>
.m-txt {
color: #000;
}
.m-txt:first-letter {
color: red;
}
</style>

<p class="m-txt">“some text”</p>
<p class="m-txt">some text</p>
<p class="m-txt"><img src="test.png"/>some text</p>

5 font-size能用偶数用偶数

奇数的font-size容易导致文字偏移,易发生在pc某些浏览器及安卓设备上。

*兼容:PC、移动基本都兼容。

box-flex属性

CSS3属性。box-flex 属性规定框的子元素是否可伸缩其尺寸。默认值为0.0(不可伸缩)

可伸缩元素能够随着框的缩小或扩大而缩写或放大。只要框中有多余的空间,可伸缩元素就会扩展来填充这些空间。

语法:

1
box-flex: value;

其中:

  • value:元素的可伸缩行。柔性是相对的,例如 box-flex 为 2 的子元素两倍于 box-flex 为 1 的子元素。

如:
定义两个可伸缩的 p 元素。如果父元素的总宽度是 300 像素,则 #p1 的宽度是 100 像素,而 #p2 的宽度是 200。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<style>
#p1
{
-moz-box-flex:1.0; /* Firefox */
-webkit-box-flex:1.0; /* Safari 和 Chrome */
box-flex:1.0;
}

#p2
{
-moz-box-flex:2.0; /* Firefox */
-webkit-box-flex:2.0; /* Safari 和 Chrome */
box-flex:2.0;
}
</style>

<div style="width: 300px;">
<p id="p1" style="border: thin solid red">p1</p>
<p id="p2" style="border: thin solid blue">p2</p>
</div>

6 hsl()和hsla()

主要用途在于预处理less在处理fadein()等颜色函数时需要使用hsl颜色。

  • H(Hue)是色度,取值在0度~360度之间,0度是红色,120度是绿色,240度是蓝色。360度也是红色。
  • S(Saturation)是饱和度,是色彩的纯度,是一个百分比的值,取值在0%~100%,0%饱和度最低,100%饱和度最高
  • L(Lightness)是亮度,也是一个百分比值,取值在0%~100%,0%最暗,100%最亮。
  • A(Alpha)是不透明度,取值在0.0~1.0,0.0完全透明,1.0完全不透明。


1
2
3
4
body {
color: hsl(200, 100%, 80%);
background-color: hsla(0,100%,80%,0.5)
}

兼容:IE9及以上,移动全兼容。

7 currentColor 当前的文字颜色

css3标准中一个关键字,表示当前的标签所继承的文字颜色。


1
2
3
4
5
.m-test {
color: #333;
border: 1px solid currentColor;
background-color: currentColor;
}

在此border的border-color,背景色background-color也为#333;

特色,根据当前颜色确定currentColor的值

举个例子

1
2
3
<p class="m-ctn">
<span class="m-test"></span>
</p>

1
2
3
4
.m-ctn { color: red; }
.m-test {
background-color: currentColor;
}

则在此m-test的背景色background-color为red;

兼容

currentColor

兼容情况已经很好。

8 ::selection选中文字的颜色

通过该选择器可设置文字被选择时的样式。


1
2
3
4
p::selection {
background-color: red;
color: white;
}

兼容

selection

兼容情况已经很好。

9 BFC和IFC

Box

一个页面是由很多个 Box 组成的,元素的类型和 display 属性决定了这个 Box 的类型。不同类型的 Box,会参与不同的 Formatting Context。

  • Block level的box会参与形成BFC,比如display值为block,list-item,table的元素。
  • Inline level的box会参与形成IFC,比如display值为inline,inline-table,inline-block的元素。

IFC

在行内格式化上下文中,框(boxes)一个接一个地水平排列,起点是包含块的顶部。水平方向上的 margin,border 和 padding在框之间得到保留。框在垂直方向上可以以不同的方式对齐:它们的顶部或底部对齐,或根据其中文字的基线对齐。包含那些框的长方形区域,会形成一行,叫做行框。

BFC

块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。

下列方式会创建块格式化上下文:

  • 根元素或包含根元素的元素
  • 浮动元素(元素的 float 不是 none)
  • 绝对定位元素(元素的 position 为 absolute 或 fixed)
  • 行内块元素(元素的 display 为 inline-block)
  • 表格单元格(元素的 display为 table-cell,HTML表格单元格默认为该值)
  • 表格标题(元素的 display 为 table-caption,HTML表格标题默认为该值)
  • 匿名表格单元格元素(元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group(分别是HTML table、row、tbody、thead、tfoot的默认属性)或 inline-table)
  • overflow 值不为 visible 的块元素
  • display 值为 flow-root 的元素
  • contain 值为 layout、content或 strict 的元素
  • 弹性元素(display为 flex 或 inline-flex元素的直接子元素)
  • 网格元素(display为 grid 或 inline-grid 元素的直接子元素)
  • 多列容器(元素的 column-count 或 column-width 不为 auto,包括 column-count 为 1)
  • column-span 为 all 的元素始终会创建一个新的BFC,即使该元素没有包裹在一个多列容器中(标准变更,Chrome bug)。

块格式化上下文对浮动定位(参见 float)与清除浮动(参见 clear)都很重要。浮动定位和清除浮动时只会应用于同一个BFC内的元素。浮动不会影响其它BFC中元素的布局,而清除浮动只能清除同一BFC中在它前面的元素的浮动。外边距折叠(Margin collapsing)也只会发生在属于同一BFC的块级元素之间。

10.控制属性继承

CSS为处理继承提供了四种特殊的通用属性值:

  • inherit: 该值将应用到选定元素的属性值设置为与其父元素一样。
  • initial: 该值将应用到选定元素的属性值设置为与浏览器默认样式表中该元素设置的值一样。如果浏览器默认样式表中没有设置值,并且该属性是自然继承的,那么该属性值就被设置为 inherit。
  • unset :该值将属性重置为其自然值,即如果属性是自然继承的,那么它就表现得像 inherit,否则就是表现得像 initial。
  • revert :如果当前的节点没有应用任何样式,则将该属性恢复到它所拥有的值。换句话说,属性值被设置成自定义样式所定义的属性(如果被设置), 否则属性值被设置成用户代理的默认样式。

11.overflow的默认值不是auto

overflow:

  • auto: 当内容过多,溢流的内容被隐藏,然后出现滚动条来让我们滚动查看所有的内容。
  • hidden: 当内容过多,溢流的内容被隐藏。
  • visible: 当内容过多,溢流的内容被显示在盒子的外边(这个是默认的行为)

移动端

1 取消页面tap交互蒙层或改变蒙层颜色

WebKit私有属性-webkit-tap-highlight-color。

1
2
3
4
5
6
body{
-webkit-tap-highlight-color: transparent; /* 透明 */
}
.f-tap_red{
-webkit-tap-highlight-color: rgba(255, 0, 0, .5); /* 50%透明的红 */
}

2 input placeholder样式修改

-webkit-input-placeholder选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
input::-webkit-input-placeholder{
color: blue;
font-size: 20px;
}
input:focus::-webkit-input-placeholder{
color: red;
font-size: 22px;
font-weight: bold;
}


::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #909;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #909;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #909;
}

3 禁止用户选中文字

属性user-select。

1
2
3
4
5
body {
-webkit-user-select:none;
-moz-user-select: none;
user-selectnone;
}

语法

user-select:none(文本不能被选择) | text(可以选择文本) | all(当所有内容作为一个整体时可以被选择。如果双击或者在 上下文上点击子元素,那么被选择的部分将是以该子元素 向上回溯的最高祖先元素。) | element(可以选择文本,但选择范围受元素边界的约束)

  • 默认值:text
  • 适用于:除替换元素外的所有元素
  • 继承性:无
  • 动画性:否
  • 计算值:指定值

4 ios弹性滚动控制

属性-webkit-overflow-scrolling。
值:

  • auto:使用普通滚动, 当手指从触摸屏上移开,滚动会立即停止。
  • touch:使用具有回弹效果的滚动,当手指从触摸屏上移开,内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。
1
2
3
-webkit-overflow-scrolling: touch; /* 当手指从触摸屏上移开,会保持一段时间的滚动 */

-webkit-overflow-scrolling: auto; /* 当手指从触摸屏上移开,滚动会立即停止 */

5 模糊

filter: blur

1
2
3
	-webkit-filter: blur(0.093rem);
filter: blur(0.093rem);
`

6 垂直居中

6.1 固定宽高+margin,适用于pc

1
2
3
4
5
6
7
8
9
10
11
.parent {
position: relative;
}
.parent .child {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
margin: -50px 0 0 -50px;
}

6.2 未知宽高+transform

1
2
3
4
5
6
7
8
9
.parent {
position: relative;
}
.parent .child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

6.3 flex

1
2
3
4
5
6
7
.parent {}
.parent .child {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}

6.4 table

1
2
3
4
5
6
7
.parent {
display: table;
}
.parent .child {
display: table-cell;
vertical-align: middle;
}

7 will-change开启硬件加速

我们可能听听说过,3D transform会启用GPU加速,例如translate3D, scaleZ之类,但是呢,这些属性业界往往称之为hack加速法。我们实际上不需要z轴的变化,但是还是假模假样地声明了。will-change则天生为此设计,顾名思意“我要变形了”,从而通知GPU开启加速。


1
2
3
.f-test {
will-change: transform; // 创建新的渲染层
}

属性值

  • auto:没什么卵用,估计就是用来重置其他比较屌的值。
  • scroll-position:告诉浏览器,我要开始翻滚了。
  • contents:告诉浏览器,内容要动画或变化了。
  • :顾名思意,自定义的识别。非规范称呼,应该是MDN自己的称呼,以后可能会明确写入规范。比方说animation的名称,计数器counter-reset, counter-increment定义的名称等等。

  • 可动画的一些特征值。比方说left, top, margin之类。移动端,非transform, opacity属性的动画性能都是低下的,所以都是建议避免使用left/top/margin之流进行唯一等。

其他注意事项及文档见:MDN will-change

兼容

will-change

移动端兼容较好,android需要5及以上

在动画结束后可适当删除这个属性

8 image-set() 根据用户设备加载不同图片

image-set() 可以根据用户设备的分辨率匹配合适的图像。


1
2
3
div {
background-image: image-set( url(test.png) 1x, url(test-2x.png) 2x );
}

兼容

image-set

移动端基本兼容。

PC端

1 IE7的笑脸hack

如:

1
2
3
body {  
:) background: red;
}

特效

1 渐变背景动画(特效)

demo

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
.f-gradient {
background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
background-size: 400% 400%;
-webkit-animation: Gradient 15s ease infinite;
-moz-animation: Gradient 15s ease infinite;
animation: Gradient 15s ease infinite;
}

@-webkit-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}

@-moz-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}

@keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}

2 诡异文字动画效果

brokenWord
demo

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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
.f-glitch {
position: relative;
}
.f-glitch:before {
content: attr(data-text);
position: absolute;
left: -2px;
text-shadow: 1px 0 blue;
top: 0;
color: white;
background: black;
overflow: hidden;
clip: rect(0, 900px, 0, 0);
animation: noise-anim-2 3s infinite linear alternate-reverse;
}
.f-glitch:after {
content: attr(data-text);
position: absolute;
left: 2px;
text-shadow: -1px 0 red;
top: 0;
color: white;
background: black;
overflow: hidden;
clip: rect(0, 900px, 0, 0);
animation: noise-anim 2s infinite linear alternate-reverse;
}

@keyframes noise-anim-2 {
0% {
clip: rect(29px, 9999px, 53px, 0);
}
5% {
clip: rect(61px, 9999px, 53px, 0);
}
10% {
clip: rect(72px, 9999px, 26px, 0);
}
15% {
clip: rect(44px, 9999px, 39px, 0);
}
20% {
clip: rect(21px, 9999px, 48px, 0);
}
25% {
clip: rect(93px, 9999px, 33px, 0);
}
30% {
clip: rect(26px, 9999px, 80px, 0);
}
35% {
clip: rect(42px, 9999px, 31px, 0);
}
40% {
clip: rect(14px, 9999px, 60px, 0);
}
45% {
clip: rect(75px, 9999px, 9px, 0);
}
50% {
clip: rect(70px, 9999px, 50px, 0);
}
55% {
clip: rect(65px, 9999px, 29px, 0);
}
60% {
clip: rect(12px, 9999px, 84px, 0);
}
65% {
clip: rect(16px, 9999px, 84px, 0);
}
70% {
clip: rect(8px, 9999px, 14px, 0);
}
75% {
clip: rect(57px, 9999px, 39px, 0);
}
80% {
clip: rect(61px, 9999px, 33px, 0);
}
85% {
clip: rect(73px, 9999px, 11px, 0);
}
90% {
clip: rect(29px, 9999px, 70px, 0);
}
95% {
clip: rect(41px, 9999px, 69px, 0);
}
100% {
clip: rect(62px, 9999px, 67px, 0);
}
}
@keyframes noise-anim {
0% {
clip: rect(42px, 9999px, 100px, 0);
}
5% {
clip: rect(1px, 9999px, 66px, 0);
}
10% {
clip: rect(63px, 9999px, 21px, 0);
}
15% {
clip: rect(58px, 9999px, 48px, 0);
}
20% {
clip: rect(22px, 9999px, 60px, 0);
}
25% {
clip: rect(39px, 9999px, 78px, 0);
}
30% {
clip: rect(48px, 9999px, 84px, 0);
}
35% {
clip: rect(49px, 9999px, 73px, 0);
}
40% {
clip: rect(75px, 9999px, 57px, 0);
}
45% {
clip: rect(49px, 9999px, 20px, 0);
}
50% {
clip: rect(57px, 9999px, 38px, 0);
}
55% {
clip: rect(100px, 9999px, 38px, 0);
}
60% {
clip: rect(54px, 9999px, 17px, 0);
}
65% {
clip: rect(65px, 9999px, 18px, 0);
}
70% {
clip: rect(92px, 9999px, 5px, 0);
}
75% {
clip: rect(4px, 9999px, 34px, 0);
}
80% {
clip: rect(31px, 9999px, 3px, 0);
}
85% {
clip: rect(1px, 9999px, 10px, 0);
}
90% {
clip: rect(4px, 9999px, 14px, 0);
}
95% {
clip: rect(44px, 9999px, 94px, 0);
}
100% {
clip: rect(27px, 9999px, 26px, 0);
}
}