0%

CSS进阶知识

CSS进阶知识补充

background

语法

background:bg-color bg-image bg-repeat bg-attachment bg-position/bg-size;

eg: background: red url('./background.png') no-repeat fixed center/cover;

说明CSS
background-color指定要使用的背景颜色1
background-position指定背景图像的位置1
background-size指定背景图片的大小3
background-repeat指定如何重复背景图像1
background-origin指定背景图像的定位区域3
background-clip指定背景图像的绘画区域3
background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。1
background-image指定要使用的一个或多个背景图像1

opacity、visibility、display

介绍opacityvisibilitydisplay
作用设置透明度设置元素是否可见设置元素的显示类型
是否占据页面空间
是否影响子元素
是否可触发绑定事件
是否产生回流(reflow)
是否产生重绘(repaint)不一定
是否支持transition否(还会让transition失效)

注意:

1
2
3
4
5
6
7
visibility 和 display 属性是不会影响其他元素触发事件的,而 opacity 属性 如果遮挡住其他元素,其他的元素就不会触发事件了。 

回流:当页面中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建。这就称为回流(也有人会把回流叫做是重布局或者重排)。每个页面至少需要一次回流,就是在页面第一次加载的时候。

重绘:当页面中的一些元素需要更新属性,而这些属性只是影响元素的外观,风格,而不会影响布局的时候,比如background-color。则称为重绘。

回流必将引起重绘,而重绘不一定会引起回流。

css可继承与不可继承的属性

无继承性的属性

  1. display:规定元素的显示类型

  2. 文本属性:

  • vertical-align:垂直文本对齐

  • text-decoration:规定添加到文本的装饰

  • text-shadow:文本阴影效果

  • white-space:空白符的处理

  • unicode-bidi:设置文本的方向

  1. 盒子模型的属性:width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、border-style、border-top-style、border-right-style、border-bottom-style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、padding-left

  2. 背景属性:background、background-color、background-image、background-repeat、background-position、background-attachment

  3. 定位属性:float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index

  4. 生成内容属性:content、counter-reset、counter-increment

  5. 轮廓样式属性:outline-style、outline-width、outline-color、outline

  6. 页面样式属性:size、page-break-before、page-break-after

  7. 声音样式属性:pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

有继承性的属性

  1. 字体系列属性
  • font:组合字体

  • font-family:规定元素的字体系列

  • font-weight:设置字体的粗细

  • font-size:设置字体的尺寸

  • font-style:定义字体的风格

  • font-variant:设置小型大写字母的字体显示文本,这意味着所有的小写字母均会被转换为大写,但是所有使用小型大写字体的字母与其余文本相比,其字体尺寸更小。

  • font-stretch:对当前的 font-family 进行伸缩变形。所有主流浏览器都不支持。

  • font-size-adjust:为某个元素规定一个 aspect 值,这样就可以保持首选字体的 x-height。

  1. 文本系列属性
  • text-indent:文本缩进

  • text-align:文本水平对齐

  • line-height:行高

  • word-spacing:增加或减少单词间的空白(即字间隔)

  • letter-spacing:增加或减少字符间的空白(字符间距)

  • text-transform:控制文本大小写

  • direction:规定文本的书写方向

  • color:文本颜色

  1. 元素可见性:visibility

  2. 表格布局属性:caption-side、border-collapse、border-spacing、empty-cells、table-layout

  3. 列表布局属性:list-style-type、list-style-image、list-style-position、list-style

  4. 生成内容属性:quotes

  5. 光标属性:cursor

  6. 页面样式属性:page、page-break-inside、windows、orphans

  7. 声音样式属性:speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation

所有元素可以继承的属性

  1. 元素可见性:visibility

  2. 光标属性:cursor

内联元素可以继承的属性

  1. 字体系列属性

  2. 除text-indent、text-align之外的文本系列属性

块级元素可以继承的属性

  1. text-indent、text-align

浏览器默认属性值问题

  由于各浏览器对于HTML标签都存在预设值,所以为了让我们设计的页面在不同的浏览器上显示效果相同,就需要用resetcss

  世界知名的 CSS 大师「Eric A. Meyer」整理出一个很棒的解决方法,针对 CSS 语法最容易出问题的部份。例如 margin 外间距,各大浏览器最常发生不一致的状况,写成了一个 Reset CSS 档案,将 margin  全部统一归 0 ,其他部份,文字大小和行高也全部统成一样的大小 … 等,只要挂上这一段「Reset CSS」语法,就可以让所有的各大浏览器乖乖听话,呈现一样的结果,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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
/* http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126
License: none (public domain)
doubleam get 20191126
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

一些简单样式汇总

cursor样式

list-style-type样式

border样式

checkbox与radio与文字水平对齐

1
2
3
4
5
6
/* 其实很简单,只需要给对齐的元素都添加vertical-align:middle;属性即可。 */

<label>
<input type="checkbox" value="A" style="vertical-align:middle;">
<span style="vertical-align:middle;">B</span>
</label>

图片等比例缩放、翻转等

图片等比例缩放

在img标签里面只设置宽,不设置高,图片就会等比例缩放。

