一、字体、文本属性

1.字体属性

CSS字体属性用于定义字体系列、大小、粗细、文字样式(斜体)

1.1、font-family

font-family设置文本的字体系列

可把多个字体名称作为一个回退系统来保存，若浏览器不支持第一个字体，则会尝试下一个

font-family: Arial, "Microsoft Yahe", "微软雅黑";

inherit：继承父元素该属性的值

1.2、font-size

font-size设置文本字体大小

谷歌浏览器默认的字体大小为16px

font-size: size | smaller | larger | length | % | inherit;

size：默认值为medium，值为xx-small、x-small、small、medium、large、x-large、xx-large
smaller：比父元素更小的尺寸
larger：比父元素更大的尺寸
length：设置一个固定的值(如：16px)
%：为基于父元素的一个百分比值
inherit：继承父元素该属性的值

1.3、font-style

font-style设置文本的字体样式

font-style: normal | italic | oblique | inherit;

normal：默认值，标准字体样式
italic：斜体的字体样式
oblique：倾斜的字体样式
inherit：继承父元素该属性的值

1.4、font-variant

font-variant设置小型大写字母的字体显示文本

font-variant: normal | small-caps | inherit;

normal：默认值，标准字体
small-caps：显示小型大写字母的字体
inherit：继承父元素该属性的值

font-variant: small-caps;

1.5、font-weight

font-weight：设置文本的粗细

font-weight: normal | bold | bolder | lighter | number | inherit;

normal：默认值，标准字符
bold：粗体字符
bolder：更粗的字符
lighter：更细的字符
number：100 ~ 900之间的百位数字，定义由细到粗的字符，400等同于normal，700等同于bold
inherit：继承父元素该属性的值

1.6、font

font简写属性，在一个声明中设置所有字体属性

font: font-style font-variant font-weight font-size/line-height font-family;

font-size和font-family的值是必需的

建议：有些值不常用，所以建议使用上面的单个属性进行设置字体的样式

2.文本属性

CSS文本属性设置文本的外观，如文本颜色、对齐文本、装饰文本、文本缩进、行间距

2.1、color

color设置文本的颜色

color: color;

值包括颜色关键字、transparent关键字、RGB[A]颜色值、HSL[A]颜色值

2.2、direction

direction设置文本方向

direction: ltr | rtl | inherit;

ltr：默认值，从左到右
rtl：文本方向从右到左
inherit：继承父元素该属性的值

2.3、unicode-bidi

unicode-bidi属性与direction属性一起使用，来设置或返回文本是否被重写

unicode-bidi: normal | embed | bidi-override |initial | inherit;

direction: rtl;
unicode-bidi: bidi-override;

2.4、letter-spacing

letter-spacing设置文本字符间距

letter-spacing: normal | length | inherit;

normal：默认值，字符间没有额外的空间
length：定义字符间的固定空间(允许使用负值)
inherit：继承父元素该属性的值

2.5、word-spacing

word-spacing设置文本字间距(有空格的情况下，才能生效)

word-spacing: normal | length | inherit;

normal：默认值，字符间没有额外的空间
length：定义字符间的固定空间(允许使用负值)
inherit：继承父元素该属性的值

2.6、white-space

white-space设置元素内的空白处理方式(在代码标签中写的文本格式中的空白)

white-space: normal | pre | nowrap | pre-wrap | pre-line | inherit;

normal：默认，空白会被浏览器忽略
pre：空白会被浏览器保留(在代码标签中怎么写的文本，浏览器就怎么展示)
nowrap：文本不会换行，文本会在同一行继续，直到遇到<br>标签为止
pre-wrap：保留空白符序列，但是正常的进行换行
pre-line：合并空白符序列，但是保留换行符
inherit：继承父元素该属性的值

2.7、line-height

line-height：设置文本行高(行间距)

line-height: normal | number | length | % | inherit;

normal：默认值，设置合理的行间距
number：设置数字，此数字会和当前字体大小相乘来设置行间距
length：设置固定的行间距
%：基于当前字体尺寸的百分比行间距
inherit：继承父元素该属性的值

2.8、text-align

text-align设置元素、文本的水平对齐方式

text-align: left | right | center | justify | inherit;

left：默认值(由浏览器决定)，排列到左边
right：排列到右边
center：排列到中间
justify：两端对齐文本
inherit：继承父元素该属性的值

justify

不设置与设置的区别

2.9、vertical-align

vertical-align：设置元素的垂直对齐方式

vertical-align: baseline | sub | super | top | text-top | middle | bottom | text-bottom | length | % | inherit;

baseline：默认值，元素放置在父元素的基线上
sub：垂直对齐文本的下标
super：垂直对齐文本的上标
top：把元素的顶端与行中最高元素的顶端对齐
text-top：把元素的顶端与父元素字体的顶端对齐
middle：把此元素放置在父元素的中部
bottom：使元素及其后代元素的底部与整行的底部对齐
text-bottom：把元素的底端与父元素字体的底端对齐
length：将元素升高或降低指定的高度，可以是负数
%：使用line-height属性的百分比值来排列此元素，允许使用负值
inherit：继承父元素该属性的值

2.10、text-decoration

text-decoration：添加文本修饰

text-decoration: none | underline | overline | line-through | blink | inherit;

none：默认值，标准的文本，没有修饰
underline：定义文本下的一条线(下划线)
overline：定义文本上的一条线(上划线)
line-through：定义穿过文本下的一条线(删除线)
blink：定义闪烁的文本
inherit：继承父元素该属性的值

text-decoration为text-decoration-line、text-decoration-color、text-decoration-style的简写，顺序可颠倒

/*关键值*/
text-decoration: none;                     /*没有文本装饰*/
text-decoration: underline red;            /*红色下划线*/
text-decoration: underline wavy red;       /*红色波浪形下划线*/

2.11、text-indent

text-indent：设置文本首行文本的缩进

text-indent: length | % | inherit;

length：定义固定的缩进，默认值为0，可为负值(为负值，就会往左缩进，或者说是超出元素)
%：定义基于父元素宽度的百分比的缩进
inherit：继承父元素该属性的值

2.12、text-transform

text-transform：设置文本的大小写

