CSS

Cascading Style Sheets 层叠样式表

【样式】

（1）内联样式

写在元素的style属性里。

不方便复用。

（2）内部样式

写在head的style标签里。

（3）外部样式

写在外部的css文件里。

【元素之间的关系】

父元素：直接包含子元素的元素。

子元素：直接被父元素包含的元素。

祖先元素：直接或间接包含后代元素的元素。

后代元素：直接或间接被祖先元素包含的元素。

【继承】

祖先元素的样式会被其后代元素继承。

一般，把基本样式设置给祖先元素。

背景相关、边框相关、定位相关的样式不会被继承。

【选择器】

（1）元素选择器

标签名{}

例：span{}

（2）id选择器

#id{}

例：#p1{}

（3）类选择器

.class{}

例：.class1{} 可以为同一元素设置多个class，多个值用空格隔开。

例：< p class="a b c" >< /p >

（4）并集选择器（选择器分组）

选择器1, 选择器2, 选择器3{}

（5）交集选择器（复合选择器）

选择器1选择器2选择器3{}

元素选择器类选择器{}

（6）后代元素选择器

祖先元素后代元素{}

（7）子元素选择器

父元素>子元素{}

不推荐使用，兼容性不佳。

（8）兄弟元素选择器

兄元素+相邻的第一个弟元素{}

兄元素~后边所有的弟元素{}

（9）伪类选择器

元素:first-child

既是元素，又是父元素的第一个子元素。

元素:last-child

元素:nth-child()

括号里填某个数/even/odd。

ie6不支持。

元素:first-of-type

元素:last-of-type

元素:nth-of-type()

元素:not()

否定伪类。

元素:link

普通的链接（没访问过的链接）。

元素:visited

访问过的链接。

只能修改链接的颜色。

元素:hover

鼠标移入。

元素:active

被点击。

元素:focus

获取焦点。

（10）伪元素选择器

元素::first-letter

元素::first-line

元素::selection

选中的内容。

元素::before

p::before{ content:"我会出现在段落的最前面，且不能被选中"; }

元素::after

p::after{ content:"我会出现在段落的最后面，且不能被选中"; }

（11）属性选择器

元素[属性名]

选取指定属性的元素。

p[title]

元素[属性名=""]

选取指定属性值的元素。

p[title="a"]

元素[属性名^=""]

选取以指定内容开头的属性值的元素。

元素[属性名$=""]

选取以指定内容结尾的属性值的元素。

元素[属性名*=""]

选取属性值包含指定内容的元素。

（12）通配选择器

*{}

【选择器的优先级（权重）】

【从上往下，优先级依次降低】

!important：尽量避免使用。

内联样式(1000)

id选择器(100)

类和伪类选择器(10)

元素选择器(1)

通配(0)

继承的样式(没有优先级)

当选择器包含多种选择器时，需要将多种选择器的优先级相加再比较。（并集选择器的优先级是单独计算的）

选择器优先级计算不会超过它的最大数量级（即上一级优先级的大小）。

当选择器的优先级一样时，选择靠后的样式。

【大小单位】

像素px

不同显示器一个像素的大小也不相同；显示效果越好越清晰，像素越小，反之像素越大。

百分比%

相对于父元素的百分比。

em

相对于当前元素的字体大小

1em = 1font-size

rem

相对于根元素(html)的字体大小

vw

视口宽度。

100vw=一个视口宽度。

【颜色单位】

（1）颜色单词

（2）十六进制

#红色绿色蓝色

三组的两位十六进制

两位两位重复的可以简写（三组都是两位两位重复的才可以简写），如#ffff00=#ff0

（3）RGB

rgb(red, green, blue)

0-255

0%-100%

（4）RGBA

rgba(red, green, blue, alpha)

alpha透明度：0-1

（5）HSL

hsl(hue, saturation, lightness)

hue色相：0-360

saturation饱和度：0%-100%

lightness亮度：0%-100%

（6）HSLA

【字体】

（1）color

（2）font-size

默认16px。

最小12px。如果设置小于12px，自动设置为12px。

设置的不是字体本身的大小，是文字框的高度。

px

em

rem

（3）font-family

可以同时指定多个字体，多个字体之间用逗号分开；当采用多个字体时，会优先使用前面的字体，如果前面的字体没有再尝试下一个。

字体名称有空格的加引号。