也可以使用css属性调整图片显示位置,或者使用background来调整亦可。

1
2
object-fit: cover;
object-position: center;

使用 padding 解决

1
2
3
4
5
如果原始图片大小是 800 * 250,即宽高比为 800 / 250 = 3.2。
我们可以给图片的父元素设置 padding 来保持图片本身的宽高比。
当 img 的宽度为 100% 时,那么父元素的 padding-bottom/top(任意一个均可) 的值为 100%(图片想要设置的宽度) / 3.2(图片的原始宽高比) = 31.25%。
如果你想把 img 的宽度设为 50% 的话,那么 padding-bottom/top 的值为 50% / 3.2 = 15.625%。
这样设置后,无论页面如何变动,图片的比例都不会出问题。

图片翻转

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
/*水平翻转*/
.flipx {
-moz-transform:scaleX(-1);
-webkit-transform:scaleX(-1);
-o-transform:scaleX(-1);
transform:scaleX(-1);
/*IE*/
filter:FlipH;
}

/*垂直翻转*/
.flipy {
-moz-transform:scaleY(-1);
-webkit-transform:scaleY(-1);
-o-transform:scaleY(-1);
transform:scaleY(-1);
/*IE*/
filter:FlipV;
}

/*水平翻转*/
.flipx { transform: rotateY(180deg); }

/*垂直翻转*/
.flipy { transform: rotateX(180deg); }

水平居中的方式

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
text-align:center;          //文本水平居中

/* 自身 */
margin:0 auto; //块级元素水平居中

/* 父元素 */
.flex-center{ //使用flex
display:flex;
justify-content:center;
}

/* 父元素 */
.flex-center{ //使用flex
display:flex;
flex-direction:column;
align-items:center;
}

/* 父元素 */
.flex-center{ //使用flex
display:flex;
flex-direction:column;
}
.flex-center>div{
align-self:center;
}

父元素相对定位 子元素绝对定位 然后设置 left:50%; margin-left:子元素宽度的一半;(已知宽高)

/* 自身 */
.center{
position:absolute;
left: 0;
right: 0;
margin: auto;
}

/* 自身 */
.center{
position: absolute;
left:50%;
transform: translateX(-50%);
}

垂直居中的方式

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
paddingtop=paddingbottom; or line-height=height;    //文本垂直居中

/* 父元素 */
.flex-center{ //使用flex
display:flex;
align-items:center;
}

/* 父元素 */
.flex-center{ //使用flex
display:flex;
flex-direction:column;
justify-content:center;
}

/* 父元素 */
.flex-center{ //使用flex
display:flex;
flex-direction:row;
}
.flex-center>div{
align-self:center;
}

父元素相对定位 子元素绝对定位 然后设置 top:50%; margin-top:子元素高度的一半;(已知宽高)

/* 自身 */
.center{
position:absolute;
top: 0;
bottom: 0;
margin: auto;
}

/* 自身 */
.center{
position: absolute;
top:50%;
transform: translateY(-50%);
}

/* 父元素 */
.center{
display: table-cell;
vertical-align: middle;
}
/* 也可用于多行文本垂直居中 */

水平垂直居中

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
<!-- 方法1:绝对定位+margin:auto; -->
.child{
position:absolute;
left:0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}

<!-- 方法2:绝对定位+负margin(已知宽高) -->
.child{
position: absolute;
left:50%;
top:50%;
margin-left:-100px; //自身的宽度一半
margin-top:-100px; //自身高度的一半
}

<!-- 方法3:绝对定位+transform -->
.child{
position:absolute;
left:50%; //定位父级的50%
top:50%;
transform: translate(-50%,-50%); //自己的50%
}

<!-- 方法4flex布局 -->
/* 父元素只要三句话就可以实现不定宽高水平垂直居中。 */
.parent{
height:600px;
display:flex;
//flex-direction:row;元素水平排列,垂直排列为column。row为默认值所以可以不写。
justify-content:center; //子元素水平居中
align-items:center; //子元素垂直居中
}

<!-- 方法5table-cell实现居中 -->
.parent{
display:table-cell;
vertical-align: middle;
}
.child{
margin: 0 auto; //子元素margin:auto;或者margin:0 auto;均可
}
/* 也可用于多行文本垂直居中,直接编写文本即可。 */

CSS单行、多行文本溢出/换行

单行溢出

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

多行溢出