text-transform: none | capitalize | uppercase | lowercase | inherit;

none：默认值，定义带有小写字母和大写字母的标准文本
capitalize：文本中的每个单词以大写字母开头
uppercase：大写
lowercase：小写
inherit：继承父元素该属性的值

2.13、text-shadow

text-shadow：设置文本阴影

text-shadow: h-shadow v-shadow blur color;

h-shadow：必需，水平阴影的位置，允许负值
v-shadow：必需，垂直阴影的位置，允许负值
blur：可选，模糊的距离
color：可选，阴影的颜色

2.14、word-break、word-wrap

word-break：设置非CJK脚本的断行规则，CJK脚本是中国、日本、韩国脚本

word-break: normal | break-all | keep-all;

normal：使用浏览器默认的换行规则
break-all：允许在单词内换行
keep-all：只能在半角空格或连字符处换行

word-wrap允许长的内容可以自动换行

word-wrap: normal | break-word;

normal：只在允许的断字点换行
break-word：在长单词或url地址内部进行换行

2.15、text-overflow

text-overflow：设置文本溢出时，如何显示

text-overflow: clip | ellipsis | string | inherit;

clip：剪切文本
ellipsis：显示省略符号...来代表被修剪的文本
string：使用给定的字符串来代表被修剪的文本
inherit：继承父元素该属性的值

二、背景

CSS背景属性给页面元素添加背景样式，如背景颜色、背景图片、背景平铺、背景图片位置、背景图片固定

1.background-color

background-color设置元素的背景颜色

background-color: color | inherit;

值包括颜色关键字、transparent关键字、currentColor关键字、RGB[A]颜色值、HSL[A]颜色值

inherit：继承父元素该属性的值

2.background-image

background-image设置元素的背景图像

background-image: none | url(url) | 渐变色函数 | inherit;

none：默认值。无背景图像
url(url)：背景图像地址，路径不加引号
渐变色函数：linear-gradient() / repeating-linear-gradient()线性渐变、radial-gradient() / repeating-radial-gradient()径向渐变、conic-gradient() / repeating-conic-gradient()圆锥渐变
inherit：继承父元素该属性的值

3.background-repeat

background-repeat设置元素背景图像的平铺方式

background-repeat: repeat | no-repeat | repeat-x | repeat-y | inherit;

repeat：默认值，背景图像将向垂直和水平方向重复
no-repeat：背景图像不会重复
repeat-x：背景图像只在水平方向重复
repeat-y：背景图像只在垂直方向重复
inherit：继承父元素该属性的值

4.background-position

background-position设置背景图像的起始位置

x为水平，y为垂直

background-position: x y | inherit;

关键字，若仅指定一个关键字，则另一个的值为center

left top、left center、left bottom、right top、right center、right bottom、center top、center center、center bottom

百分比：左上角是0% 0%，右下角是100% 100%，若仅指定一个关键字，则另一个的值为50%，默认为0% 0%
数值：左上角为0，单位可以是像素或任何其他CSS单位，如果仅指定了一个值，其他值将是50％。可以混合使用％和positions
inherit：继承父元素该属性的值

5.background-attachment

background-attachment设置背景图像是否固定或随着页面的其余部分滚动

background-attachment: scroll | fixed | local | inherit;

scroll：默认值，背景图像随着页面的滚动而滚动
fixed：背景图像不会随着页面的滚动而滚动
local：背景图像会随着元素内容的滚动而滚动
inherit：继承父元素该属性的值

6.background-size

background-size设置背景图像大小

background-size: length | percentage | cover | contain;

length：设置背景图像高度和宽度，第一个值设置宽度，第二个值设置高度。若只设置一个值，另一个值则为auto
percentage：相对于背景定位区域的百分比，第一个值设置宽度，第二个值设置高度，若只设置一个值，另一个则为auto
cover：图片短边完全显示，且居中，比例不变，图片会被裁剪
contain：图片长边完全显示，且居中，比例不变

7.background-clip

background-clip设置图像绘制区域

background-clip: border-box | padding-box | content-box;

border-box：默认值，背景绘制在边框方框内
padding-box：背景绘制在内边距方框内
content-box：背景绘制在内容方框内

8.background-origin

background-origin设置图像放置区域

background-origin跟background-position一起使用，当background-attachment为fixed，该属性没有效果

background-origin: border-box | padding-box | content-box;

border-box：默认值，背景绘制在边框方框内
padding-box：背景绘制在内边距方框内
content-box：背景绘制在内容方框内

9.background-blend-mode

background-blend-mode背景层的混合模式(背景图像与背景颜色)

background-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | saturation | color | luminosity;

normal：默认值，正常的混合模式
multiply：正片叠底
screen：滤色
overlay：叠加
darken：变暗
lighten：变亮
color-dodge：颜色减淡
saturation：饱和度
color：颜色
luminosity：亮度

10.background

background简写属性

background: background-color background-image background-position/background-size background-repeat background-origin background-clip background-attachment;

三、列表

1.list-style-type

list-style-type设置列表表项标记的类型

其余不常用的值

list-style-type: none | disc | circle | square | decimal;

none：无标记
disc：默认，实心圆(默认值看列表是ul还是ol，ol的话，默认为数字)
circle：空心圆
square：实心方块
decimal：数字

2.list-style-position

list-style-position设置表项的绘制方式

list-style-position: outside | inside | inherit;

outside：默认值，保持标记位于文本的左侧，列表项目标记放置在文本以外，且环绕文本不根据标记对齐(在元素以外)
inside：列表项目标记放置在文本以内，且环绕文本根据标记对齐(在元素以内)
inherit：继承父元素该属性的值

3.list-style-image

list-style-image使用图像来替换列表表项的标记

该值会覆盖list-style-type的值

list-style-image: none | url(url) | 渐变色函数 | inherit;

none：默认值。无背景图像
url(url)：背景图像地址，路径不加引号
渐变色函数：linear-gradient() / repeating-linear-gradient()线性渐变、radial-gradient() / repeating-radial-gradient()径向渐变、conic-gradient() / repeating-conic-gradient()圆锥渐变
inherit：继承父元素该属性的值

4.list-style