一般把分类作为最后一个字体，英文字体放在中文字体前面。

字体分类：serif衬线字体，sans-serif非衬线字体，monospace等宽字体，cursive草书字体，fantasy虚幻字体。

font-face可以将服务器中的字体直接提供给用户去使用。

问题：加载速度；版权问题；字体格式。

@font-face{
	/* 指定字体的名字 */
	font-family: 'myfont';
	/* 服务器中字体的路径 */
	src: url('');
}

图标字体

矢量图，不会失真。注意版权问题。

font awesome

下载解压

将css和webfonts移动到项目中

将all.css引入到网页中

使用图标字体

/* 通过类 */
<i class="fab(或者是fas) fa-bell"></i>

/* 
通过实体
&#x实体编码
*/
<span class="fas">&#xf0f3;</span>

/* 
通过伪元素
1、设置编码
2、设置字体样式
fab
font-family: 'Font Awesome 5 Brands';

fas
font-family: 'Font Awesome 5 Free';
font-weight: 900;
*/
li::before{
	content: '\f1b0';
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	color: blue;
	margin-right: 10px;
}

阿里字体库

下载解压

将除了html和demo.css外都移动到项目中

将iconfont.css引入到网页中

使用图标字体（类似上面）

（4）font-style

normal

italic斜体

oblique倾斜

inherit

（5）font-weight

normal：400

bold：700

bolder

lighter

数值（100-900）：一般用户的计算机往往没有那么多级别的字体，无法达到想要的效果。

（6）font-variant

normal

small-caps：小型大写字母（所有字母都以大写形式显示，但是小写字母的大写比大写字母的大小小）。

（7）font

浓缩上面的。

font-size和font-family必须写，且在最后。

在font中也可以指定行高，不指定则使用默认值（会存在先后解析导致覆盖问题）。

font-size/line-height font-family

30px/30px "微软雅黑"

性能较好

【行高line-height】

取值：

px

百分比：相对于当前元素字体大小。

整数值：相对于当前元素字体大小的倍数。在行高中，文字是垂直居中的。

【行间距】

根据上面可以计算：行间距=行高-字体大小。

【文本样式】

（1）text-align

left

right

center

justify：两端对齐（通过调整文本之间的空格大小）

（2）vertical-align

设置文本垂直对齐的方式。

baseline：默认。父子元素基线对齐。

top：顶部对齐。父子元素顶部对齐。

bottom

middle：子元素的中线和x的中线对齐。不是实际意义上的居中。

图片的基线并非图片下边边缘，还有一段距离。如果给图片设置border的话，图片和border之间还有一段空白。可以通过image{ vertical-align: top; }解决。

table相关：元素在td中默认是垂直居中的，可以通过vertical-align、text-align来调整。

（3）text-decoration

none

underline：a标签默认。

overline

line-through

text-decoration: underline red dotted;

chrome和firefox都支持以上写法，ie不支持。

（4）white-space

设置网页如何处理空白。

normal：默认。文本溢出，换行。

nowrap：不换行，加滚动条。

pre：保留预处理格式（代码里写成什么样显示什么样）。

实现网页里标题内容显示不下，用...显示。

