引用CSS方式
内部引用
html文件中写一个<style>标签，并将样式写入到里面，举例：
<style type="text/css">
p {
background: blue;
font-size: large;
}
</style>
外部引用
通过<link>标签实现，里面有rel表示关系，href表示css文件地址，举例：
<link rel="stylesheet" type="text/css" href="a.css">
CSS文件内部引入其他CSS文件
@import url(xxx);
// 举例：@import url("1.css");
注1：
引用可以同时用，样式也可以覆盖样式，所以最终样式根据设置样式的优先级决定（一般范围越精确优先级越高），如果优先级相同就按最后设置的确定，比如先内部设置背景是蓝色，在后面再引用外部样式把背景弄成绿色，那么最终就是绿色。但是有个例外的就是，如果某个样式十分重要，不希望被覆盖，就可以在那个的值后面加：!important，这样就能保证样式固定，举例：
p {
color: green !important;
}
<p style="color: gray">AAA</p>
结果就会发现本该是灰色的字因为green的时候加了!important，最终显示的还是绿色
注2：
link标签不止可以引入CSS，还可以引入网页图标等，举例：
<link rel="stylesheet" type="text/css" href="https://xxx.css">
<!-- 引入CSS -->
<link rel="icon" type="image/x-icon" href="http://xxx.com/favicon.ico">
<!-- 引入网页图标（支持ico和png格式）-->
<!-- 其中type属性可以省略，但是rel属性不能省略（用于指定文档和链接资源的关系），rel设置了，对应的type默认也会被确定 -->
媒体类型
页面的在对应媒体类型的展示样式，主要是screen和print两种，分别决定了屏幕和打印时的界面样式，也可以设置all（默认），代表全部设备都兼容的样式，举例：
<style media="screen">
body {
background: blue;
}
</style>
<style media="print">
body {
background: green;
}
</style>
link标签导入
<link rel="stylesheet" href="xxx.css" media="screen">
css内部导入
@import url(xxx.css) print;
媒体流响应式设置常用关键词
screen
print
all
and
or
not
only 浏览器支持的样式才能正常显示，否则全部忽略
举例：
@media not print and (min-width: 100px) or ... {
...
}
响应式布局
如果希望界面样式能够随着窗口大小的改变而改变，即实现响应式布局，首先需要设置如下标签：
<meta name="viewport" content="width=device-width,initial-scale=1.0">
媒体查询
link标签下的media属性，可以设置css文件使用条件，因此常用来判断是在PC端还是移动端，举例：
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!-- 响应式布局必须设置的标签 -->
<link media="(min-width: 500px)" rel="stylesheet" href="pc.css" />
<!-- 当窗口宽度大于500时使用pc.css -->
<link media="(min-width: 400px) and (max-width: 500px)" rel="stylesheet" href="mobile.css" />
<!-- 当窗口宽度大于400且小于500时使用mobile.css -->
更多关于媒体查询可以参考：
https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries
设置样式条件
CSS文件中也可以通过语句来根据条件来决定是否使用该样式，举例：
@media(条件) {
样式1:xxx;
...
}
例如根据屏幕宽度改变样式：
input { /* 默认样式 */
width: 14.893617021276595%;
*width: 14.840425531914894%; /* *表示兼容IE浏览器 */
}
@media (min-width: 768px) and (max-width: 979px) { /* 窗口大小在768~979之间 */
input {
width: 14.3646408839779%;
*width: 14.311449394616199%;
}
}
更多参考
https://blog.csdn.net/u010510187/article/details/82790963
选择器
参考我的另一篇：CSS选择器
继承
继承概念：如果一个元素没有设置某个属性，那么其就会跟随于父元素的该属性值
属性继承
CSS中一些属性是可以继承的，如：color、font-size，而对于不可继承的属性，可以通过对该属性设值为inherit来实现强制继承
继承值
继承的是计算值（computed里的），而不是设置的值，例如父元素中设置font-size为50%，实际计算出来的结果是10px，那么子元素继承的就是10px而不是50%
元素区分
基于显示类型
主要分为：块级元素/行内元素
块级元素
独占一行，即使宽没有占满一行，这一行也不让别的元素使用，并且有宽高可以设置，如：div/p/ul/...
行内元素
多个行内元素能够在父元素的同一行内显示，没有宽高（inline-block属于块级和行内级的结合），如：span/a/img/iframe/canvas/video/audio等
注：：
行内元素注意：因为行内元素没有宽高（其宽高就是内容本身大小），因此无法设置width/height/margin-top/margin-bottom属性，但是可以设置margin-left/margin-right
基于内容类型
替换元素
元素本身无内容，而是根据其类型和属性来决定显示的内容，如：img/input/video/...
注：
可以看到如img虽然是行内元素，但其可以设置宽高（行内级替换元素可以设置宽高）
非替换元素
元素本身有内容，而无需本身的类型和属性来决定显示的内容，如：div/...
伪类和伪元素
常用样式
通用属性
initial 使用默认值
inherit 继承于父类
unset 不设置（可以理解为如果可继承的样式，则继承，否则使用默认值）
固定样式不被覆盖
!important /* 在样式的值后面加这个就能保证不被覆盖 */
基本单位
px 绝对单位，具体的像素大小
em 相对单位，相对于当前对象font-size的比例（如果没设置font-size会继承父类的），可以设置几个字的间距
rem 相对单位，相对于html的font-size比例
vh 相对于视图窗口的高度比例
vw 相对于视图窗口的宽度比例
vmin vw和vh中较小的一个值
vmax vw和vh中较大的一个值
fr 按比例分配
如果当前标签使用了em单位，但没有font-size，就找父元素的font-size，所以body是整体的默认font-size，其他的应该根据body的用em按比例设置font-size（而子元素则根据父元素的比例设置font-size），否则直接写死的话，将来维护将会特别麻烦
还有如rem/vw/vh等单位，可以参考：https://blog.csdn.net/u013594477/article/details/80232495
颜色相关
color
设置标签的前景色（除了背景色以外的，例如文字、边框、外轮廓等颜色，而不单只是文字颜色），举例：
color: red;
opacity
透明度，举例：
opacity:0.4; /* 透明度百分比 */
transparent
完全透明，相当于rgba(0,0,0,0)，举例：
background-color: transparent;
linear-gradient
线性渐变，举例：
background: linear-gradient(to left, red, green, blue);
/* 从右往左依次红绿蓝渐变 */
background: linear-gradient(to right top, red, blue); /* 从左下角到右上角，红色到蓝色渐变 */
background: linear-gradient(60deg, red, blue, green, yellow, pink, white);
/* 旋转60度，从左到右按上面传递颜色渐变 */
radial-gradient
径向渐变，举例：
background: radial-gradient(100px 100px, red, green, blue);
/* 红绿蓝分别以半径50px从圆心向外扩散 */
background: radial-gradient(red, blue, green, yellow, pink, white);
/* 从里到外按上面传递颜色渐变 */
background: radial-gradient(circle at 10px 10px, red, blue, green 50%, yellow, pink, white);
/* 从(10, 10)开始，以圆形往外按上面传递颜色渐变，并且绿色的范围只占原来的一半 */
background: radial-gradient(300px 100px ellipse, red, green, yellow, white);
/* 横向300px，纵向100px的椭圆往外按上面传递颜色渐变 */
repeating-linear-gradient
重复线性渐变，我们可以用其实现一些条纹样式，举例：
background: repeating-linear-gradient(45deg, blue 0px, blue 30px, white 30px, white 60px);
/* 倾斜45度，0~30px部分为蓝色，30~60px部分为白色，循环线性渐变的蓝白条纹 */
repeating-radial-gradient
重复径向渐变，举例：
repeating-radial-gradient(circle, blue 10px, white 20px)
/* 圆形，0~10px部分为蓝色，10~30px部分为白色，循环径向渐变的蓝白条纹 */
盒子模型相关
margin
外边距，举例：
margin: 0px 0px 0px 0px; /* 四个分别表示上右下左的外边距，也有对应的margin-top等 */
padding
内边距，举例：
padding: 0px 0px 0px 0px; /* 四个分别表示上右下左的内边距 */
border
边框，举例：
border: 1px solid green; /* 边框粗细、边框类型、边框颜色 */
通过border实现三角形
div {
height: 0px;
width: 0px;
border-left: 100px solid yellow;
border-bottom: 100px solid transparent;
transform: rotate(45deg)
}
两个border连在一起，中间会有条斜线隔开，把元素长宽改成0，并且其中一个border设成透明，就是三角形了，然后可以通过transform调整方向
border-collapse
合并边框，举例：
table {
border-collapse: collapse;
}
border-radius
边框角度，举例：
border-radius: 10px; /* 代表4个角都变成半径为10px的圆角，可以传四个数值，一次为左上->右上->右下->坐下 */
border-radius: 50%; /* 直接拿尺寸的一半变成半径，相当于直接变成椭圆/圆了 */
box-shadow
盒子阴影，属性取值：
水平偏移(px) 垂直偏移(px) 模糊半径(px) 延伸距离(px) 阴影颜色(color) 内框阴影(inset，默认外框)
举例：
box-shadow: 10px 10px 5px 10px green inset;
/* x轴往右偏移10px（负的就代表向左偏移），y轴往下偏移10px，
模糊范围宽度为5px，阴影尺寸为10px，颜色为绿色，向内展示阴影 */
box-sizing
设置盒子模型类型，主要分为两种：
标准盒子模型：实际宽高width/height为内容（content）的宽高，也是默认常用的
IE盒子模型：元素实际宽高width/height中把padding和border也算在内（content+padding+border），适合经常调整padding，但不希望宽高发生变化的时候（固定width/height，那么调整padding时，只会改变content。但要注意其不会改变border，因此当content缩小到0时，padding+border还是超出了宽高限制时，那么宽高以超出的结果为准，例如：height为100px，padding为50px，border为10px，那么最终的content为0，height为0+50*2+10*2=120）
取值如下：
content-box 标准盒子模型，默认（width/height = content）
border-box IE盒子模型（width/height = content + padding + border）
height/width自适应属性
fill-available 自动撑满可用空间
fit-content 内容多大就多大
max-content
min-content
布局相关
display
设置元素的显示类型，常用值如下：
block 块级元素
inline 行内级元素
inline-block 同时具备块级、行内级元素特征：跟多个行内级元素可以同一行显示，并且可以设置宽高（默认由内容决定）
none 不占空间（隐藏）
注：
块级元素和inline-block元素一般内部可以包含块级、inline-block、行内级元素，但是p标签作为块级元素，不能包含块级元素；行内级元素一般内部只能包含行内级元素
display其他属性
table table标签
inline-table inline的table标签
table-row tr标签，表格中的一行
table-cell td/th标签，一个单元格
table-row-group tbody标签，表格内容
table-header-group thead标签，表格头
table-footer-group tfoot标签，表格尾部
table-caption caption标签，表格的标题
list-item li标签
grid 栅格布局
栅格布局
将元素拆分为xx行和yy列进行展示，类似于表格的布局，但对于各行各列的宽高占比，可以很方便的进行分配，举例：
<head>
<style>
.grid {
background-color: white;
display: grid;
/* 栅格布局 */
grid-template-rows: auto;
/* 多行高度平均分配 */
grid-template-columns: 1fr 2fr 3fr 2fr 1fr;
/* 每行分5列，宽度比为：1:2:3:2:1 */
height: 300px;
width: 600px;
grid-gap: 2px;
}
.grid>div{
background-color: cadetblue;
}
</style>
</head>
<body>
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
</div>
</body>
栅格布局相关属性
类似栅格系统一样可以给内容分列显示
- 分列数：column-count
column-count: 3; /* 分3列 */
- 分列间隔：column-gap
column-gap: 10px; /* 分列间隔为10px */
- 分列边框样式：column-rule
column-rule: 2px solid yellow; /* 分列边框2px，黄色 */
flex
弹性布局，在移动端开发中很常用，其中设置display: flex;或display: inline-flex;的元素被称为flex container，而其的直接子元素（子元素的子元素不算）则被称为flex items
常用属性
flex-direction
container配置，规定主轴的方向，常用值如下：
row 主轴从左到右，交叉轴从上到下
row-reverse 主轴从右到左，交叉轴从上到下
column 主轴从上到下，交叉轴从左到右
column-reverse 主轴从下到上，交叉轴从左到右
justify-content
container配置，规定flex items在主轴上的对齐方式，常用值如下：
flex-start 与主轴头对齐（例如`row`下就是向左对齐）
flex-end 与主轴尾对齐
center 居中对齐
space-between 两端对齐，并且`flex items`之间距离相等
space-evenly 在两端以及`flex items`之间距离相等
space-around 在两端的距离是`flex items`之间距离的一半
align-items
container配置，规定flex items在交叉轴的对齐方式，常用值如下：
flex-start 与交叉轴头对齐
flex-end 与交叉轴尾对齐
center 居中对齐
baseline 与基线对齐
strech 如果flex items在交叉轴方向的size为auto时，将填充占满交叉轴
flex-wrap
container配置，规定flex container是单行还是多行（当单行的item宽度超过时才会换行）
nowrap 单行，默认
wrap 多行
wrap-reverse 多行，但是交叉轴是反过来的
flex-flow
container配置，flex-direction和flex-wrap的简写，举例：
flex-flow: cloumn wrap;
align-content
container配置，规定多行flex items在交叉轴的对齐方式，常用值如下：
flex-start 与交叉轴头对齐
flex-end 与交叉轴尾对齐
center 居中对齐
stretch 如果多行flex items在交叉轴方向的size为auto时，将填充占满交叉轴
space-between 交叉轴两端对齐，并且`flex items`之间距离相等
space-evenly 交叉轴两端以及`flex items`之间距离相等
space-around 交叉轴两端的距离是`flex items`之间距离的一半
举例：
<style>
.row {
display: flex;
background-color: gold;
width: 250px;
height: 300px;
flex-wrap: wrap;
align-content: space-between;
}
.col {
background-color: pink;
width: 100px;
height: 100px;
border: 1px solid beige;
box-sizing: border-box;
}
</style>
<body>
<div class="row">
<div class="col">1</div>
<div class="col" style="height: 30px">2</div>
<div class="col">3</div>
<div class="col" style="height: 120px">4</div>
</div>
</body>
order
item配置，规定flex items的排列顺序，可以设置任何整数（默认为0），值越小越靠前
align-self
item配置，通过该属性可以覆盖flex container中设置的align-items属性，属性值参考align-items
flex-grow
item配置，规定flex items的扩展系数，可以设置任意正数或者0（默认为0），代表在主轴的扩展相对比例，举例：
<style>
.row {
display: flex;
background-color: gold;
width: 600px;
height: 100px;
flex-wrap: wrap;
align-content: space-between;
}
.col {
background-color: pink;
width: 100px;
height: 100px;
border: 1px solid beige;
box-sizing: border-box;
}
</style>
<body>
<div class="row">
<div class="col" style="flex-grow: 1;">1</div>
<div class="col" style="height: 30px; flex-grow: 2;">2</div>
<div class="col">3</div>
<div class="col">4</div>
</div>
</body>
注：
该属性只有flex container在主轴方向有剩余空间时才有效
flex-shrink
item配置，规定flex items的收缩系数，可以设置任意正数或者0（默认为1），其中值大于1则收缩，值大于0小于1则放大（相对），举例：
<style>
.row {
display: flex;
background-color: gold;
width: 300px;
height: 100px;
}
.col {
background-color: pink;
width: 100px;
height: 100px;
border: 1px solid beige;
box-sizing: border-box;
}
</style>
<body>
<div class="row">
<div class="col" style="flex-shrink: 20;">1</div>
<div class="col" style="height: 30px; flex-shrink: 0.1;">2</div>
<div class="col">3</div>
<div class="col">4</div>
</div>
</body>
注：
该属性只有flex items在主轴方向的尺寸超过了flex container的尺寸时才有效
flex-basis
item配置，规定flex items在主轴上的基础尺寸，默认是content大小，常用值如下：
auto 默认
数字 代表具体的基础size
举例：
<style>
.row {
display: flex;
background-color: gold;
width: 300px;
height: 100px;
}
.col {
background-color: pink;
width: 100px;
height: 100px;
border: 1px solid beige;
box-sizing: border-box;
}
</style>
<body>
<div class="row">
<div class="col" style="flex-basis: 200px;">1</div>
<div class="col" style="height: 30px;">2</div>
<div class="col">3</div>
<div class="col">4</div>
</div>
</body>
注：
在item上设置flex-basis和width大多情况结果相同，但flex-basis的优先级高于width，但flex-basis和width一样都会受到min-width/max-width的制约，更多参考：https://juejin.cn/post/6844903914148462599
flex
item配置，flex-grow、flex-shrink和flex-basis的简写，其支持单值语法、双值语法和三值语法，举例：
flex: 0; // flex:0 1 0;
flex: 100px; // flex-basis: 100px;
flex: 1 1; // flex:1 1 0;
flex: 0 0 auto;
定位相关
position
指定元素的定位方式，常用值如下：
static 静态定位，默认
relative 相对定位
absolute 绝对定位
fixed 固定定位
sticky 粘性定位
静态定位
标准流布局下的默认定位方式
注：
标准流：元素默认从上到下，从左到右的排序方式
相对定位
在标准流布局下，可以通过left/right/top/bottom属性，参照原来的位置进行定位偏移
绝对定位
元素脱离标准流，通过left/right/top/bottom属性，参照父元素中最近的一个定位元素（非静态定位的元素）进行定位
注：
绝对定位和固定定位可能会修改元素布局，参考：https://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo
固定定位
元素脱离标准流，通过left/right/top/bottom属性，一般情况下参照浏览器窗口的位置进行固定定位，但也有例外，例如下面：
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.parent {
transform: scale(1);
position: relative;
left: 100px;
top: 100px;
}
.child {
position: fixed;
left: 0px;
top: 0px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">child</div>
</div>
</body>
</html>
可以看到明明fixed定位到页面左上角，实际上却有100px的间隔，这是因为当元素祖先的 transform, perspective 或 filter 属性非 none 时，容器由视口改为该祖先，所以child参照的是parent节点而不是视口
参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/position
粘性定位
类似于相对定位+固定定位，当内容没到父元素边界时，按相对定位行为正常展示；当到达父元素边界时，则会固定在指定位置上，适用于那种阅读文章时，固定当前章节的标题在顶部的场景，举例：
<head>
<style>
.main {
width: 200px;
height: 200px;
overflow: auto;
}
.head {
position: sticky;
width: 200px;
height: 30px;
top: 0px;
background-color: red;
}
.content {
height: 200px;
background-color: burlywood;
}
</style>
</head>
<body>
<div class="main">
<div class="head">111</div>
<div class="content">xxxxxxx</div>
<div class="head">222</div>
<div class="content">yyyyyyy</div>
<div class="head">333</div>
<div class="content">zzzzzzz</div>
</div>
</body>
注：
绝对定位元素（绝对、固定）都会脱标，并且不再区分inline和block，宽高默认是自己的内容大小，但是可以设置宽高（类似inline-block，但不是，此时设置display属性已经对其没有效果）
子绝父相
由于绝对定位的参照是父元素中最近的定位元素（非静态定位的元素），如果此时不希望父元素脱标，一般会讲父元素设置为相对定位，也就是所谓的"子绝父相"
z-index
用于设置定位元素（非静态定位的元素）的层叠关系
元素重叠问题
- 非定位元素（static）一般不会重叠，但可以使用margin之类的属性实现重叠，此时一般后面的元素会盖在前面的上面
- 定位元素一定是盖在非定位元素上
- 定位元素之间可以通过z-index来确定层叠关系
z-index对比原则
同一个祖先元素下对比（兄弟关系，直接当前元素比较）：
-
z-index大的盖在上面（没设置默认是0）； -
z-index相等，那么后面的盖在上面；
非同祖先元素对比（各自找出祖先元素中离自己最近的定位元素比较，标准和上面一样，跟当前元素的z-index无关），例如：
<head>
<style>
.a1, .a2 {
height: 100px;
width: 100px;
position: relative;
}
.a1-1, .a2-1 {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div class="a1" style="z-index: 10;">
<div class="a1-1" style="background: blue; z-index: 10;">div1</div>
</div>
<div class="a2" style="z-index: 1; top: -30px; left: 10px;">
<div class="a2-1" style="background: green; z-index: 1000;">div2</div>
</div>
</body>
这里因为div1的祖先元素大于div2的祖先元素，因此无论div2的z-index设置多大，都不可能盖住div1，只能通过将其祖先元素.a2的z-index调大才能实现
float
浮动样式，常用值如下：
none 不浮动，默认
left 向左浮动
right 向右浮动
float层叠关系
- 对于非定位元素，float元素一定盖在其上方
- 对于定位元素，一定盖在float元素上方
float规则
- 一旦设置了
float属性不为none，则脱离标准流，直接往左/右边的父元素边界或者其他浮动元素上靠 - float元素不能和行内级内容重叠（如span标签的行内元素、inline-block，包括块级内容里面的文字也是），其会将这些内容挤出去，因此可以用该特性实现文字环绕（图片作为浮动元素，将内部的文字挤开，从而实现效果）
- float之间也不能重叠，而是紧贴上去。如果水平方向上空间不够时，则会沿垂直方向移动一些，直到有充足的空间可以装下该元素
clear
控制自身元素和浮动对象的位置关系，常用值如下：
none 无特殊要求，默认
left 要求元素顶部低于之前所有左浮动元素的底部（左侧不能有浮动元素）
right ...右浮动...
both ...左/右浮动...
背景相关
background-color
背景颜色，举例：
background-color: rgba(0, 0, 0, 0.3); /* rgba前三个参数是三原色，最后一个是透明度百分比 */
background-image
背景图片，其会盖在background-color上，并且可以设置多张图片，举例：
background-image: url("xxx.jpg"), url("yyy.jpg"), ...;
设置多张图片时，第一张展示在最上面，其他的依次往下叠（所以是叠在一起展示的）
注1：
使用image-set设置多个背景图片时，还可以设置尺寸，此时浏览器会自动识别当前屏幕分辨率，并选择适配的背景图，举例：
background-image: image-set(url("xxx.jpg") 1x, url("yyy.jpg") 2x, ...);
注2：
设置的背景图片，需要元素有具体的宽高才能够展示出来
background-repeat
设置背景图片的展示是否平铺，常用值如下：
no-repeat 不平铺
repeat 平铺
repeat-x 水平平铺
repeat-y 垂直平铺
background-size
设置图片尺寸，举例：
background-size: 100px 50px;
/* 指定宽100px，高50px */
background-size: auto 50px;
/* 指定宽维持图片原本宽高比，高50px */
background-size: 100px auto;
/* 指定宽100px，高维持图片原本宽高比 */
background-size: 100px;
/* 指定宽100px，高维持图片原本宽高比（第二个不写，默认auto） */
background-position
背景图片在水平/垂直方向的具体位置，第一个是水平方向，第二个是垂直方向，举例：
background-position: 10px 20px;
/* 往右移动10px，往下移动20px */
其他设值：
水平：left|center|right
垂直：top|center|bottom
如果只设置一个，另一个默认是center
注：
该属性常结合雪碧图使用
background-attachment
设置背景图片的显示行为，常用值如下：
scroll 背景图片随元素一起滚动，默认
local 背景图片跟随元素及元素内容一起滚动
fixed 背景图片相对于浏览器窗口固定
注：
该属性经常用于希望整体页面背景不随着页面一起滚动的时候
background
是前面几个属性的简写属性，举例：
background: url("xxx.jpg") right bottom no-repeat fixed red;
/* 属性可省略，顺序也可以任意，但background-size必须紧跟在background-position后面 */
background-clip
背景覆盖到哪，常用值如下：
content-box 只覆盖内容
padding-box 只到padding里
border-box 只到边框，默认
字体相关
font-size
字体大小，举例：
font-size: 30px;
font-weight
字体粗细，举例：
font-weight: 100;
font-family
设置字体，可以设置多个，用逗号隔开
注1：当设置多个字体时，每个字（不是整个标签，而是以字符为单位）都会从第一个字体开始匹配，如果该字体能用，就不看后面的:
字体除非是有空格或者中文名，否则可以不加引号，举例：
font-family: "微软雅黑", Consolas, "Microsoft ..."
注2：因为中文字体一般兼容英文，这样英文字体可能就无法应用到英文上，所以英文字体应该放前面
@font-face
加载自定义字体，举例：
@font-face {
/* 加载一个字体 */
src: url("font/xxx.ttf");
font-family: "我的字体";
/* 给字体命名 */
}
.test {
font-family: "我的字体";
/* 使用前面加载的字体 */
}
font-style
字体样式，常用值如下：
normal 正常
italic 斜体
oblique 倾斜
注：如果字体不支持斜体那么italic则没有效果，而oblique则是不管支不支持斜体，都会将内容倾斜表示
文本相关
text-align
文字水平对齐，常用值如下：
left 左对齐
right 右对齐
center 居中
justify 两端对齐
vertical-align
设置行内级元素在垂直方向的位置，常用值如下：
baseline 与基线对齐，默认
sub 将元素基线下降
super 将元素基线上升
middle 元素中心点与父元素基线加上字母x一半高的线对齐
text-top 元素顶部和父元素内容的顶部对齐
text-bottom 元素底部和父元素内容的底部对齐
top 元素顶部和行顶部对齐
bottom 元素底边和行底边对齐
百分比 将元素基线上升/下降一定距离（相对于行高计算）
具体像素 将元素基线上升/下降一定距离
使用场景：如一些数学公式的上标和下标就 可能用到sub/super
line-height
行高，定义：两行文字baseline之间的间距
baseline：小写字母x底部的对齐线
设置值：
数字+px 具体像素值
数字 相对于font-size的比例
百分比 相对于font-size的比例
normal 浏览器自动调整
注：
line-height设置的仅是最小行高，而不是最终行高，具体的行高可能会因为其他元素的影响而改变，例如下面这个例子：
div {
line-height: 20px;
}
<div>aaa<img src="xxx.jpg"></div>
如果图片的高度大于20px，那么最终也会发现div的行高不止20px
letter-spacing/word-spacing
设置字符/单词的间距
word-break
设置文本换行，有以下可选值：
normal 默认
break-all 可在任意字符间断行
keep-all CJK 文本(CJK 指中文/日文/韩文) 不断行。 Non-CJK 文本表现同 normal
break-word 以单词为换行依据
参考：https://blog.csdn.net/pan_junbiao/article/details/7418102
https://developer.mozilla.org/en-US/docs/Web/CSS/word-break
text-transform
设置字母大小写转换，有以下可选值：
capitalize 每个单词的首字母大写
uppercase 每个单词全部转大写
lowercase 每个单词全部转小写
none 不进行转换处理，默认
white-space
设置空白处理和换行规则，常用值如下：
normal 合并所有连续的空白，水平内容超出时自动换行
nowrap 合并所有连续空白，不允许自动换行
pre 不合并所有连续空白，不允许自动给换行
pre-wrap 不合并所有空白，允许自动换行
pre-line 合并所有连续空白（除了换行），允许自动换行
注：
可以看出<pre>标签就是通过设置white-space: pre;实现的
text-overflow
控制文字溢出时的行为，常用值如下：
clip 溢出部分剪掉
ellipsis 溢出部分用省略号表示
注：
使用text-overflow的前提是overflow部分不允许可视，例如：overflow: hidden;，我们可以结合该属性实现多余内容用省略号展示，举例：
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-decoration
文本样式，举例：
text-decoration: none; /* 去除下划线 */
text-shadow
文本阴影，和盒子阴影用法差不多
text-stroke
字体边框，举例：
color: transparent;
-webkit-text-stroke: 2px green;
-moz-text-stroke: 2px green;
/* 字体透明，边框绿色的镂空文字，该属性需要设置兼容性 */
变形相关
transform
可以设置各种变形样式，其中有很多的属性，可以多个组合使用，下面会介绍这些属性
translateX/translateY/translateZ/translate/translate3d
沿x轴/y轴/z轴/x+y轴/x+y+z轴移动一定距离，举例：
transform: translate(20%, 100px);
rotateX/rotateY/rotateZ/rotate/rotate3d
沿x轴/y轴/z轴/x+y轴/x+y+z轴旋转，举例：
transform: rotate(45deg);
perspective
透视，一般和旋转组合使用，举例：
transform: perspective(300px) rotateY(45deg);
scaleX/scaleY/scaleZ/scale/scale3d
沿x轴/y轴/z轴/x+y轴/x+y+z轴缩放，举例：
transform: scale(2);
skewX/skewY/skewZ/skew/skew3d
沿x轴/y轴/z轴/x+y轴/x+y+z轴倾斜，举例：
transform: skew(45deg);
transform-origin
设置变形参考点（以哪个点为基准进行运动，默认是中心点），举例：
transform-origin: 0% 100%;
/* 以左下角为参考点 */
transform: rotate(45deg);
注：
设置3d参考点，则直接加第三个参数即可，但必须用固定的像素值（因为z轴没有可参考的比例，只有0~∞），举例：
transform-origin: left top -500px;
transform-style
设置变形呈现的样式，常用值如下：
flat 平面展示
preserve-3d 3d展示
backface-visibility
元素背面是否可视，常用值如下：
visible 可视，此时将以镜像方式展示元素正面的内容
hidden 隐藏，背面直接变成透明
过渡动画相关
参考：http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html
transition
从一种样式到另一种样式的过渡时间，最好不要放在hover之类的伪类里，那样一离开对应状态就没有过渡时间了，直接放在元素本身里，这样比较好，举例：
<head>
<style>
.a1 {
height: 100px;
width: 100px;
position: relative;
background: blue;
transform: perspective(500px) rotatey(45deg);
}
.a1-1 {
height: 100%;
width: 100%;
background: green;
transition: 2s;
/* 不要放在hover里 */
}
.a1-1:hover {
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="a1">
<div class="a1-1">div</div>
</div>
</body>
transition-property
指定参与过渡的属性（默认是全部属性），举例：
transition-property: width, height;
transition-duration
设置各个属性的过渡时间：
transition-property: width, height;
transition-duration: 1s, 2s;
/* 宽度变化进行1秒，高度变化进行2秒 */
注：
当设置的时间和属性数量不匹配时，会循环赋值，例如有4个参与过渡的属性，设置了3个过渡时间，那么第四个属性的过渡时间就参照第一个的
transition-timing-funciton
设置过渡的运动轨迹（例如先变很快然后再慢、匀速等），举例：
transition-timing-funciton: linear;
/* 匀速变化 */
transition-timing-funciton: steps(3, start);
/* 分3步变化，从初始样式开始，适合时钟那样按帧数变化的场景 */
transition-delay
延迟触发，举例：
transition-delay: 1s;
适合场景：例如某些样式不希望鼠标一到上面就触发，可能只是鼠标不小心划过，如果想要触发，就需要鼠标停在上面一会儿
帧动画相关
使用步骤
- 通过
@keyframes 动画名{}定义动画，可以通过from和to定义初始和结束状态，也可以通过xx%百分比来定义不同时段的状态 - 通过
animation属性来使用动画，传入的值依次为：动画名 动画时间 延迟执行时间 执行次数 变化效果 是否循环
举例：
@keyframes change-color {
0%, 50% {
background: black;
}
25% {
background: green;
}
100% {
background: white;
}
}
div {
height: 100px;
width: 100px;
animation: change-color 4s 1s infinite linear alternate;
/*使用change-color动画，执行4s，延迟1s才开始，无限循环，线性变换，
动画一次周期结束后逆向播放（即变换样式是：1->2->3->4->3->2->1->2->...）*/
}
animation-name
指定定义的帧动画名，可以指定多个
animation-duration
一次帧动画执行的时间
animation-iteration-count
帧动画循环执行多少次，对多个动画可以分别指定次数，无限循环则设置infinite
animation-direction
帧动画执行方向
animation-fill-mode
帧动画填充模式
animation-timing-function
分步执行帧动画，举例：
animation-timing-function: steps(3, start);
animation
前面样式的组合写法，举例：
animation: changeColor forwards 2s;
svg样式
fill
图标的填充颜色，举例：
svg {
fill: currentColor;
}
其他样式
cursor
鼠标光标在元素上的显示样式，常用值如下：
auto 浏览器根据上下文自己决定
default 默认是一个小箭头
pointer 一个手指
text 编辑样式
none 没有鼠标光标显示
注：
cursor还可以设置图片，以及在图片上的偏移位置，举例：
cursor: url("xxx.png") 0 0, pointer;
/* 使用图片来代替光标，其中在图片上水平和垂直方向向上偏移为0，当图片不存在时使用pointer代替 */
list-style
li标签样式，举例：
list-style: none; /* 不显示前面的符号 */
outline
设置元素的外轮廓，主要用于设置a/input元素focus时的轮廓效果，其不占用空间，默认显示在border外部，相关属性：
outline-width 宽度
outline-style 样式，如：solid/dotted
outline-color
ouline 上面3个的简写，和border用法差不多
outline-offset outline和border的间距
例如focus效果去除，举例：
:focus {
outline: none;
}
visibility
控制元素是否可视，常用值如下：
visible 显示元素
hidden 隐藏元素
注：
visibility: hidden/display: none区别：前者虽然隐藏了，但元素的宽高位置还是会占着，可以理解为"透明"了；后者则不但隐藏了，连宽高都没了，可以理解为"完全消失"了
overflow
控制内容溢出时的行为，常用值如下：
visible 溢出照样可见
hidden 溢出隐藏
scroll 溢出可通过滚动条查看，但不论是否溢出都会显示滚动条
auto 当内容溢出时则显示滚动条
注：
还有overflow-x/overflow-y属性分别用于设置水平和垂直方向的溢出行为
filter
设置元素显示样式，举例：
filter: blur(10px);
/* 图片模糊展示 */
user-select
控制元素是否可被选中，常用值如下：
text 可以选中，也就是变蓝色（默认）
none 文本不可被选中
all 当双击子元素或者上下文时，最顶层也同时被选中
contain 只能在当前元素内部选择
参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/user-select
object-fit
指定替换元素的宽高适配方式，常用值如下：
fill 填充并拉伸
contain 保持宽高比缩放
cover 保持宽高比填充
none 保持原来尺寸
scale-down 选择none和contain中更小的尺寸
参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit
object-position
指定替换元素在内容框中的位置，举例：
object-position: 50% 50%;
object-position: left top;
object-position: 50px 100px;
pointer-events
指定元素的鼠标事件触发机制，举例：
// 不触发点击事件
pointer-events: none;
参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events
函数
var
可以使用定义的变量，举例：
:root {
--theme-color: blue; // 定义变量--theme-color
}
body {
background-color: var(--theme-color); // 通过var获取对应变量
}
参考：
http://www.ruanyifeng.com/blog/2017/05/css-variables.html
https://developer.mozilla.org/zh-CN/docs/Web/CSS/--*
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties
calc
可以进行不同单位之间的运算，举例：
width: calc(100% - 50px); // 注意运算符两端要有空格
关键字
颜色相关
currentColor
用于指代当前的颜色（color值，可以继承自父元素），一般情况下可以理解成color: inherit;，但是对于其他颜色属性（如：background-color/fill/...）想要保持和color值一致是，可以使用该关键字替代，举例：
svg {
fill: currentColor;
}
参考：
https://www.zhangxinxu.com/wordpress/2014/10/currentcolor-css3-powerful-css-keyword/
https://developer.mozilla.org/zh-CN/docs/Web/CSS/color_value
https://blog.csdn.net/weixin_30642305/article/details/99194229
https://blog.csdn.net/crper/article/details/52772817
居中方案
水平居中
行内元素
对于块级元素中的行内元素如果希望居中，可以直接设置text-align: center;实现
块级元素
如果是没有脱标的块级元素，可以使用如下方案：
- 对块级元素本身通过设置
margin: 0 auto;实现（如果没成功，最好看看块级元素的宽度是否本身占满一行） - 对父元素使用弹性布局设置：
display: flex;
justify-content: center;
如果是绝对定位元素，可以定位如下：
position: absolute;
width: 宽度;
left: 50%;
margin-left: -宽度的一半;
即：左边移动到中间，然后再左移宽度的一半，这样就能实现居中的效果
在不知道高度的情况下，绝对定位元素水平居中还可以实现如下：
position: absolute;
left: 50%;
transform: translateX(-50%);
即：往右移动一半，在通过transform往左移动当前位置的一半
垂直居中
行内元素
对于块级元素中的行内元素如果希望居中，可以直接设置line-height: 父元素高度;实现
块级元素
如果是没有脱标的块级元素，可以对父元素使用弹性布局设置：
display: flex;
flex-direction: column;
justify-content: center;
如果是绝对定位元素，可以定位如下：
position: absolute;
height: 宽度;
top: 50%;
margin-top: -高度的一半;
即：上边移动到中间，然后再往上移高度的一半，这样就能实现居中的效果
在不知道高度的情况下，绝对定位元素垂直居中还可以实现如下：
position: absolute;
top: 50%;
transform: translateY(-50%);
注：
绝对定位元素整体居中可以直接合并成下面这样：
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
原理：由于元素width = margin-left + left + 内容width + right +margin-right，所以将left/right置0以后，再设置margin: auto使得margin-left/margin-right平分元素width减去内容width的部分，就实现居中了
样式参考
页面呈灰白
html {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}
滚动条样式
举例：
::placeholder {
color: rgba(0, 0, 0, 0.54);
opacity: 1;
}
参考：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/::placeholder
https://www.cnblogs.com/sherryweb/p/11023311.html
https://developer.mozilla.org/zh-CN/docs/Web/CSS/::-webkit-scrollbar
简单遮罩效果
首先设计一个display样式将需要遮罩的部分覆盖，并将其设为不可见（none），当需要遮罩时，再将其设置为block块覆盖显示，代码示例如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.cover {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.1);
display: none;
z-index: 1000;
}
</style>
</head>
<body>
<button id="coverAll">点击开启遮罩</button>
<div class="cover">
<div align="center" style="height: 100%; width: 100%; line-height: 500px; ">遮罩效果</div>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript">
$("#coverAll").click(function () {
$(".cover").css("display", "block");
setTimeout(function () {
$(".cover").css("display", "none");
}, 5000)
})
</script>
</html>
注意点
元素空格间隔问题
对于行内级、inline-block的元素，如果代码间有空格，则会导致元素间存在空格，因此有以下解决方式：
- 代码之间不要留空格
- 用注释来填中间的空格，例如：
<span>aaa</span><span>bbb</span> - 设置
font-size为0（内部的元素可以再设置自己的font-size），但该方式在safari浏览器中无效
注：
img标签底下存在4px空隙问题：也是因为空格引起，此时可以设置display: block;，或者设置font-size为0来解决问题
margin传递问题
margin-top传递：如果块级元素的顶部线与其块级父元素的顶部线重叠，那么这个块级元素的margin-top会传递给父元素
margin-bottom传递：如果块级元素的底部线与其块级父元素的底部线重叠，那么这个块级元素的margin-bottom会传递给父元素
解决方式：
- 给父元素设置
padding-top/padding-bottom - 给父元素设置
border - 给父元素或者子元素设置
display: inline-block
建议： -
margin一般是用来设置兄弟元素间的间距 -
padding一般是用来设置父子元素间的间距
margin折叠问题
垂直方向相邻的两个margin（margin-top/margin-bottom）可能会合并成一个margin，而水平方向上的margin则没有这种问题
折叠后的最终结果：
如果都是正数或者都是负数，都是取绝对值最大的那个；如果有正有负，那么取最大正数和最小负数相加
解决方式：
- 只设置其中一个元素的
margin - 使用
padding替代margin
float元素高度坍塌问题
因为float元素脱离了标准流，所以假如父元素当中有float元素，那么会导致父元素认为float元素没有高度，从而造成高度坍塌问题（父元素当中不存在高度）
解决方式：可以通过伪元素after添加高度，举例：
div::after {
content: "";
display: "block"l
clear: both;
/* height: 0; */
/* visibility: hidden; */
/* 兼容低版本浏览器 */
}
边框重叠变粗问题
参考：https://blog.csdn.net/YWB88888888/article/details/102944435
JS操作伪元素样式问题
由于伪元素是无法直接通过JS进行操作的，但我们可以通过操作伪元素对应的标签样式，从而实现伪元素样式的操作，例如下面的代码：
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
<style>
.test {
position: relative;
width: 100px;
height: 100px;
background: red;
visibility: hidden; /* 设置标签不可见 */
}
.test::before {
content: "";
position: absolute;
top: 100%;
left: 0;
width: inherit;
height: inherit;
background: inherit;
visibility: visible; /* 设置伪元素可见 */
}
</style>
</head>
<body>
<div class="test"></div>
</body>
<script>
document.querySelector(".test").addEventListener("click", (e) => {
// 伪元素继承标签元素样式，通过修改标签元素样式来修改伪元素样式
e.target.style.background = "#" + parseInt(Math.random() * (10 ** 6));
});
</script>
</html>
我们通过将原本的标签隐藏，只让伪元素显示，而伪元素的样式则继承于标签，当改变标签样式时，伪元素样式也会一同改变，从而实现动态改变伪元素样式的效果
注：
这里通过visibility: hidden;样式设置标签隐藏，但不能用display: none;来设置，否则该标签实际上就相当于不存在，而对应的伪元素也就无法显示了
img标签和background-image对比
- img标签：html元素；占用具体空间；右键能查看图片链接；能被搜索引擎收录；优先加载
- background-image：css样式；不占用空间；支持雪碧图；等html加载完以后才开始加载
选择
- 网页中重要部分使用
img标签 - 影响不大的图片使用
background-image
浏览器兼容
由于在不同的浏览器内核里规定的标准不同，所以相同的代码可能在不同的浏览器里显示也就不同，因此往往需要设置对应的兼容性，这里介绍几个常见的内核以及对应添加兼容的前缀：
- Webkit：safari、chrome、搜狗、360等浏览器的内核，前缀为：
-webkit- - Gecko：firefox的内核，前缀为：
-moz- - Trident：ie的内核，前缀为：
-ms- - Presto：opera的内核，前缀为：
-o-
因此要设置样式兼容性的话，一般在该样式前面加上对应浏览器内核的前缀即可
其他
浏览器私有前缀
-o/-xv- opera
-ms-/mso- IE
-moz- firefox
-webkit- safari/chrome
浏览器重置样式
由于标签往往有默认样式，并且在不同的浏览器当中可能展示的不同，所以为了避免样式差异以及去除一些不喜欢的默认样式，可以重置一些标签的初始样式，例如body去除边框、a去除下划线、li去除前面的修饰符
参考：css reset
编码规范
- 绝对值小于1的小数可以去掉前面的
0，举例：.5 - 样式编写顺序建议：定位、盒子模型、...
查看CSS浏览器兼容情况
雪碧图
将各种小图片合到一张图里，然后利用background-position来定位到对应的图片进行展示
优势
- 减少请求数量（只需请求一张图，而无需对每个小图都进行请求），减轻服务器压力
- 减小图片总的大小
- 无需为每个图片单独命名
雪碧图生成网站：https://www.toptal.com/developers/css/sprite-generator/
官方文档阅读
文档字段
name 属性名
value 属性可选值
initial 默认值
applies to 适用于元素（all elements-所有元素；block-level elements-块级元素）
inherited 是否可继承
percentages 是否可用百分比
media 媒体组
computed value 如何计算值
animatable 是否可动画
属性取值参考
- 并列（多个值用空格隔开）：每个值都必须按顺序写
-
|：只能有一个 -
||：可以有一个或多个，且任意顺序 -
&&：每个都必须出现，且任意顺序 -
[]：分组，代表是一个整体
CSS绘图参考
简单图形：https://www.jianshu.com/p/1a920aa066ad
实际案例：https://segmentfault.com/u/lancer07
CSS预编译语言
SCSS
是一种兼容CSS3，同时又有更加高级语法操作的语言，目前在前端开发中逐渐被广泛应用
参考：https://www.jianshu.com/p/a99764ff3c41