list-style简写属性，可不设置其中的某个值，未设置的属性会使用其默认值

list-style: list-style-type | list-style-position | list-style-image;

四、盒子模型

盒子模型的结构

1.尺寸

1.1、width、height

width：设置元素的宽度

height：设置元素的高度

width: auto | length | % | inherit;
height: auto | length | % | inherit;

auto：默认值，浏览器会计算出实际的宽度(高度)
length：px等单位定义宽度(高度)
%：基于包含它的块级父元素的百分比宽度(高度)
inherit：继承父元素该属性的值

1.2、min-width、min-height

min-width：设置元素的最小宽度

min-height：设置元素的最小高度

min-width: length | % | inherit;
min-height: length | % | inherit;

length：定义元素的最小宽度(高度)，最小宽度由浏览器决定，最小高度默认值为0
%：基于包含它的块级父元素的百分比最小宽度(高度)
inherit：继承父元素该属性的值

1.3、max-width、max-height

max-width：设置元素最大宽度

max-height：设置元素最大高度

max-width: none | length | % | inherit;

none：默认值，对元素被允许的最大宽度(高度)没有限制
length：定义元素的最大宽度(高度)
%：基于包含它的块级父元素的百分比最大宽度(高度)
inherit：继承父元素该属性的值

2.内边距

padding：定义元素边框与元素内容之间的空间，即内边距(当元素没有宽度的时候，内边距是无法撑开元素的)

padding: length | %;

length：定义一个固定的填充(px、pt、em等)
%：使用百分比值定义一个填充(基于元素宽度的百分比的值)

单个方向

padding-top：上内边距
padding-right：右内边距
padding-bottom：下内边距
padding-left：左内边距

简写的各个取值

padding: 25px：所有方向的内边距为25px
padding: 25px 50px：上下内边距为25px，左右内边距为50px
padding: 25px 50px 75px：上内边距为25px，左右内边距为50px，下内边距为75px
padding: 25px 50px 75px 100px：上内边距为25px，右内边距为50px，下内边距为75px，左内边距为100px

3.边框

border：设置元素边框的样式、宽度和颜色

未设置的值为对应属性的初始值

border: border-width border-style border-color;

单个方向

border-top：上边框(border-top-width border-top-style border-top-color)
border-right：右边框(border-right-width border-right-style border-right-color)
border-bottom：下边框(border-bottom-width border-bottom-style border-bottom-color)
border-left：左边框(border-left-width border-left-style border-left-color)

3.1、border-width

border-width：设置元素边框的宽度

border-width: thin | medium | thick | length | inherit;

thin：定义细的边框
medium：默认值，定义中等的边框
thick：定义粗的边框
length：允许自定义边框的宽度，固定值的边框(px、pt、em等)
inherit：继承父元素该属性的值

单个方向

border-top-width：上边框宽度
border-right-width：右边框宽度
border-bottom-width：下边框宽度
border-left-width：左边框宽度

简写的各个取值

border-width: 1px：所有方向的边框宽度都为1px
border-width: 1px 2px：上下边框宽度为1px，左右边框宽度为2px
border-width: 1px 2px 3px：上边框宽度为1px，左右边框宽度为2px，下边框宽度为3px
border-width: 1px 2px 3px 4px：上边框宽度为1px，右边框宽度为2px，下边框宽度为3px，左边框宽度为4px

3.2、border-style

border-style：设置元素边框的样式

border-style: none | dotted | dashed | solid | double | hidden | groove | ridge | inset | outset | inherit;

none：定义无边框
dotted：点状边框(在大多数浏览器中呈现为实线)
dashed：虚线边框(在大多数浏览器中呈现为实线)
solid：实线边框
double：双线边框
hidden：隐藏边框，与none相同，不过在表中，用于解决边框冲突问题
groove：凹槽边框
ridge：垄状边框
inset：嵌入边框
outset：外凸边框
inherit：继承父元素该属性的值

单个方向

border-top-style：上边框样式
border-right-style：右边框样式
border-bottom-style：下边框样式
border-left-style：左边框样式

简写的各个取值

border-style: dotted：所有方向的边框样式为点状
border-style: dotted solid：上下边框样式为点状，左右边框样式为实线
border-style: dotted solid double：上边框样式为点状，左右边框样式为实线，下边框样式为双线
border-style: dotted solid double dashed：上边框样式为点状，右边框样式为实线，下边框样式为双线，左边框样式为虚线

3.3、border-color

border-color：设置元素边框的颜色

border-color: color | transparent | inherit;

color：颜色关键字、currentColor关键字、RGB[A]颜色值、HSL[A]颜色值
transparent：透明，默认值
inherit：继承父元素该属性的值

单个方向

border-top-color：上边框颜色
border-right-color：右边框颜色
border-bottom-color：下边框颜色
border-left-color：左边框颜色

简写的各个取值

border-style: red：所有方向的边框颜色为red
border-style: red blue：上下边框颜色为red，左右边框颜色为blue
border-style: red blue green：上边框颜色为red，左右边框颜色为blue，下边框颜色为green
border-style: red blue green pink：上边框颜色为red，右边框颜色为blue，下边框颜色为green，左边框颜色为pink

3.4、border-radius

border-radius：设置元素边框的圆角

border-radius的值为角的左边线 /角的右边线

圆角效果展示

border-radius: length | % / length | %;

length：定义弯道的形状
%：使用%定义角落的形状

单个角

border-top-left-radius：左上角
border-top-right-radius：右上角
border-bottom-right-radius：右下角
border-bottom-left-radius：左下角

border-radius: 1em / 5em;

/* 等价于： */

border-top-left-radius:     1em 5em;
border-top-right-radius:    1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius:  1em 5em;

border-radius: 4px 3px 6px / 2px 4px;

/* 等价于： */

border-top-left-radius:     4px 2px;
border-top-right-radius:    3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius:  3px 4px;

多个值

border-radius: 25px：所有角25px

border-radius: 25px 50px：左上角与右下角为25px，右上角与左下角为50px

border-radius: 25px 50px 75px：左上角为25px，右上角与左下角为50px，右下角为75px

border-radius: 25px 50px 75px 100px：左上角为25px，右上角为50px，右下角为75px，左下角为100px