.box{
	width: 200px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

（5）letter-spacing

（6）word-spacing

（7）text-transform

none

capitalize：单词首字母大写。

uppercase：所有字母都大写。

lowercase：所有字母都小写。

（8）text-indent

设置首行缩进。

2em

【opacity】

设置元素背景透明度（0-1）。

ie8及以下浏览器不支持：filter:alpha(opacity=50)

【background】

background-color

background-image: url()

背景图片<元素：显示左上角。

背景图片>元素：平铺摆满。

背景颜色在背景图片后面。

渐变是图片！！！（1）线性渐变

background-image: linear-gradient(to top, red, yellow);//从底部到顶部，红色开头，黄色结尾。

第一个属性取值：

①to bottom（默认，可以省略不写）、to top、to left、to right。

②deg，度数。

③turn，1turn=1圈。

第二三……个属性，颜色可以设置多个。

background-image: linear-gradient(red 50px, yellow);//从50px开始渐变。

background-image: repeating-linear-gradient(red 50px, yellow 100px);//重复渐变。

（2）径向渐变

background-image: radial-gradient(100px 100px, red, yellow);//100x100范围内为渐变，范围外为黄色。

background-repeat

repeat：双方向平铺。

no-repeat

repeat-x

repeat-y

background-position

水平位置垂直位置：

使用top、right、left、bottom、center其中两个

百分比

px

background-origin

背景图片偏移量的原点。

padding-box：默认值。

content-box

border-box

background-size

设置背景图片的大小。

第一个值表示宽度，第二个值表示高度：只写一个，则第二个值默认是auto

cover：图片的比例不变，将元素铺满（高度为元素高度，宽度等比例缩放）

contain：图片的比例不变，将图片在元素中完整显示（宽度为元素宽度，高度等比例缩放）

background-attachment

设置背景图片是否随页面一起滚动。

scroll

fixed：设置为fixed时，背景图片的定位永远相对于浏览器的窗口。

background-clip

设置背景的范围。

border-box：默认。背景会出现在border和padding和content内。

padding-box：只出现在padding和content内。

content-box：只出现在content内。

background

整合。不写就使用默认值。

没有顺序要求，但是必须background-position/background-size

【雪碧图CSS-Sprite】

可以将多个小图片统一保存在一个大图片中，然后通过调整background-position来显示。

使用步骤：（1）确定要使用的图标

（2）测量图标的大小

（3）根据测量结果创建一个元素

（4）将雪碧图设置为元素的背景图片

（5）设置一个偏移量以显示正确的图片

优点：一次性将多个图片加载进页面，降低请求的次数，加快访问速度，提升用户的体验。

【元素的层级】

如果元素的层级是一样的，下面的元素会盖住上面的。

z-index

没有开启定位的元素不能使用z-index。

父元素的层级再高，也不会盖住子元素。

【display】

inline

默认。

将元素变成内联元素。

block

将元素变成块元素。

inline-block

将元素变成行内块元素。

table-cell

将元素设置为单元格。可以使用td相关的属性。

none

不会被显示。

【不占位置。】

代码中有。

flex

设置块级弹性容器。

inline-flex

设置行内弹性容器。

【visibility】

visible

默认。

hidden

不会被显示。

【占位置。】

代码中有。

【overflow】

visible

默认。

淌出去，不做处理。

hidden

scroll

不论内容是否溢出，都会添加双方向滚动条。

auto

根据需求自动添加滚动条。

【盒子模型】

（1）margin

【影响盒子的位置】 由于元素是靠左上摆放的，设置左上外边距时会改变盒子自身的位置。设置右下外边距时会改变其他盒子的位置。

垂直外边距重叠（margin collapse）：在网页中垂直方向的相邻外边距会发生外边距的重叠。

发生margin collapse的是兄弟元素相邻外边距中取最大值。

发生margin collapse的是父子元素（1）父元素设置padding=1px或者border=1px，再height-1px（因为子元素在父元素的content里，设置padding或border可以将父子元素的margin隔开）

（2）父元素设置padding-top=100px，再height-100px

（3）在子元素前面放一个空的table标签

（4）给子元素添加一个类.clearfix::before{ content:""; display:table; }

许多浏览器都为元素设置了默认的margin和padding，解决方法：*{ margin: 0; padding: 0;}

【盒子可见框的大小由border、padding和content共同决定】

（2）border

border-width

四个值（上、右、下、左）

三个值（上、左/右、下）

两个值（上/下、左/右）

border-xxx-width

border-color

和上面类似

border-style

和上面类似

none（默认）

solid

dotted

dashed（虚线）

double（双线）

border-radius

四个值（左上、右上、右下、左下）

三个值（左上、右上/左下、右下）

两个值（左上/右下、右上/左下）

border-xxx-xxx-radius

border

不能分别指定四条边

border-xxx

table相关： border-spacing

设置table边框和td边框之间的距离。

border-collapse

border-collapse: collapse;

table边框和td边框合并。

如果设置了的话，border-spacing自动失效。

（3）padding

padding

padding-xxx

（4）content

width、height设置的是内容区。

background-color会延伸到内边距。

（5）outline

用法和border一样。

不会影响盒子可见框的大小。

（6）box-sizing

指定width和height的作用范围。

content-box：默认值。width和height指的是内容区的总大小。

border-box：width和height指的是内容区和内边距和边框的总大小。

（7）box-shadow

水平偏移量垂直偏移量模糊半径阴影颜色（一般rgba(0,0,0,.3)）

不会影响盒子可见框大小。

【内联元素的盒模型】

（1）margin

支持水平外边距。水平方向的相邻外边距不会重叠。

不支持垂直外边距。

（2）border

支持水平内边距，会影响布局。

支持垂直内边距，不会影响布局。

（3）padding

同上。

（4）content

不能设置width和height。

【水平方向的布局等式】

子元素的margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 父元素内容区的宽度

以上等式必须满足，如果左式相加结果使得等式不成立，发生过度约束，则等式会自动调整。

如果左式七个值中没有一个设置为auto，则自动调整margin-right值使得等式成立。

如果width、margin-left和margin-right中其中一个设置为auto，则自动调整设置为auto的值。

如果width设置为auto，margin-left和margin-right中其中一个设置为auto，则width自动调整为最大，另一个为0。

如果width固定，margin-left和margin-right都设置为auto，则margin-left=margin-right。

【定位position】

（1）static

默认。

【开启定位后，可以通过left、right、top、bottom设置元素的偏移量】

（2）相对定位relative

相对其原来位置。

使元素提高一个层级。

（3）绝对定位absolute

相对于其包含块（containing block）。

包含块正常情况下就是离当前元素最近的、开启了定位的祖先元素。

如果所有祖先元素都未开启定位，则包含块为根元素（html为根元素、初始包含块）。

脱离文档流。

使元素提高一个层级。

水平方向的布局等式增加两个值left、right。

子元素的left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right = 父元素内容区的宽度

如果左式9个值中没有一个设置为auto，则自动调整right值使得等式成立。

如果width、margin、left和right中有设置为auto，则自动调整设置为auto的值。

如果未设置left和right（left和right默认值为auto），则自动调整left和right。

垂直方向的布局等式必须满足。

元素的top + margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom + bottom = 包含块的高度

（4）固定定位fixed

是一种绝对定位。

相对于浏览器的视口（viewport），浏览器窗口左上角。

脱离文档流。

使元素提高一个层级。

ie6不支持固定定位。

（5）粘滞定位sticky

和相对定位差不多，但是在到达某个位置时将其固定。

兼容性不佳。

【float】

none

left

right

元素浮动后，会尽量向页面的左上或右上浮动，直到遇到父元素或者其他浮动元素。

如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素。

浮动元素不会超过他上边的兄弟元素。

浮动元素不会盖住文字，文字会自动环绕在浮动元素周围。

高度塌陷：如果父元素包含的元素全是浮动元素，则该元素高度变成0。

BFC(块级排版上下文Block Formatting Context)

（1）默认关闭。

（2）开启后的特性：

父元素的垂直外边距不会和子元素重叠。

不会被浮动元素所覆盖。

可以包含浮动的子元素。

（3）开启的方法：

根元素

设置元素浮动display: float：导致父元素宽度丢失，导致下边的元素上移。

设置元素绝对定位position: absolute。

设置元素为inline-block：导致宽度丢失。

设置元素为flex子项或grid子项。

设置display: flow-root。

设置overflow为非visible的值：设置为hidden是副作用最小的方法。

（4）ie6及以下的浏览器并不支持BFC，但有hasLayout属性类似于BFC。将元素的zoom设为1即可。（只在ie有效）

在高度塌陷的父元素内最后，添加一个空白div，设置clear: both。

基本没有副作用，兼容性好，但会在页面中添加多余的结构。

利用after伪类.clearfix::after{ content: ""; display: block; clear: both; }和ie中.clearfix{ zoom: 1; }

终极修复margin collapse和高度塌陷万金油。

.clearfix::before, .clearfix::after{
	content: "";
	display: table;
	clear: both;
}
.clearfix{
	zoom: 1;
}

【clear】

指定元素的哪一侧不允许浮动元素（清除浮动）。

none

left

right

both：清除对它影响最大的。

【文档流normal flow of the document】

块元素

默认宽度为父元素的100%。

默认高度被内容撑开。

内联元素

默认宽度和高度被内容撑开。

脱离文档流

当（1）设置了float（2）开启绝对定位（3）开启固定定位时会脱离文档流。

块元素

默认宽度和高度被内容撑开。内联元素

变成行内块元素。

【flex】

弹性容器

弹性元素（弹性项）

主轴

侧轴：和主轴垂直。

弹性容器 flex-direction

容器中弹性元素的排列方向。（等于主轴）

row：默认值，水平从左到右。

row-reverse：水平从右到左。

column：垂直从上到下。

column-reverse：垂直从下到上。

flex-wrap

设置弹性元素是否在弹性容器中自动换行。

nowrap：默认值，元素不会自动换行。

wrap：元素沿着侧轴方向自动换行。

wrap-reverse：元素沿着侧轴反方向换行。

flex-flow

flex-direction和flex-wrap的整合。

flex-flow: row wrap;

justify-content

flex-start：第一个元素贴着主轴起边，各个元素紧贴。

flex-end：最后一个元素贴着主轴终边，各个元素紧贴。

center：元素居中排列。

space-around：空白分布到元素两侧。

space-evenly：空白分布到元素单侧。

space-between：空白均匀分配到元素之间。

align-items

元素在侧轴上如何对齐

stretch：默认值，将元素的长度设为相同的值。

flex-start：元素不会拉伸，沿着侧轴起边对齐。

flex-end：沿着侧轴终边对齐。

center：居中对齐。

baseline：基线对齐。

align-content

和justify-content类似。

弹性元素

align-self

覆盖当前弹性元素上的align-items。

flex-grow

指定弹性元素的伸展系数。当父元素有多余空间时，子元素按照比例进行分配。

flex-grow: 1;

flex-shrink

指定弹性元素的收缩系数。当父元素的空间不足容纳所有的子元素时，子元素按照比例进行收缩。

flex-shrink: 0;

flex-basis

弹性元素在主轴上的基础长度。

默认值auto，参考自身元素的宽度或高度。

flex

flex-grow、flex-shrink、flex-basis整合。

flex: initial代表flex: 0 1 auto;

flex: auto代表flex: 1 1 auto;

flex: none代表felx: 0 0 auto;

order

指定元素的排列顺序。

移动端无脑使用flex。pc端ie8、9可能不支持，要用float。

flex布局教程

【Hack】

（1）条件Hack

只对ie浏览器有效，其他浏览器视为注释。（ie10及以上已经不支持）











（2）属性Hack

在样式属性名前面加

-（选择ie6及以下）

*（选择ie7及以下）

在样式值后添加

\9（选择ie6及以下）

\0（选择ie8及以上）

（3）选择器Hack

在选择器前添加*html，则该选择器只有ie6可以识别。

【transition】

transition-property

规定要执行过渡的属性。（一般可以计算的属性就可以过渡；过渡必须是一个有效值向另一个有效值过渡）

width

height

all

transition-duration

指定过渡效果的持续时间。

时间s和ms，要写出来。

transition-timing-function

指定过渡的执行方式。

ease：默认。慢速开始，先加速再减速。

linear：匀速。

ease-in：加速运动。

ease-out：减速运动。

ease-in-out：先加速，后减速。

cubic-bezier()：指定时序函数。贝塞尔曲线转换

steps(n)：分n步执行过渡效果。闪现。可以设置第二个属性值：

end：默认，在时间结束时执行过渡。

start：在时间开始时执行过渡。

transition-duration: 2s; steps(2, end);表示2s分成两步走，每一步是1s，在时间段1s的结束时执行过渡。

transition-delay

过渡效果的延迟。

transition

整合。

如果要写transition-delay，前面一个时间指的是transition-duration，第二个时间指的是transition-delay。

【animation】

动画和过渡类似，都是可以实现一些动态的效果。不同的是过渡需要在某个属性发生变化时才会触发，动画可以自动触发动态效果。

.box{
	/* 要对当前元素生效的关键帧的名字 */
	animation-name: test;
	animation-duration: 2s;
	animation-delay: 2s;
	animation-timing-function: linear;
	/* 
		动画执行的次数；
		次数 or infinite 
	*/
	animation-iterator-count: 2;
	/* 
		动画执行的方向；
		normal（默认）
		reverse
		alternate（先正后反，交替执行）
		alternate-reverse 
	*/
	animation-direction: normal;
	/*
		设置动画的执行状态；
		running（默认）
		paused
	*/
	animation-play-state: running;
	/* 
		动画的填充模式；
		none（默认）：动画执行完毕，元素回到原来位置（是原始位置不是关键帧开始位置）。
		forwards：动画执行完毕，元素会停止在动画结束的位置。
		backwards：动画延时等待时，元素就处于动画开始的位置。
		both：结合了forwards和backwards。
	*/
	animation-fill-mode: none;
	
	/*
		整合。
	animation: ;
	*/
}

@keyframes test{
	from, 50%{
		margin-left: 0;
	}
	to{
		margin-left: 700px;
	}
}

【transform】

设置元素的变形效果，不会影响页面的布局。

transform: 函数

平移 translateX()：沿着x轴方向（→）平移。

translateY()：沿着y轴方向（↓）平移。

translateX()：沿着z轴方向平移。

数值可以是px，也可以是百分比（表示相对于自身宽度的百分比）。

旋转 rotateX()：沿着x轴旋转。

rotateY()：沿着y轴旋转。

rotateZ()：沿着z轴旋转。

数值可以是deg，也可以是turn。

缩放 scaleX()：水平方向缩放。

scaleY()：垂直方向缩放。

scale()：双方向缩放。

backface-visiblity

是否显示元素的背面。

hidden。

transform-style

设置3d变形效果。

preserve-3d。

transform-origin

缩放源点。

center：默认。

x y。

【变量函数】

/*
	原生css也支持变量。
	语法：--变量名: 变量值;
	用法：var(--变量名);
	兼容性不好，ie不支持。
*/
html{
	--color: #bfa;
}
.item{
	color: var(--color);
}
/*
	calc()
	ie9以上支持。
*/
.item{
	width: calc(1000px/2);
}

【像素】

默认情况下，在PC端，1CSS像素=1物理像素。一个CSS像素最终由几个物理像素显示，由浏览器决定。

手机像素大小<<计算机像素大小。

像素比=CSS像素/物理像素。

【视口viewport】

视口是屏幕中用来显示网页的区域。

可以通过视口viewport来计算CSS像素和物理像素之间的比值。

移动端

默认情况下，移动端视口设为980px（CSS像素）。

完美视口是将像素比设置为最佳像素比的视口大小。

device-width表示设备的宽度（完美视口）。 <meta name="viewport" content="width=device-width, initial-scale=1.0">

【响应式布局】

网页可以根据不同的设备或窗口大小呈现出不同的效果。

【媒体查询】

@media 媒体类型{} 媒体类型

使用逗号连接多个媒体类型。

在媒体类型前添加一个only，表示只有（为了兼容老版本浏览器）。

all：所有设备

print：打印设备

screen：带屏幕的设备

speech：屏幕阅读器

@media (媒体特性){} 媒体特性

width：视口宽度 @media (width: 500px){body{ }}

min-width

max-width

height：视口高度

断点

max-width: 768px超小屏幕（手机）

min-width: 768px小屏幕

min-width: 992px中型屏幕（ipad）

min-width: 1200px大屏幕（电脑） @media (min-width: 500px), (max-width: 700px){} @media only screen and (min-width: 500px) and (max-width: 700px){}

[记录] CSS

CSS

【样式】

（1）内联样式

（2）内部样式

（3）外部样式

【元素之间的关系】

【继承】

【选择器】

（1）元素选择器

（2）id选择器

（3）类选择器

（4）并集选择器（选择器分组）

（5）交集选择器（复合选择器）

（6）后代元素选择器

（7）子元素选择器

（8）兄弟元素选择器

（9）伪类选择器

（10）伪元素选择器

（11）属性选择器

（12）通配选择器

【选择器的优先级（权重）】

【大小单位】

【颜色单位】

（1）颜色单词

（2）十六进制

（3）RGB

（4）RGBA

（5）HSL

（6）HSLA

【字体】

（1）color

（2）font-size

（3）font-family

（4）font-style

（5）font-weight

（6）font-variant

（7）font

【行高line-height】

【行间距】

【文本样式】

（1）text-align

（2）vertical-align

（3）text-decoration

（4）white-space

（5）letter-spacing

（6）word-spacing

（7）text-transform

（8）text-indent

【opacity】

【background】

【雪碧图CSS-Sprite】

【元素的层级】

【display】

【visibility】

【overflow】

【盒子模型】

（1）margin

（2）border

（3）padding

（4）content

（5）outline

（6）box-sizing

（7）box-shadow

【内联元素的盒模型】

（1）margin

（2）border

（3）padding

（4）content

【水平方向的布局等式】

【定位position】

（1）static

（2）相对定位relative

（3）绝对定位absolute

（4）固定定位fixed

（5）粘滞定位sticky

【float】

【clear】

【文档流normal flow of the document】

【flex】