1
2
3
4
5
6
7
8
.text-truncate-multiple {
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
/* 只适用于 webkit 内核浏览器,其他浏览器也借助伪类、绝对定位或js来实现此效果。 */

完美换行

1
2
3
4
5
6
.text-wrap {
word-break: keep-all;
word-wrap: break-word;
white-space: pre-wrap;
}
/* 腾讯 Alloyteam 推荐 */

CSS Overflow

overflow: auto|visible|hidden|scroll|inherit;

  • auto 自动产生滚动条,哪个方向超出了就出现滚动条。
  • visible 不显示滚动条,但是超出部分会显示。
  • hidden 不显示滚动条,超出部分不会显示。
  • scroll 显示滚动条,就算某个方向没超出也会显示。
  • inherit 继承父元素的设置

CSS动画基本语法

transform

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
transform: translate(x, y);      //偏移
x: X 轴偏移量,可为百分比。
y: Y 轴偏移量,可为百分比。

transform: rotate(ndeg); //旋转
预设以元素中心为旋转中心点
正数值为顺时钟旋转
负数值为逆时钟旋转
需加 deg 单位

transform-origin: x y; //旋转中心点
x: X 轴偏移量,可为百分比、left、center、right。
y: Y 轴偏移量,可为百分比、top、center、bottom。

transform: scale(w-rate, h-rate);//缩放
w-rate: 宽度缩放倍率
h-rate: 高度缩放倍率

transform: skew(xdeg, ydeg); //扭转
x: 沿着 x 轴扭转
y: 沿着 y 轴扭转
需加 deg 单位
transform: skewX(xdeg); //沿着 x 轴扭转
transform: skewY(ydeg); //沿着 y 轴扭转

transform: translateX(x); //x 轴偏移
transform: translateY(y); //y 轴偏移
transform: translateZ(z); //z 轴偏移
不可为百分比
需搭配 perspective
transform: translate3d(x, y, z); //xyz 偏移

transform: rotateX(xdeg); //沿着 x 轴旋转
transform: rotateY(ydeg); //沿着 y 轴旋转
transform: rotateZ(zdeg); //沿着 z 轴旋转
transform: rotate3d(x, y, z, adeg);
x, y, z: 01
0 表不沿着该轴旋转, 1 表沿着该轴旋转。
a: 旋转角度

transform: scaleX(rate); //沿着 x 轴缩放 (胖瘦)
transform: scaleY(rate); //沿着 y 轴缩放 (高矮)
transform: scaleZ(rate); //沿着 z 轴缩放
须搭配其他变形
transform: scale3d(x, y, z);

transition

1
2
3
4
5
6
7
8
9
10
11
12
transition                       //转场动画
transition-property //属性名称
all (default);
transition-duration //效果持续时间 (单位 s, ms)
0s (default,不会有效果)
transition-timing-function //加速度曲线
linear //均速
ease //先加速后减速 (default)
ease-in //加速
ease-out //减速
ease-in-out //平缓的先加速后减速
transition-delay //延迟播放 (单位 s, ms)

animation

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
/* from and to */
@keyframes animation-name{
from{
/* 起始样式 (相当于 0%) */
}
to{
/* 结束样式 (相当于 100%) */
}
}

/* 进度百分比 */
@keyframes animation-name{
0%{
/* 起始样式 (相当于 from) */
}
50%{
/* 50% 样式 */
}
100%{
/* 结束样式 (相当于 to) */
}
}

animation //动画
animation-name //动画名称
animation-duration //动画持续时间 (单位 s, ms)
animation-timing-function //加速度曲线
linear //均速
ease //先加速后减速 (default)
ease-in //加速
ease-out //减速
ease-in-out //平缓的先加速后减速

animation-delay //延迟播放
animation-iteration-count //播放次数 (infinite: 无限循环)
animation-direction //播放方向
normal //0% ~ 100% (default)
reverse //100% ~ 0%
alternate //0% ~ 100%100% ~ 0%
alternate-reverse //100% ~ 0%0% ~ 100%
------------------------------
animation-fill-mode //播放前后的状态
none //回到未播放动画效果前 (default)
forwards //停在最后一个状态上
backwards //停在第一个状态上
both //视 animation-direction
animation-play-state //播放或暂停
running //播放 (default)
paused //暂停

BFC

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

设计哲学

RWD

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
常用绝对单位
px
pt

常用相对单位
% (以父节点为基准的百分比)
em (预设 16px)
rem (root em,预设 16px),我们也可以通过 html { font-size: xxx; } 来设置。

em 和 rem
em = 父节点大小(其实就是本身的基准大小,主要是本身未设置时默认继承父元素的大小。) * em倍数
rem = 根节点大小 * rem倍数

响应式网页设计 (Responsive Web Design)
网页的设计可以自动适应不同访问设备(计算机, 平板, 手机。)
单纯透过 CSS Media Query 控制,不须维护第二套程序码。

强调使用
相对单位 (%, rem, em)
流动、弹性的设计 (inline-block, float…)

mata-viewport可视区域
user-scalable=no
取消移动装置的缩放功能

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Media Queries 与界面容器

为了让不同使用者的荧幕分辨率可以获得最佳浏览效果,根据荧幕分辨率,制定不同大小的界面容器,增加使用者体验。

1
2
3
@media screen and (min-width: width-a) and (max-width: width-b) {
/* 符合条件,套用的样式 */
}

常见的界面容器宽度

其他

1
2
3
4
5
6
7
8
!important                  //避免样式被覆盖

:not() //非
:not(:first-child) //不是第一个子节点的
:not(:empty) //非空

calc() //不同单位计算
left: calc(100% - 200px) //100%-200px

content-visibility: auto; 优化长列表渲染,若 img 这种元素的高度是有图片内容决定的,还需要使用 contains-intrinsic-size 属性来优化。

bulb