3.5、border-image

border-image：给元素设置图像边框

省略的值为它自身的默认值

border-image: source slice width outset repeat;

border-image-source

指定要使用的图像

border-image-source: none | image;

none：没有图像被使用
image：url(url)边框使用图像的路径

border-image-slice

指定图像的边界向内偏移

该属性有四个值，跟border的四个属性一致

border-image-slice: number | % | fill;

number：数字表示图像的像素或向量的坐标
%：百分比图像的大小是相对的，水平偏移图像的宽度，垂直偏移图像的高度
fill：保留图像的中间部分

border-image-width

指定图像边界的宽度

该属性有四个值，跟border的四个属性一致

border-image-width: number | % | auto;

number：表示相对应的border-width的倍数
%：边界图像区域的大小，横向偏移的宽度的面积，垂直偏移的高度的面积
auto：若指定了，宽度是相应的border-image-slice的内在宽度或高度

border-image-outset

指定在边框外部绘制border-image-area的量

border-image-outset: length | number;

length：设置边框图像与边框的距离，默认为0，可为px、em等单位
number：代表相应的border-width的倍数

border-image-repeat

指定边框图像是否重复、拉伸或铺满

border-image-repeat: stretch | repeat | round | space | inherit;

stretch：默认值，拉伸图像来填充区域
repeat：平铺图像来填充区域
round：类似repeat值，若无法完整平铺所有图像，则对图像进行缩放以适应区域
space：类似repeat值，若无法完整平铺所有图像，扩展空间会分布在图像周围
inherit：继承父元素该属性的值

4.轮廓

outline：设置元素轮廓的颜色、样式和宽度

轮廓是不占用空间的，当元素有外边距时，轮廓会嵌入外边距中，没有外边距会在嵌入附近元素，若是浏览器边界，则轮廓会被裁减不显示

outline: outline-color outline-style outline-width;

4.1、outline-color

outline-color：设置元素轮廓的颜色

outline-color: color | invert | inherit;

color：颜色关键字、transparent关键字、RGB[A]颜色值、HSL[A]颜色值
invert：默认值，颜色反转，可使轮廓在不同的背景颜色中都是可见的
inherit：继承父元素该属性的值

4.2、outline-style

outline-style：设置元素轮廓的样式

outline-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit;

none：定义无轮廓
dotted：点状轮廓
dashed：虚线轮廓
solid：实线轮廓
double：双线轮廓
groove：凹槽轮廓
ridge：垄状轮廓
inset：嵌入轮廓
outset：外凸轮廓
inherit：继承父元素该属性的值

4.3、outline-width

outline-width：设置元素轮廓的宽度

outline-width: thin | medium | thick | length | inherit;

thin：定义细的边框
medium：默认值，定义中等的边框
thick：定义粗的边框
length：允许自定义边框的宽度，固定值的边框(px、pt、em等)
inherit：继承父元素该属性的值

5.外边距

margin：设置元素的外边距

margin: auto | length | %;

auto：取值依赖于浏览器
length：定义一个固定的外边距(px、pt、em等)
%：定义一个百分比的边距(值取决于浏览器的宽高)

单个方向

margin-top：上外边距
margin-right：右外边距
margin-bottom：下外边距
margin-left：左外边距

简写的各个取值

margin: 25px：所有方向的边框颜色为25px
margin: 25px 50px：上下边框颜色为25px，左右边框颜色为50px
margin: 25px 50px 75px：上边框颜色为25px，左右边框颜色为50px，下边框颜色为75px
margin: 25px 50px 75px 100px：上边框颜色为25px，右边框颜色为50px，下边框颜色为75px，左边框颜色为100px

5.1、外边距合并

外边距合并：当两个处置外边距相遇时，它们将会形成一个外边距，且合并后的外边距高度等于两个中高度最大的外边距高度

相邻块元素垂直外边距的合并
嵌套块元素垂直外边距的塌陷
外边距自身合并

相邻块元素垂直外边距的合并

当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并

嵌套块元素垂直外边距的塌陷

当一个元素包含在另一个元素中时(假设没有内边距或边框把外边距分隔开)，它们的上或下外边距也会发生合并

外边距自身合并

假设有一个空元素，但是没有边框或内边距，在这种情况下，上外边距与下外边距就碰到一起，发生合并

若这个外边距遇到另一个元素的外边距，还会发生合并

外边距合并的意义

外边距合并起初看上去确实奇怪，但实际上，它的存在很有意义。比如，由几个段落组成的典型文本页面，第一个段落上面的空间等于段落的上外边距，若没有外边距合并，后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这就意味着段落之间的空间是页面顶部的两倍。若发生外边距合并，那段落之间的上外边距和下外边距就会合并在一起，则会保证段落之间的空间是一致的

注：只有在普通文档流中块级元素的垂直外边距才会发生外边距合并。行内元素、浮动元素或绝对定位之间的外边距是不会合并的

6.阴影

box-shadow：设置元素的阴影

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow：必需，水平阴影的位置，允许负值
v-shadow：必需，垂直阴影的位置，允许负值
blur：可选，模糊距离
spread：可选，阴影的大小
color：可选，阴影的颜色，颜色关键字、transparent关键字、currentColor关键字、RGB[A]颜色值、HSL[A]颜色值
inset：可选，内阴影，没有该值则为外阴影

五、显示、隐藏

1.display

display：定义元素生成的框的类型

display: none | block | inline | inline-block | run-in | flex(line-flex) | grid(line-grid);

none：元素不会被显示，且不占空间
block：块级元素
inline：内联元素
inline-block：内联块级元素
run-in：此元素会根据上下文作为块级元素或内联元素显示
flex：弹性布局，flex为块级弹性盒子，inline-flex为内联块级弹性盒子
grid：网格布局，grid为块级网格盒子，inline-grid为内联块级网格盒子

2.visibility

visibility：定义元素是否为可见的

visibility: visible | hidden | inherit;

visible：默认值，元素是可见的
hidden：元素是不可见的，但依旧会占用空间
inherit：继承父元素该属性的值

3.overflow

overflow：内容溢出元素框后的处理方式

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

visible：默认值，内容不会被修剪，会呈现早元素框之外
hidden：内容会被修剪，并且其余内容不可见
scroll：内容会被修剪，但浏览器会显示滚动条以便查看其余内容，不管内容会不会被修剪，都会显示滚动条
auto：若内容会修剪，则浏览器会显示滚动条以便查看其余内容，若内容不被修剪，则不显示滚动条
inherit：继承父元素该属性的值

overflow-x

overflow-x：若内容溢出，水平方向(左右)溢出内容的解决方式

overflow-x: visible | hidden | scroll | auto;

overflow-y

overflow-y：若内容溢出，垂直方向(上下)溢出内容的解决方式

overflow-y: visible | hidden | scroll | auto;

六、浮动

1.float属性

float：指定元素是否应用浮动

浮动元素会脱离文档流并向左或向右浮动，直到碰到父元素或另一个浮动元素

float: left | right | none | inherit;

left：元素向左浮动
right：元素向右浮动
none：默认值，元素不浮动
inherit：继承父元素该属性的值

2.浮动的特性

脱离标准文档流，并在标准文档流之上显示
具有内联块元素的特性
且不会遮盖文字，起初设计浮动是为了文字环绕效果的，但不遮盖文字的前提是，文字要有空显示，或者说，文字所在的正常文档流的元素不会被浮动元素完全遮挡，且空间足够显示文字
浮动的元素会紧靠在一起，不会有缝隙，若父元素一行装不下这些浮动盒子，就会换行

3.清除浮动

清除浮动为了解决浮动造成的影响

父元素高度塌陷
影响标准文档流布局

3.1、clear

clear：指定元素的左侧或右侧不允许有浮动元素

clear: left | right | both | none | inherit;

left：左侧不允许浮动元素
right：右侧不允许浮动元素
both：左右两侧不允许浮动元素
none：默认值，允许浮动元素出现在左右两侧
inherit：继承父元素该属性的值

3.2、清除浮动的方法

额外标签法

<div class="box-wrapper">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box" style="clear:both;"></div>
</div>

BFC

让父元素形成BFC块级格式化上下文，常用overflow: hidden;

伪元素

// 现代浏览器clearfix方案，不支持IE6/7
.clearfix::after {
    display: table;
    content: "";
    clear: both;
}

// 全浏览器通用的clearfix方案
// 引入了zoom以支持IE6/7
.clearfix::after {
    display: table;
    content: "";
    clear: both;
}
.clearfix{
    *zoom: 1;
}

// 全浏览器通用的clearfix方案【推荐】
// 引入了zoom以支持IE6/7
// 同时加入::before以解决现代浏览器上边距折叠的问题
.clearfix::before,
.clearfix::after {
    display: table;
    content: "";
}
.clearfix::after {
    clear: both;
}
.clearfix{
    *zoom: 1;
}

七、定位

position：指定了元素的定位类型

定义由定位模式、偏移量、层叠性组成

子绝父相：子级元素使用绝对定位，父级元素使用相对定位

position: static | relative | fixed | absolute | sticky;

static：默认值，正常文档流，没有定位
relative：相对定位，相对于元素其正常位置进行定位，常用于绝对定位的容器块(父元素)，未脱离正常文档流，且占有位置
fixed：固定定位，相对于浏览器窗口进行定位，脱离正常文档流，且不占有位置
absolute：绝对定位，相对于最近的已定位的父元素进行定位，脱离正常文档流，且不占有位置
sticky：粘性定位，基于用户的滚动条滚动位置进行定位(粘性定位的元素是依赖于用户的滚动的，未脱离正常文档流，且占有位置(在position: relative与position: fixed之间切换)，必须要指定top、right、bottom、left四个值中的一个，才可使粘性定位生效，否则他的作用就跟相对定位的效果相同)

1.偏移量

四个方向的偏移量属性top、right、bottom、left

top: auto | % | length | inherit;

auto：默认值，通过浏览器计算位置
%：设置以包含元素(父元素)的百分比计的位置，可使用负值
length：使用常规单位px、em等设置位置，可使用负值
inherit：继承父元素该属性的值

2.层叠性

z-index：指定定位元素的堆叠顺序

若定位元素的z-index相等，则位于后面的元素(书写顺序)就会覆盖在之前的元素之上

z-index: auto | number | inherit;

auto：默认值，堆叠顺序与父元素相等
number：设置元素的堆叠顺序，可为负值(负值，则该元素位于正常文档流之下)
inherit：继承父元素该属性的值

八、其余属性

1、object-fit、object-position

1.1、object-fit

object-fit设置元素的内容应该如何去适应指定容器的高宽和宽度

object-fit一般用于img和video，一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸

object-fit: fill | contain | cover | scale-down | none | inherit;

fill：默认值，不保证保持原有的比例，内容拉伸填充整个内容容器
contain：保持原有尺寸比例，且长边完全显示
cover：保持原有尺寸比例，且短边完全显示，而内容被裁剪
none：保留原有元素内容的长度和宽度
scale-down：保持原有尺寸比例，内容的尺寸与none或contain中的一个相同，取决于两个之间谁的对象尺寸更小
inherit：继承父元素该属性的值

1.2、object-position

object-position设置元素的位置，一般与object-fit一起使用

object-position: x y | inherit;

关键字，若仅指定一个关键字，则另一个的值为center

left top、left center、left bottom、right top、right center、right bottom、center top、center center、center bottom

百分比：左上角是0% 0%，右下角是100% 100%，若仅指定一个关键字，则另一个的值为50%，默认为0% 0%
数值：左上角为0，单位可以是像素或任何其他CSS单位，如果仅指定了一个值，其他值将是50％。可以混合使用％和positions
inherit：继承父元素该属性的值

2.cursor

cursor：定义鼠标放在元素边界范围的光标形状

cursor: auto | url(url) | default | crosshair | pointer | text | wait | help;

auto：默认值，浏览器设置的光标形状
url(url)：设置自定义图片的光标
default：默认光标，箭头
crosshair：光标呈现为十字线
pointer：光标呈现为一个手
text：文本光标
wait：表示程序正忙(通常为一只表或沙漏)
help：指示可用的帮助(通常为一个问号或一个气球)

3.resize

resize：规定元素是否可以被用户调整大小

resize: none | both | horizontal | vertical;

none：默认值，用户无法调整元素的尺寸
both：用户可调整元素的高度和宽度
horizontal：用户可调整元素的宽度
vertical：用户可调整元素的高度

4.scroll-behavior

scroll-behavior：规定用户单击可滚框中的链接时，是否平滑的滚动位置，而不是直接跳转

scroll-behavior: auto | smooth | inherit;

auto：默认值，允许在滚动框内的元素间直接跳转的滚动效果
smooth：允许在滚动框内的元素间平滑的滚动效果
inherit：继承父元素该属性的值

5.content

content：与::before、::after伪元素配合使用

content: none | normal | counter() | attr() | string | open-quote | close-quote | no-open-quote | no-close-quote | url(url) | inherit;

none：设置content为空值
normal：在::before、::after伪元素中视为none，即也是空值
counter()：计数器函数
attr()：属性提取函数
string：设置文本内容
open-quote：设置前引号
close-quote：设置后引号
no-open-quote：移除内容的开始引号
no-close-quote：移除内容的闭合引号
url(url)：媒体文件链接
inherit：继承父元素该属性的值

6.opacity

opacity：设置元素的透明度

opacity: value | inherit;

value：指定不透明度，0.0(完全透明)到1.0(完全不透明)
inherit：继承父元素该属性的值

7.filter

filter：定义元素的可视效果(滤镜)

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url() | inherit;

none

默认值，正常可视效果，没有滤镜

blur(px)

给图像设置高斯模糊，值设定高斯模糊的标准差，或者屏幕上以多少像素融在一起，所以值越大越模糊，若没有设定值，则默认为0，这个函数值可设置CSS长度值，但不接受百分比值

brightness(%)

给图片应用一种线性乘法，使其看起来更亮或者更暗。若值为0%，图像会全黑，值为100%，则图像无变化。其他的值对应线性乘数效果，值超过100%也是可以的，图像就会比原来的更亮，若没有设定值，则默认为100%

contrast(%)

调整图像的对比度，值为0%的话，图像会全黑，值为100%，图像不变，值可以超过100%，意味着会运用更高的对比，若没有设置值，默认为100%

drop-shadow(h-shadow v-shadow blur spread color)

给图像设置一个阴影效果，阴影是合成在图像下面，可以有模糊度。

grayscale(%)

将图像转换为灰度图像，值定义转换的比例，值为100%则完全转换为灰度图像，值为0%图像无变化，值在0%到100%之间，若未设置，则默认为0%

hue-rotate(deg)

给图像应用色相旋转，值设置图像会被调整的色环角度值，值为0deg，则图像无变化，若值为设置，则默认值为0deg。超过360deg则相当于绕过一圈

invert(%)

反转输入图像，值定义转换的比例，100%为完全反转，0%图像则无变化，值在0%到100%之间，若未设置值，则默认为0%

opacity(%)

给图像设置透明程度，值为0%是完全透明，为100%图像无变化，值在0%到100%之间，若未设置值，则默认为100%

saturate(%)

转换图像饱和度，值定义转换的比例，值为0%则完全不饱和，值为100%则图像无变化，可超过100%，则拥有更高的饱和度，若值未设置，则默认为100%

sepia(%)

将图像转换为深褐色，值定义转换的比例，值为100%则完全是深褐色，值为0%图像无变化，值在0%到100%之间，若未设置值，则默认为0%

url()

url()函数接受一个XML文件，该文件设置一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素

inherit

inherit：继承父元素该属性的值

九、transform

transform：2D、3D转换，可以对元素进行平移、缩放、旋转、拉伸

1.translate()

translate()平移

transform: translate(x, y) | translate3d(x, y, z) | translateX(x) | translateY(y) | translateZ(z);

x, y, z的值为带单位的固定数值，也可以基于元素的宽度的百分比，可为负值

translate(x, y)：2D平移
translate3d(x, y, z)：3D平移
translateX(x)：X方向平移
translateY(y)：Y方向平移
translateZ(z)：Z方向平移

2.rotate()

rotate()旋转

transform: rotate(angle) | rotate3d(x, y, z, angle) | rotateX(angle) | rotateY(angle) | rotateZ(angle);

angle：角度值deg，可为负值

x, y, z：值为数字，为坐标系中的坐标

rotate(angle)：2D旋转
rotate(x, y, z, angle)：3D旋转
rotateX(angle)：X轴3D旋转
rotateY(angle)：Y轴3D旋转
rotateZ(angle)：Z轴3D旋转

3.scale()

scale()缩放

transform: scale(x, y) | scale3d(x, y, z) | scaleX(x) | scaleY(y) | scaleZ(z);

x, y, z的值为数字，可为小数，基于元素初始大小的倍数来计算缩放，可为负值，负值会颠倒元素

在scale(x, y)可只写一个数字，代表x, y都为这个倍数

但在scale3d(x, y, z)中，要三个数字都补充，否则不生效

scale(x, y)：2D缩放
scale3d(x, y, z)：3D缩放
scaleX(x)：X轴缩放，也就是宽度缩放
scaleY(y)：Y轴缩放，也就是高度缩放
scaleZ(z)：Z轴缩放

4.skew()

skew()倾斜

transform: skew(angle, angle) | skewX(angle) | skewY(angle);

angle角度值deg，可为负值，若只有设定一个值，则另一个等于这个值

skew(angle, angle)：2D倾斜
skewX(angle)：X轴倾斜
skewY(angle)：Y轴倾斜

5.matrix()

matrix()包含旋转，缩放，移动（平移）和倾斜功能

6.transform-style

transform-style：指定嵌套元素是怎样呈现

transform-style: flat | preserve-3d;

flat：默认值，表示所有子元素在2D平面呈现
preserve-3d：表示所有子元素在3D平面呈现

7.transform-origin

transform-origin：转换元素的位置

默认值为50% 50% 0

transform-origin: x-axis y-axis z-axis;

x-axis：定义视图被置于X轴的何处(可能的值left、center、right、length、%)

y-axis：定义视图被置于Y轴的何处(可能的值top、center、bottom、length、%)

z-axis：定义视图被置于Z轴的何处(可能的值length)

length可为负值

十、transition

transition：设置元素的过渡效果

transition: property duration timing-function delay;

1.transition-property

transition-property：指定CSS属性

transition: none | all | property;

none：没有属性会获得过渡效果
all：默认值，所有属性获得过渡效果
property：定义应用过渡效果的CSS属性名称列表，列表以逗号分隔

2.transition-duration

transition-duration：规定过渡效果的完成时间

transition-duration: time;

time：规定完成过渡效果的时间，默认值为0，意味着没有效果，单位为s(秒)、ms(毫秒)

3.transition-timing-function

transition-timing-function：规定过渡效果的速率

transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n);

linear：默认值，规定以相同速度开始到结束的过渡效果，(等同于cubic-bezier(0,0,1,1))
ease：规定以慢速开始，中间快，慢速结束的过渡效果，(等同于cubic-bezier(0.25,0.1,0.25,1))
ease-in：规定以慢速开始，快速结束的过渡效果(越来越快)，(等同于cubic-bezier(0.42,0,1,1))
ease-out：规定以快速开始，慢速结束的过渡效果(越来越慢)，(等同于cubic-bezier(0,0,0.58,1))
ease-in-out：规定以慢速开始和结束的过渡效果，(等同于cubic-bezier(0.42,0,0.58,1))
cubic-bezier(n,n,n,n)：贝赛尔曲线，功能演示

4.transition-delay

transition-delay：指定何时开始过渡效果

transition-delay: time;

time：指定多少时间之后才开始过渡效果，默认值为0，意味着立即开始过渡效果，单位为s(秒)、ms(毫秒)

十一、animation

animation：动画

animation: name duration timing-function delay iteration-count direction fill-mode plat-state;

@keyframes

使用@keyframes来定义动画，关键字from为0%，to为100%，可有多个阶段

@keyframes 动画名称 {
   0%{
        width: 100px;
   }  
   50%{
        width: 150px;
   } 
   100%{
        width: 200px;
   }
}

1.animation-name

animation-name：指定动画名称

animation-name: keyframename | none;

keyframename：指定要绑定到选择器的动画名称
none：指定没有动画

2.animation-duration

animation-duration：规定动画完成一个周期的时间

animation-duration: time;

time：指定动画完成一个周期的时间，默认值为0，意味着没有动画效果，单位为s(秒)、ms(毫秒)

3.animation-timing-function

animation-timing-function：规定动画完成的速率

animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n);

linear：默认值，规定以相同速度开始到结束的过渡效果，(等同于cubic-bezier(0,0,1,1))
ease：规定以慢速开始，中间快，慢速结束的过渡效果，(等同于cubic-bezier(0.25,0.1,0.25,1))
ease-in：规定以慢速开始，快速结束的过渡效果(越来越快)，(等同于cubic-bezier(0.42,0,1,1))
ease-out：规定以快速开始，慢速结束的过渡效果(越来越慢)，(等同于cubic-bezier(0,0,0.58,1))
ease-in-out：规定以慢速开始和结束的过渡效果，(等同于cubic-bezier(0.42,0,0.58,1))
cubic-bezier(n,n,n,n)：贝赛尔曲线，功能演示

4.animation-delay

animation-delay：规定何时开始动画效果

animation-delay: time;

time：规定何时开始动画效果，默认值为0，意味着立即开始，单位为s(秒)、ms(毫秒)

5.animation-iteration-count

animation-iteration-count：规定动画播放的次数

animation-iteration-count: n | infinite;

n：默认值为1，也就是一次，正整数，不能为负值
infinite：无限次播放

6.animation-direction

animation-direction：定义是否循环交替反向播放动画

animation-direction: normal | reverse | alternate | alternate-reverse;

normal：默认值，动画按正常播放
reverse：动画反向播放
alternate：动画在奇数次(1, 3, 5)正向播放，在偶数次(2, 4, 6)反向播放
alternate-reverse：动画在奇数次(1, 3, 5)反向播放，在偶数次(2, 4, 6)正向播放

7.animation-fill-mode

animation-fill-mode：规定动画不播放时，元素的样式(动画完成或延迟未开始播放时)

animation-fill-mode: none | forwards | backwards | both;

none：默认值，动画在动画执行之前和执行之后，不会应用任何样式到目标元素
forwards：在动画结束后，动画的最后位置，在动画开始前，元素在正常文档流的位置
backwards：在动画开始前，动画的位置是关键帧的第一个的值，(当animation-direction为反向时，则是最后第一个关键帧)，动画结束会跳回元素在正常文档流的位置
both：forwards和backwards的值都会应用

8.animation-play-state

animation-play-state：规定动画是否正在运行或已暂停

animation-play-state: running | paused;

running：默认值，正在运行
paused：暂停动画

hover移入暂停，移出运行的效果

div{
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation:mymove 5s;
    
    /* Safari and Chrome */
    -webkit-animation:mymove 5s;

}

div:hover {
    animation-play-state:paused;
    
    /* Safari and Chrome */
    -webkit-animation-play-state:paused;
}

@keyframes mymove
{
    from {left:0px;}
    to {left:200px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
    from {left:0px;}
    to {left:200px;}
}

十二、媒体查询

RWD响应式布局：一套应用程序用户界面能够响应不同设备窗口或屏幕尺寸，并且内容、布局渲染表现良好

@media媒体查询，可以针对不同的媒体类型定义不同的样式

1.语法

CSS语法

mediatype：媒体类型

and|not|only：逻辑运算符

media feature：媒体条件

三类都可省略，只使用其中的几个条件也能使用

@media mediatype and|not|only (media feature) {
    /* CSS样式块 */
}

/* screen 当设备是电脑屏幕、平板电脑、智能手机，且width(屏幕宽度) > 900px时，body的background-color为blue */ 
@media screen and (min-width: 900px) {
    body {
        background-color: blue;
    }
}

link标签

使用media属性，语法跟CSS的一致，去掉@media即可

<link rel="stylesheet" type="text/css" href="index.css" media="screen and (min-width: 400px)">

style标签

使用media属性，语法跟CSS的一致，去掉@media即可

<style media="(min-width: 500px)">
    body {
        background-color: blue;
    }
</style>

<style media="(max-width: 500px)">
    body {
        background-color: red;
    }
</style>

@import

在后面拼上，语法跟CSS的一致，去掉@media即可

@import url(./index.css) (min-width: 350px);
@import url(./home.css) screen and (max-width: 900px);

2.mediatype媒体类型

设定媒体查询的设备类型

all：默认值，所有设备上都加载
print：打印机和打印预览
screen：电脑屏幕，平板电脑，智能手机
speech：屏幕阅读器等发声设备

3.逻辑运算符

逻辑运算符not、and以及only可以被用于组成一个复杂的媒体查询。还可以使用逗号,分隔多个媒体查询来讲他们合并为一个规则

not：用于媒体查询取反值，若媒体查询返回false，则返回true。若出现在以逗号分隔的查询的列表中，它也只会对当前范围中取反。若使用not运算符，必须要指定媒体类型
```
/* 在screen类型*/
@media screen {
    div1 {
        background-color: blue;
    }
}
/* 取反,不在screen类型中 */
@media not screen {
    div2 {
        background-color: blue;
    }
}
```

and：用于将多个媒体特征组合到一个媒体查询中，它还用于将媒体条件与媒体类型连接起来

/* 在screen类型宽度大于900px */
@media screen and (min-width: 900px) {
    body {
        background-color: blue;
    }
}
/* 在screen类型宽度大于900px小于1200px */
@media screen and (min-width: 900px) and (max-width: 1200px) {
    body {
        background-color: red;
    }
}

only是为了在不支持媒体查询的浏览器中不添加样式

一般写在媒体类型之前only screen

例如
```
<link rel="stylesheet" media="screen and (min-width: 400px) and (max-width: 600px)" href="iphone.css" />
```
在不支持浏览器中会被翻译成
```
<link rel="stylesheet" media="screen" href="iphone.css" />
```
而不会去识别后面and (min-width: 401px) and (max-width: 600px)，所以在不支持媒体查询的浏览器中，只要是screen媒体类型，就会渲染样式表。

使用only关键字后
```
<link rel="stylesheet" media="only screen and (min-width: 401px) and (max-width: 600px)" href="iphone.css" />
```
在不支持的浏览器中就会翻译成
```
<link rel="stylesheet" media="only" href="iphone.css" />
```
因为并没有什么媒体类型是only，所以浏览器就不会渲染样式表

,逗号：用于将多个媒体查询组合成一个规则。逗号分隔列表中的每个查询都与其他查询分开处理。若列表中的任何查询为真，则返回真。行为就像javascript中的||运算符

/* 在screen类型宽度小于240px 或 宽度大于240px */
/* 第二个没有控制媒体类型 */
@media screen and (min-width: 560px), (max-width: 240px) {
    div {
        background-color: blue;
    }
}

/* 在screen类型且宽度小于240px 或 宽度大于360px小于700px */
/* 第二个没有控制媒体类型 */
@media screen and (max-width: 240px), (min-width: 360px) and (max-width: 700px) {
    div {
        background-color: red;
    }
}

/* 在screen类型且宽度大于900px 或 在screen类型中宽度小于1800px */
@media screen and (min-width: 900px), screen and (max-width: 1800px) {
    div {
        background-color: pink;
    }
}

4.媒体条件

根据属性判断当前使用css所在的设备，或是浏览器环境的具体特征。每条媒体条件表达式必须使用括号括起来

width：输出设备中的页面可见区域宽度
height：输出设备中的页面可见区域高度
max-width：输出设备中的页面可见区域最大宽度
max-height：输出设备中的页面可见区域最大高度
min-width：输出设备中的页面可见区域最小宽度
min-height：输出设备中的页面可见区域最小高度
max-device-width：输出设备的屏幕可见区域最大宽度
max-device-height：输出设备的屏幕可见区域最大高度

十三、IOS底部兼容

需给meta标签添加

viewport-fit=cover页面内容充满屏幕(必须有)

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">

分别创建屏幕上，右，下，左完全距离

safe-area-inset-top
safe-area-inset-right
safe-area-inset-bottom
safe-area-inset-left

IOS11版本

padding-top: constant(safe-area-inset-top);
padding-right: constant(safe-area-inset-right);
padding-bottom: constant(safe-area-inset-bottom);
padding-left: constant(safe-area-inset-left);

IOS11.2以及后版本

padding-top: env(safe-area-inset-top);
padding-right: env(safe-area-inset-right);
padding-bottom: env(safe-area-inset-bottom);
padding-left: env(safe-area-inset-left);

兼容性写法

padding-top: 10px;
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);

CSS常用属性

一、字体、文本属性

1.字体属性

1.1、font-family

1.2、font-size

1.3、font-style

1.4、font-variant

1.5、font-weight

1.6、font

2.文本属性

2.1、color

2.2、direction

2.3、unicode-bidi

2.4、letter-spacing

2.5、word-spacing

2.6、white-space

2.7、line-height

2.8、text-align

2.9、vertical-align

2.10、text-decoration

2.11、text-indent

2.12、text-transform

2.13、text-shadow

2.14、word-break、word-wrap

2.15、text-overflow

二、背景

1.background-color

2.background-image

3.background-repeat

4.background-position

5.background-attachment

6.background-size

7.background-clip

8.background-origin

9.background-blend-mode

10.background

三、列表

1.list-style-type

2.list-style-position

3.list-style-image

4.list-style

四、盒子模型

1.尺寸

1.1、width、height

1.2、min-width、min-height

1.3、max-width、max-height

2.内边距

3.边框

3.1、border-width

3.2、border-style

3.3、border-color

3.4、border-radius

3.5、border-image

4.轮廓

4.1、outline-color

4.2、outline-style

4.3、outline-width

5.外边距

5.1、外边距合并

6.阴影

五、显示、隐藏

1.display

2.visibility

3.overflow

六、浮动

1.float属性

2.浮动的特性

3.清除浮动

3.1、clear

3.2、清除浮动的方法

七、定位

1.偏移量

2.层叠性

八、其余属性

1、object-fit、object-position

1.1、object-fit

1.2、object-position

2.cursor

3.resize

4.scroll-behavior