CSS

一、基础标签

1、特别要点

h1标签：一个网页中只允许出现一次h1标签；
b标签与strong标签都可以加粗，但后者更具有强调性；
i标签与em标签都可以倾斜，但后者更具有强调性；
ul/ol标签样式；

html

<!-- ul标签 -->
<ul type="circle">
  <li></li>
</ul>
<!--
type="disc"：实心圆点
type="circle"：空心圆点
type="square"：实心方块
type="none"：不显示符号
-->

<!-- ol标签 -->
<ol type="A">
  <li></li>
</ol>
<!--
type="1"：数字顺序
type="A"：或者 type="a"：字母顺序
type="I"：或者 type="i"：罗马数字顺序
-->

2、相对路径

./：表示在当前文件目录下的地址，例如：./img/1.jpg表示当前文件夹目录下img文件夹里的图片；
../：表示返回上一级文件；例如：../img/2.jpg表示上一级文件夹目录下img文件夹里的图片；

3、Emmet语法

生成普通标签：标签选择器，如div；
生成div标签+class类名：类选择器，如.red；
生成div标签+id属性：id选择器，如#pink；
生成指定标签+类名+id属性：交集选择器，如p.red#pink；
生成子集：子集选择器，如ul>li；
生成内部文本：大括号，如ul>li{我是li的内容}
同时创建多个：*个数，如ul>li*3，(ul>li{我是li的内容})*3；

二、CSS基础知识

1、CSS三大特性：继承性

常见的继承属性：

color
font-style /font-weight /font-size /font-family
text-indent /text-align
line-height

继承失效的特殊情况：

如果元素有浏览器默认样式，引入时继承性依然存在，但是优先显示浏览器的默认样式。

a标签的color会继承失效；
h系列标签的font-size会继承失效；
div的高度不能继承，但是宽度有类似于继承的效果（块级元素独占一行）；

2、CSS三大特性：层叠性

给同一个标签设置不同的样式，此时样式会层叠叠加，会共用作用在标签上；
给同一个标签设置相同的样式，此时样式会层叠覆盖，最终写在最后的样式会生效；

3、CSS三大特性：优先级

属性优先级

!important > 行内样式 > id选择器 > 类选择器 / 属性 / 伪类 / 伪元素 > 标签 / 相邻 / ~ / 后代 / 子级 > 通配符 > 继承

样式优先级

行内样式 > 内部样式 > 外部样式

4、权重叠加计算

第一级：行内样式的个数；
第二级：id选择器的个数；
第三级：类选择器的个数；
第四级：标签选择器的个数；

比较规则

先比较第一级个数，如果比较出来了，之后的统统忽略；
如果第一级个数相同，此时再去比较第二级个数，如果比较出来了，之后的统统忽略；
......依次类推
如果最终所有数字相同，表示优先级相同，则比较层叠性（谁在最后，谁就生效）

5、初级选择器

通配符选择器

显示为一个星号（*），可以与任何元素匹配；

css

*{margin: 0px;}

元素选择器

通常是单个HTML元素，比如 p、h1、em、a，甚至可以是 html 本身；

css

div{border: 1px solid red;}

class选择器

class不唯一，可以重复；
样式以.开头 + class名字；
单个标签可以拥有多个class名字；
多个标签可以使用相同class名字；

css

.wrap{background-color: red;}

id选择器

id必须唯一，不可以重复；
样式以#开头 + id名字；
单个标签不可以拥有多个id名字；
多个标签不可以使用相同id名字；

后代选择器

以空格隔开

css

p strong{color:red;}

6、高级选择器

并列选择器

以,分隔

css

html, body{height: 100%;}

交集选择器

多个选择器之间无分隔

css

p.class{color: red;}
p.#id{color: blue;}

子级选择器

以>分隔，只选择该元素内的第一个子元素

css

h1>strong {color:red;}

相邻选择器

以+分隔，只选择与第一个元素之间紧密相邻、无间断的所有第二个元素，且第一个元素不生效

css

p+a{color: red;}

同级选择器

以~分隔，只选择第一个元素后面所有的第二个元素（第二元素之间无需紧密相连、可间断），且第一个元素不生效

css

p~a{color: red;}

属性选择器

以[ ]包裹属性
[att]：选择带有属性为 att 的所有元素
[att=val]：选择带有属性为 att 且属性值必须为 val 的所有元素
[att*=val]：选择带有属性为 att 且属性值包含 val 的所有元素
[att$=val]：选择带有属性为 att 且属性值以 val 结尾的所有元素
[att^=val]：选择带有属性为 att 且属性值以 val 开头的所有元素

css

a[title]{color: red;}
a[target="_self"]{color: red;}
a[href*="baidu"]{color: red;}
a[href$="com"]{color: red;}
a[href^="http"]{color: red;}

7、伪类选择器

以:分隔

状态类

:hover鼠标悬停

css

a:hover{color:pink;}
.box:hover{background-color: red;}

hover两种使用方法

后代选择器

html

<div class="wrap">
  <div class="box"></div>
</div>

<style>
.wrap{
  width: 200px;
  height:100px;
}
.box{
  width:500px;
  height:200px;
  display:none;
}
.wrap:hover .box{
  display:block;
}
</style>

相邻选择器

html

<div class="wrap"></div>
<div class="box"></div>

<style>
.wrap{
  width: 200px;
  height:100px;
}
.box{
  width:500px;
  height:200px;
  display:none;
}
.wrap:hover+.box{
  display:block;
}
.box:hover{
  display:block;
}
</style>

:link未被访问的链接（特指a标签）

css

a:link{color:red};

:visited被访问过的链接（特指a标签）

css

a:visited{color:blue;}

:active被点击按下状态

css

a:active{color:green;}
.box:active{background-color: red;}

:focus获得焦点状态

css

input:focus{border:1px solid blue;}

:checked（单选/多选）表单被勾选状态

css

input:checked{background-color:#aaa;}

:disabled选择每个被禁用的 <input>元素。

css

input:disabled{background-color: #aaa;}

结构类

:nth-child(n)元素父级的第n个子元素（该子元素需要满足该元素的选择规则，不满足则不会选中任何元素）

css

ul li:nth-child(n){color: red;}

:nth-of-type(n)该元素父级的第n个元素，无视其他元素

css

p:nth-of-type(n){color: red;}

:nth-last-child(n)
:nth-last-of-type(n)
:first-child该元素父级的第一个子元素（该子元素需要满足该该元素的选择规则，不满足则不会选中任何元素）

css

ul li:first-child{color: red;}

:first-of-type该元素父级的第一个元素，无视其他元素

css

p:first-of-type{color: red;}

:last-child该元素父级的最后一个子元素（该子元素需要满足该元素的选择规则，不满足则不会选中任何元素）

css

ul li:last-child{color: red;}

:last-of-type该元素父级的最后一个元素，无视其他元素

css

p:last-of-type{color: red;}

:empty选择没有子元素的元素。
:enabled选择每个已启用的元素。
:in-range选择具有指定范围内的值的元素。
:invalid选择所有具有无效值的元素。
:lang(language)选择每个 lang 属性值以 "language" 开头的元素。
:not(selector)选择每个非 selector 元素的元素。
:only-child
:only-of-type
:optional
:out-of-range
:read-only
:read-write
:required
:root
:target
:valid

TIP

n 所表示的可以是一个数字、奇数odd、偶数even或表达式。

8、伪元素选择器

以::分隔

::before相当于在该元素的最前面添加一个额外的子元素

css

#wrap::before{content:"Hello World!"}

::after相当于在该元素的最后面添加一个额外的子元素

css

#wrap::after{content:"Hello World!"}

TIP

必须拥有content样式，上述两个伪元素才会生效
创建的子元素默认是一个行内元素
::after常用来清除浮动
content除了写文字之外，还可以为空值或url指定一张图片等其他写法

::first-line
::first-letter
::selection

三、盒模型

1、标准盒模型

css

box-sizing: content-box;

TIP

width和height只表示content内容宽高
计算方式：盒子宽高 = width + height + border+ padding

2、怪异盒模型

css

box-sizing: border-box;

TIP

width和height只表示盒子宽高，包含content、padding和border部分；
计算方式：内容宽高 = width - height - border - padding

3、外边距合并

兄弟元素之间下垂直外边距合并

解决方案：

两个垂直的盒子任意一方添加行内块属性display:inline-block；
给盒子设置margin-bottom和margin-top值；
- 两个为正数，则取最大数；
- 一正一负，则取相加得出值；
- 两个负数，则取叠加值；

4、外边距塌陷

父子元素之间上外边距合并

解放方案：

给父级设置一个 border或padding值；
给父级设置一个overflow: hidden；
转换成行内块元素；
设置浮动float；

5、画三角形

设置一个盒子；
设置四周不同颜色大小的边框border；
给盒子的宽高设置为0，仅保留边框border；
得到四个三角形，选择其中一个或多个三角形（边框）后，其他三角形（边框）颜色设置为透明transparent；

四、元素类型

1、块级元素block

包括：div、p、h1~h6、ul、ol、li、dl、dt、dd、form、table

特点

独占一行显示
高度、宽度都是可以设置的
宽度没有设置时，默认为100%
高度没有设置时，默认由内容撑开
支持设置margin值，支持auto属性
支持设置padding值

2、行内元素inline

包括：span、a、b、strong、i、em、before、after、button

特点

和其他元素并排显示
不支持设置宽度、高度
宽度、高度默认由内容撑开
仅支持设置margin-left、margin-right值，不支持auto属性
仅支持设置padding-left、padding-right值

TIP

行内元素设置了float属性或position属性（absolute或fixed属性值）将会改变该元素自身特质，如支持设置宽高等属性。

3、行内块元素inline-block

包括：img、input

特点

与其他元素并排显示
支持设置宽度、高度
支持设置margin值，不支持auto属性
支持设置padding值
标签之间会有一个空格隔开
- 解决方案1：所有标签代码一行显示，不换行
- 解决方案2：设置font-size:0px

4、元素隐藏

visibility: hidden 隐藏元素本身，并且在网页中占位置；
display: none 隐藏元素本身，并且在网页中不占位置；

5、元素整体透明度opacity

让某元素整体（包括元素里的内容）一起变透明，取值0~1。

五、文字样式

1、单行文本溢出

css

white-space:nowrap; /* 文本不换行 */
overflow:hidden; /* 单行文本溢出隐藏 */
text-overflow:ellipsis; /* 单行文本溢出变为省略号 */

2、多行文本溢出

css

overflow: hidden; /* 多行文本溢出隐藏 */
text-overflow: ellipsis; /* 多行文本溢出变为省略号 */
display: -webkit-box;
-webkit-line-clamp: 2; /* 第几行文本变为省略号 */
-webkit-box-orient: vertical;

3、文本阴影

css

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

4、文字排版

css

letter-spacing: px|rem|em;

与 word-spacing 的区别

word-spacing 这个属性只能作用英文，意思是两个英文单词之间的距离，这里要注意是‘英文单词’而不是‘字符’，而 letter-spacing 没有任何限制可以作用于‘任何字符’。

5、基线对齐vertical-align

解决行内/行内块元素垂直对齐问题。

css

vertical-align:middle;

只针对inline、inline-block、img或table有效；
属性值top、middle、bottom，与line-height有关
属性值baseline、text-top、text-bottom，与font-size有关；使用vertical-align可以解决如下布局问题：
文本框和表单按钮无法对齐的问题
input和img无法对齐的问题
div中的文本框，文本框无法贴顶的问题
div不设高度由img标签撑开，此时img标签下面会存在额外间隙的问题
使用line-height让img标签垂直居中的问题

6、行高

让单行文本垂直居中可以设置line-height: 文字父元素高度；
网页精准布局时，会设置line-height: 1 可以取消上下间距；

六、背景样式复合写法

1、单张背景

css

background：color image repeat position/size attachment;
例1：background: #f00 url(./img/1.jpg) no-repeat left top/200px 200px scroll;
例2：background: red url(./img/2.jpg) repeat-x center/cover fixed;

2、多张背景

css

background：
color image repeat position/size attachment,
color image repeat position/size attachment;
例：background: 
   #ffff00 url(./img/1.jpg) no-repeat 0px 0px/200px 200px,
   #ff00ff url(./img/2.jpg) no-repeat center/100px 100px;

七、圆角/阴影/透明/渐变/鼠标

1、圆角

css

border-radius: 20px;

四个值：左上右上右下左下
三个值：左上右上左下右下
两个值：左上右下右上左下
一个值：四个角同一值

2、阴影

css

box-shadow:10px 5px 10px 5px red outset;

第一个值：水平偏移（必需）
第二个值：垂直偏移（必需）
第三个值：模糊距离（可选，默认0），从扩散边缘开始，向外逐渐模糊的距离
第四个值：扩散距离（可选，默认0），规则从何处开始模糊，默认0也就是盒子边，大于0则会看到阴影明显漏出，允许负值
第五个值：隐藏颜色（可选，默认黑色）
第六个值：阴影扩散方向（可选，默认ouset向外扩展，可以改为inset向内扩展）

3、透明

css

opacity: 0.1;

取值：0（完全透明） ~ 1（完全不透明）

4、线性渐变

基础写法

css

background-image: linear-gradient(red, blue);

background-image: linear-gradient(rgb(255,255,0), rgb(0,255,0));

background-image: linear-gradient(#ff00fe, #098f9e);

方向控制

css

background-image: linear-gradient(to bottom, #fb3664, #4af5db);

向上：to top
向右：to right
向左：to left
向右上角：to right top
向右下角：to right bottom
向左下角：to left bottom
向左上角：to left top

css

background-image: linear-gradient(45deg, #fb3664, #4af5db);

取值范围：0 ~ 360deg，默认为180deg。

多颜色过渡占比

css

background-image: linear-gradient(#fb3664 0%, #ff6600 30%, #4af5db 100%);

多颜色不过渡占比

css

background-image: linear-gradient(
            red 0%, red 10%, 
            green 10%, green 50%, 
            blue 50%, blue 80%,
            yellow 80%, yellow 100%);

线性重复

css

background-image: repeating-linear-gradient(red 0%, yellow 10%);

5、径向渐变

基础写法

css

background-image: radial-gradient(red, blue);

background-image: radial-gradient(rgb(255,255,0), rgb(0,255,0));

background-image: radial-gradient(#ff00fe, #098f9e);

设置形状

css

background-image: radial-gradient(circle, red, yellow, green);

取值：circle 或 ellipse 值。默认值为 ellipse（椭圆）

大小位置

css

background-image: radial-gradient(
                  200px 100px at 50% 50%,
                  red, yellow, green);

多颜色过渡占比

css

background-image: radial-gradient(red 5%, yellow 15%, green 60%);

多颜色不过渡占比

css

background-image: radial-gradient(
            #fb3664 0%, #fb366 10%, 
            #ff6600 10%, #ff6600 50%, 
            #4af5db 50%, #4af5db 80%,
            #23ff89 80%, #23ff89 100%);

多重径向渐变

css

background-image: repeating-radial-gradient(red, yellow 10%, green 15%);

渐变顺序

当一个盒子里出现多个渐变时，要先写径向渐变，再写线性渐变。

css

background-image:
                 radial-gradient(100px 100px at 0px 100px, red, blue), 
                 linear-gradient(90deg, yellow, black);

6、鼠标手势

css

cursor: default;
cursor: pointer;
cursor: url(./1.png), default;

八、浮动

1、清除浮动

方法1

直接给父级设置高度

css

.wrap{height: 200px;}

方法2

在父元素内容的最后添加一个块级元素，并设置其clear属性

css

<div class="clearfix"></div>

.clearfix{
  clear: both;
}

clear取值： left 清除左浮动 | right 清除右浮动 | both 清除所有浮动。

方法3

给父级添加单伪元素after

css

.clearfix::after{
              content: ""; /* 开启伪元素的钥匙key */
              display: block; /* 伪元素属于行内元素，要变成块级元素 */
              clear:both; /* 清除浮动仅支持块级元素 */
              /*补充写法：网页中看不见伪元素 */
              height: 0px;
              visibility: hidden;
            }

方法4

给父级添加双伪元素before/after

css

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

方法5

给父级设置hidden

css

.wrap{overflow: hidden;}

TIP

元素浮动之后，不再支持margin: auto，只支持margin确切的值。

2、BFC盒子

创建BFC盒子

html标签是BFC盒子；
float浮动元素是BFC盒子（float: left;）；
行内块元素是BFC盒子（display:inline-block;）；
overflow属性值不为visible是BFC盒子（overflow: hidden;）；

BFC盒子应用

清除浮动
解决margin塌陷

九、定位

1、相对定位

css

position: relative;

相对于自身进行移动，即以自身为参考物；
通过方位值（方位属性：top | left | right | bottom，值一般使用px或%）来调整位置；
不会脱离文档流，原本位置还在占用；
margin: auto支持水平居中，不支持垂直居中；

2、绝对定位

css

position: absolute;

相对于最近父级的相对定位进行移动，若最近父级均无相对定位则默认浏览器为参考物；
通过方位值（方位属性：top | left | right | bottom，值一般使用px或%）来调整位置；
单独使用会脱离文档流，原本位置将会腾出，原地腾空，一般配合相对定位使用（即：父相子绝）；
水平垂直居中不支持单独使用margin: auto，必须配合方位值方可生效；

TIP

当以浏览器为参考物时，使用相对定位与绝对定位时要先给浏览器设置高度为100vh。

css

html, body{ height: 100vh; }

TIP

子绝父相：让子元素相对于父元素进行自由移动
子绝父绝：在使用子绝父相的时候，发现父元素已经有绝对定位了，此时直接子绝即可

3、固定定位

css

position: fixed;

以浏览器窗口为参考物来定位；
会脱离文档流，不占位置，不随滚动条面滚动；
与父级无关系，只依赖浏览器窗口
通过方位值（方位属性：top | left | right | bottom，值一般使用px或%）来调整位置；
不支持margin: auto；

4、静态定位

css

position: static;

定位属性默认值，无任何定位；
不支持方位值（方位属性：top | left | right | bottom，值一般使用px或%）来调整位置；
不具有层级关系；
margin: auto支持水平居中，不支持垂直居中

5、粘性定位

css

position: sticky;

不脱离文档流；
配合js使用可做出吸顶效果；

6、文档流位移

会脱离文档流属性，位移后将不占有原来位置：

absolute
fixed
margin

不会脱离文档流属性，位移后还占有原来位置：

relative
translate

7、层级关系

css

z-index: 0;

默认值为0，可正可负；
只针对拥有定位属性（position）的元素生效；

十、表单表格

1、form标签

html

<form action="地址" method="get" target="_blank" name="表单名">

</form>

action属性：表单提交时，应该往哪个地址提交
method属性：表单提交数据的方式，一般有两种 get 和 post
target属性：提交数据后，后端返回的新页面在哪里打开，取值和a里面的target一样
name属性：表单名

2、input标签

text：单行文本输入框，value属性为输入的内容，placeholder属性为提示的内容

html

<input type="text" name="" id="">

password：单行密码输入框，value属性为输入的内容，placeholder属性为提示的内容

html

<input type="password" name="" id="">

radio：单选按钮，一组选项name必须相同，value必须不同（value值随便定义），一般需要后面写文字辅助选择

html

<input type="radio" name="" id="">

checkbox：多项选择，name建议相同，传值时是所有选中项的value集合

html

<input type="checkbox" name="" id="">

submit：提交按钮，点击之后默认会进行页面跳转，按钮文字默认"提交"，可以定义value改变按钮文字，

html

<input type="submit">

reset：重置按钮，点击重置所有表单中所有的控件，按钮文字默认"重置"，可以定义value改变按钮文字

html

<input type="reset">

button：空按钮，没有任何功能的空按钮，点击之后默认不会进行页面跳转，需要设置value值以供显示，用于js添加功能事件

html

<input type="button" value="按钮" onclick="">

color：用于规定颜色，从拾色器中选取颜色

html

<input type="color" name="" id="">

日期和时间选择器
- date：选择日、月、年
- month：选择月、年
- week：选择周、年
- time：选择时间（时、分）
- datetime：选择时间、日期、月、年（UTC 时间）
- datetime-local：选择时间、日期、月、年（本地时间）

html

<input type="date" name="" id="">

email：用于应该包含电邮地址的输入字段，当提交表单时，会自动对 email 字段的值进行验证

html

<input type="email" name="" id="">

file：用于文件上传

html

<input type="file" name="" id="">

hidden：定义隐藏字段。隐藏字段对于用户是不可见的。隐藏字段常常存储默认值，或者由 JavaScript 改变它们的值

html

<input type="hidden" name="">

image：将图像定义为提交按钮

html

<input type="image" src="" alt="">

number：用于包含数字值的输入字段，可以设置可接受数字的限制

html

<input type="number" name="" id="" min="最小值" max="最大值" value="默认值"/>

range：用于应该包含指定范围值的输入字段，显示为滑块，可以设置可接受数字的限制

html

<input type="range" name="" id="" min="最小值" max="最大值" value="默认值"/>

search：用于搜索字段，比如站内搜索或谷歌搜索等

html

<input type="search" name="" id="">

tel：用于应该包含电话号码的输入字段

html

<input type="tel" name="" id="">

TIP

清除input/button默认样式

css

input,button{
  outline:none;
  border:none;
}

3、button标签

type属性值

submit：提交按钮，点击之后提交数据给后端服务器
reset：重置按钮，点击之后恢复表单默认值
button：普通按钮，默认无功能，之后配合js添加功能

TIP

不写type属性，chorme默认为提交按钮submit。

4、label标签

使用方法一：

使用label标签把内容（如：文本）包裹起来
在表单标签上添加id属性
在label标签的for属性中设置对应的id属性值

html

<input type="radio" name="sex" value="1" id="sex" />
<label for="sex">男</label>

使用方法二：

直接使用label标签把内容（如：文本）和表单标签一起包裹起来
需要把label标签的for属性删除即可

javascript

<label>
  <input type="radio" name="sex" value="1" />男
</label>

5、input属性

默认选择：checked标签属性，单选或多选时，可以指定初始默认的已被选中的项；
禁止使用：disabled标签属性，规定input禁止使用；
value属性：用户输入的内容，提交之后会发送给后端服务器；
name属性：当前控件的含义，提交之后可以告诉后端发送过去的数据是什么含义；
required 属性：规定必需在提交表单之前填写输入字段；

6、下拉框

select标签和option标签必须配合实现下拉框

html

<select name="days">
  <option value="none">---请选择星期---</option>
  <option value="1">星期一</option>
  <option value="2">星期二</option>
  <option value="3">星期三</option>
  <option value="4">星期四</option>
  <option value="5">星期五</option>
  <option value="6">星期六</option>
  <option value="0">星期日</option>
</select>
/*  value属性定义送往服务器的选项值。 */

7、文本域

多行文本输入框，rows标签属性定义高度，cols标签属性定义宽度；如果需要用来传值，同样的需要制定name属性。

html

<textarea name="" id="" cols="30" rows="10"></textarea>

8、表格

table标签定义一个表格；
caption定义表格的标题；
tr定义表格的行，内容都是写在行里面的；
th定义在行里面，字体会加粗，代表一列的标题；
td定义在行里面，代表每一项；

html

table{
  border-collapse: collapse; /* 单边线 */
}

<table>
  <caption>学生调查表</caption>
  <tr>
    <th>姓名</th>
    <th>性别</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>木马</td>
    <td>乌拉</td>
    <td>朝歌</td>
  </tr>
  <tr>
    <td>男</td>
    <td>女</td>
    <td>男</td>
  </tr>
  <tr>
    <td>28</td>
    <td>30</td>
    <td>27</td>
  </tr>
</table>

9、单元格合并

rowspan属性规定单元格纵跨的行数（纵向合并）

html

<td rowspan="n"></td>/* 纵向合并n个单元格，则向下删除n-1个单元格 */

colspan 属性规定单元格横跨的列数（横向合并）

html

<td colspan="n"></td>/* 横向合并n个单元格，则向右删除n-1个单元格 */

十一、过渡与动画

1、过渡transition

css

transition: property duration timing-function delay;

transition-property：过渡属性。默认值 all 表示全部属性都应用过渡。
transition-duration：过渡持续时间。通常用秒s 或者毫秒ms 作单位；默认值 0，所以这一项是必须的，否则跟瞬间变化没有区别。
ransition-timing-function：过渡速度曲线。
- ease：默认值，规定慢速开始，然后变快，然后慢速结束的过渡效果。
- linear：规定以相同速度开始至结束的过渡效果。
- ease-in：规定以慢速开始的过渡效果。
- ease-out：规定以慢速结束的过渡效果
- ease-in-out：规定以慢速开始和结束的过渡效果
- cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中定义自己的值，值是 0 至 1 之间的数值。
transition-delay：过渡延迟时间。通常用秒s 或者毫秒ms 作单位。默认值 0。

TIP

display、z-index和伪类不支持过渡效果
多个属性过渡使用逗号分隔

css

transition: width 5s, height 5s, background-color 5s;

2、动画animation

定义关键帧@keyframes

css

@keyframes name{ /* name为自定义的动画名，可以按照见名知意的原则进行命名*/
    0%{/*第一帧*/

    }
    
    30%{/*中间帧会自动生成，也可按照需要自行补帧*/

    }
    
    100%{/*最后一帧*/

    }
}

TIP

0% 可以写成 from，100% 可以写成 to，效果完全一致，只是一个别名。

调用动画animation

css

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

animation-name：动画名字。默认值 none，所以必须设置对应动画名。
animation-duration：动画持续时间。通常用秒s 或者毫秒ms作单位。默认值0，所以这一项是必须的，否则跟瞬间变化没有区别。
animation-timing-function：动画速度曲线。同transition-timing-function的取值。
- steps(number[, end | start])函数
  - number：指定了时间函数中的间隔数量(必须是正整数)
  - start和end：表示在每个间隔的起点或是终点发生阶跃变化，默认 end。
- step-start
- step-end
animation-delay：动画延迟时间。通常用秒s 或者毫秒ms作单位。默认值0。
animation-iteration-count：动画播放次数，默认值 1 。无限循环 infinite 。
animation-direction：动画反向播放
- normal：动画按正常（转发）播放，默认值。
- reverse：动画以反向（向后）播放
- alternate：动画先向前播放，然后向后播放（动画的播放次数必须大于 1）
- alternate-reverse：动画先向后播放，然后向前播放
animation-fill-mode：
- none：默认值。动画在执行之前或之后不会对元素应用任何样式
- forwards：元素将保留由上一个关键帧设置的样式值（取决于动画方向和动画迭代计数）
- backwards：元素将获得第一个关键帧设置的样式值（取决于动画方向），并在动画延迟期间保留此值
- both：动画将遵循前向和向后的规则，将动画属性扩展到两个方向

动画状态

播放：默认值

css

animation-play-state: running;

暂停

css

animation-play-state: paused;

十二、变形

1、2D变形

rotate：设置元素绕着自身中心点的旋转效果。

css

transform: rotate(deg);

TIP

元素旋转后，自身的X / Y轴方向将同步进行旋转。

translate：设置元素以自身初始位置为原点的位移效果。

css

transform: translate(X, Y)；
transform: translateX(n);
transform: translateY(n);

scale：设置元素的缩放倍数。

css

transform: scale(n);
transform: scaleX(n);
transform: scaleY(n);

TIP

n = 1：默认值
n > 1：元素放大
0 <= n <1：元素缩小
-1 < n < 0：元素上下颠倒缩小
n = -1：元素上下颠倒
n < -1：元素上下颠倒放大

skew：设置元素绕着X / Y轴的倾斜效果

css

transform: skew(deg);
transform: skewX(deg);
transform: skewY(deg)；

transform-origin：设置元素的变化基点，默认位置为自身中心点。

css

transform-origin: X Y;

复合写法顺序：缩放 > 位移 > 倾斜 > 旋转

2、3D变形

perspective：设置元素的景深（视距）。景深越小，看的越近，景深越大，看的越远；一般800~1000px最佳。

css

perspective: 1000px;

perspective-origin：设置元素的景深基点。默认位置为自身中心点。

css

perspective-origin: X Y;

transform-style：开启3D模型

css

transform-style: preserve-3d;

十三、flex布局

1、开启弹性布局

css

display: flex;

2、容器属性

flex-direction：定义容器要在哪个方向上排列子元素。
- column：从上到下垂直排列
- column-reverse：从下到上垂直排列
- row：从左到右水平排列（默认值）
- row-reverse：从右到左水平排列
flex-wrap：规定是否应该对子元素换行。
- wrap：换行
- nowrap：不换行（默认）
- wrap-reverse：相反的顺序换行
flex-flow：用于同时设置 flex-direction 和 flex-wrap 属性的复合写法。
justify-content：用于子元素水平对齐。
- center：居中对齐
- flex-start：左对齐（默认）
- flex-end：右对齐
- space-around：左右间隔相等的两端对齐
- space-between：左右不间隔的两端对齐
- space-evenly：所有左右间隔都均匀相等的两端对齐
align-items：用于子元素垂直对齐 flex 项目。
- center：居中对齐
- flex-start：顶部对齐
- flex-end：底部对齐
- stretch：顶部对齐（默认，不设置宽高时默认为100%）
- baseline：基线对齐
align-content：用于行与行垂直对齐。
- center：居中对齐
- flex-start：顶部对齐
- flex-end：底部对齐
- space-around：上下间隔相等的两端对齐
- stretch：顶部对齐（默认，不设置宽高时默认为100%）
- space-between：上下不间隔的两端对齐
- space-evenly：所有上下间隔都均匀相等的两端对齐

3、项目属性

order：规定 flex 项目的顺序，值必须是数字，数字越小越优先摆放，默认值是0。
flex-grow：规定某个 flex 项目相对于其余 flex 项目将增大多少，值必须是数字，默认值是 0
flex-shrink：规定某个 flex 项目相对于其余 flex 项目将缩小多少，值必须是数字，默认值是 1
flex-basis：规定 flex 项目的初始长度，默认值 auto
flex：是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性，默认值 flex: 0 1 auto；两个特殊值，flex: auto相当于flex: 1 1 auto，flex: none相当于flex: 0 0 auto。
align-self：允许子元素自己规定自己的对齐方式。该属性默认继承父级的 align-items的对齐方式。

十四、grid布局

1、开启网格布局

css

display: grid;

2、容器属性

grid-template-columns /grid-template-rows：定义每一列的列宽与行高

css

/* 数值：新建3列，每列列宽为100px */
grid-template-columns: 100px 100px 100px;
/* 百分比：新建3列，每列列宽为容器宽的33.33% */
grid-template-columns: 33.33% 33.33% 33.33%;
/* repeat()函数：新建3列，每列列宽为100px */
grid-template-columns: repeat(3, 100px);
/* auto-fill关键字：每列宽度100px，然后自动填充，直到容器不能放置更多的列 */
grid-template-columns: repeat(auto-fill, 100px);
/* fr关键字：新建2列，且每列列宽相同 */
grid-template-columns: 1fr 1fr;
/* minmax()函数：新建3列，前2列相同，第3列列宽不小于100px且不大于1fr */
grid-template-columns: 1fr 1fr minmax(100px, 1fr);
/* auto关键字：第1、3列列宽为100px，第2列列宽为剩余所有空间 */
grid-template-columns: 100px auto 100px;
/* 网格线的名称：使用方括号，指定每一根网格线的名字，方便以后的引用 */
grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4]; /* 且允许同一根线有多个名字，比如[fifth-line row-5] */

grid-row-gap /grid-column-gap：设置行间距与列间距

css

grid-row-gap: 20px;
grid-column-gap: 20px;
/* 复合写法 */
grid-gap: 20px;

grid-template-areas：定义由单个或多个单元格组成的区域

css

grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
/* 先划分出9个单元格，然后将其定名为a到i的九个区域，分别对应这九个单元格 */
grid-template-areas: "a b c"
                     "d e f"
                     "g h i";
/* 将9个单元格分成a、b、c三个区域 */
grid-template-areas: "a a a"
                     "b b b"
                     "c c c";
/* 顶部是页眉区域header，底部是页脚区域footer，中间部分则为main和sidebar */
grid-template-areas: "header header header"
                     "main main sidebar"
                     "footer footer footer";

grid-auto-flow：决定单元格放置顺序

css

/* 默认值是row，即"先行后列" */
grid-auto-flow: row;
/* 设成column，变成"先列后行" */
grid-auto-flow: column;
/* 设为row dense，表示"先行后列"，并且尽可能紧密填满，尽量不出现空格 */
grid-auto-flow: row dense;
/* 设为column dense，表示"先列后行"，并且尽量填满空格 */
grid-auto-flow: column dense;

justify-items /align-items：设置单元格内容的水平位置与垂直位置
- start ：对齐单元格的起始边缘
- end ：对齐单元格的结束边缘
- center ：单元格内部居中
- stretch ：拉伸，占满单元格的整个宽度（默认值）

TIP

place-items是justify-items与align-items的复合写法。

justify-content /align-content：设置整个内容区域在容器里面的水平位置与垂直位置
- start ：对齐容器的起始边框
- end ：对齐容器的结束边框
- center ：容器内部居中
- stretch ：项目大小没有指定时，拉伸占据整个网格容器
- space-around ：每个项目两侧的间隔相等，项目之间的间隔比项目与容器边框的间隔大一倍
- space-between ：项目与项目的间隔相等，项目与容器边框之间没有间隔
- space-evenly ：项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔

TIP

place-content是justify-content与align-content的复合写法。

grid-auto-columns /grid-auto-rows：创建的多余网格的列宽与行高

css

/* 第1列列宽为30px，第2列列宽为60px，后面所有列的列宽均为1fr */
grid-template-columns: 30px 60px;
grid-auto-flow: column;
grid-auto-columns: 1fr;

3、项目属性

grid-column-start /grid-column-end /grid-row-start /grid-row-end：项目的位置是可以指定的，具体方法就是指定项目的四个边框，分别定位在哪根网格线。
- num ：使用数字时，指定在第几根网络线
- name ：使用名称时，指定为网格线的名字
- span num ：使用span关键字，表示"跨越"，即左右边框（上下边框）之间跨越多少个网格

TIP

使用这四个属性，如果产生了项目的重叠，则使用z-index属性指定项目的重叠顺序
grid-column：grid-column-start和grid-column-end的合并简写形式
grid-row：grid-row-start属性和grid-row-end的合并简写形式

css

grid-column: <start-line> / <end-line>;
grid-row: <start-line> / <end-line>;

grid-area：指定项目放在哪一个区域

css

grid-area: e;

TIP

grid-area还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式，直接指定项目的位置。

css

grid-area: <row-start> / <column-start> / <row-end> / <column-end>;

justify-self /align-self：设置单元格内容的水平位置与垂直位置
- start：对齐单元格的起始边缘
- end：对齐单元格的结束边缘
- center：单元格内部居中
- stretch：拉伸，占满单元格的整个宽度（默认值）

TIP

place-self是justify-self与align-self的复合写法。

十五、响应式布局

1、媒体查询

css

/*行内样式*/
@media 关键词 媒体类型 and (媒体属性){
  css代码
}

/*外部样式*/
<link rel="stylesheet" media="关键词 媒体类型 and (媒体属性)" href="*.css">

关键词

not：用于否定媒体查询，如果不满足这个条件则返回true，否则返回false。如果出现在以逗号分隔的查询列表中，它将仅否定应用了该查询的特定查询。如果使用not运算符，则还必须指定媒体类型
only：仅在整个查询匹配时才用于应用样式，并且对于防止较早的浏览器应用所选样式很有用。当不使用only时，旧版本的浏览器会将screen and (max-width: 500px)简单地解释为screen，忽略查询的其余部分，并将其样式应用于所有屏幕。如果使用only运算符，则还必须指定媒体类型。

媒体类型

screen：这是我们最常用的那些带屏幕的设备
print：网页其实也是可以通过打印机来打印出来的

媒体属性

max-width: 最大宽度就相当于 ≤ （宽度小于等于）
min-width: 最小宽度就相当于 ≥（宽度大于等于）

逻辑操作符

and：用于将多个媒体查询规则组合成单条媒体查询，当每个查询规则都为真时则该条媒体查询为真，它还用于将媒体功能与媒体类型结合在一起。
, ：用于将多个媒体查询合并为一个规则。逗号分隔列表中的每个查询都与其他查询分开处理。因此，如果列表中的任何查询为true，则整个media语句均返回true。换句话说，列表的行为类似于逻辑或or运算符。

css

/*屏幕宽度小于等于450px时生效*/
@media screen and (max-width: 450px ){
  body{ background-color: #1dba2d;}
}
/* 屏幕宽高在450px ~ 1200px内生效 */
@media screen and (min-width: 450px ) and (max-width:1200px){
  body{ background-color: #1dba2d;}
}

/*屏幕宽度大于450px生效*/
@media not screen and (max-width: 450px ){
  body{ background-color: #3f1dba;}
}

/*仅仅只在屏幕设备中生效*/
@media only screen {
  body{ background-color: #ba1d54;}
}

/*屏幕宽度大于等于1200px或小于等于450px时生效*/
@media screen and (min-width: 1200px), (max-width:450px){
  body{ background-color: #ba931d;}
}

TIP

书写顺序：

min-width：从小到大
max-width：从大到小

外部引入：

css

<link rel="stylesheet" media="关键词 媒体类型 and (媒体属性)" href="css路径">

2、rem移动适配

px /em /rem 三者区别

px：固定像素，一旦设置了就无法因为适应页面而改变，适用于PC端布局；
em：相对像素，相对于父元素，适用于响应式布局；
rem：相对像素，相对于根元素（html），适用于响应式布局；

rem宽度适配

将网页等分成10份，HTML标签的字号为视窗宽度的1/10。

css

/* 视窗宽度320px，根字号为32px */
@media (width: 320px){
  html{
    font-size: 32px;
  }
}

/* 视窗宽度375px，根字号为37.5px */
@media (width: 375px){
  html{
    font-size: 37.5px;
  }
}

/* 视窗宽度414px，根字号为41.4px */
@media (width: 414px){
  html{
    font-size: 41.4px;
  }
}

3、vw/vh移动适配

vw /vh /% 三者区别

vw：相对于视窗的宽度，视窗宽度是100vw；
vh：相对于视窗的高度，视窗高度是100vh；
vmin：vw和vh中的较小值；
vmax：vw和vh中的较大值；
%：相对于父元素或元素自身（border-radius、translate等)；

vw/vh单位尺寸

确定设计稿对应的设备的vw/vh尺寸
- 查看设计稿宽度
- 确定参考设备宽度（视窗宽度）
- 确定vw/vh尺寸（1/100视窗宽度，1/100视窗高度）
计算vw/vh单位的尺寸
- vw/vh单位的尺寸 = px单位数值 / （1/100视窗宽度）或（1/100视窗高度）

十六、HTML5

1、新标签

header：定义了文档的头部区域
nav：定义文档的导航部分
main：呈现网页的主体结构
article：定义页面独立的内容区域。
section：定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域。
aside：定义页面的侧边栏内容。
footer：标签定义文档或者文档的一部分区域的尾部。

2、音视频标签

video标签

html

<video src="" width=""  height="" controls autoplay loop muted poster="" preload="auto"></video>

src：设置视频路径
width/height：设置视频宽高
controls：显示视频控制面板，若不写则视频无法播放
autoplay：页面加载时，视频自动播放，必须配合muted才能自动播放
muted：视频静音播放
loop：视频无限循环播放
poster：设置视频封面路径
preload：视频预加载，一般默认值 auto，若设置了autoplay则此属性不生效

audio标签

html

<audio src="" controls autoplay loop></audio>

不支持静音自动播放
不支持width/height/poster/muted属性

3、倒影-webkit-box-reflect

css

-webkit-box-reflect: below 10px linear-gradient(90deg,transparent,rgba(255,255,255,.3));

方位：
- above：表示生成的倒影在元素的上方；
- below：表示生成的倒影在元素的下方；
- left：表示生成的倒影在元素的左侧；
- right：表示生成的倒影在元素的右侧；
偏移：倒影和原元素的间隔，单位像素。
遮罩：
- none：无遮罩；
- 渐变：渐变色遮罩；
- url()：指定地址图像做遮罩；

4、滤镜filter

css

filter: blur(2px) brightness(30%) grayscale(100%) opacity(80%);

5、毛玻璃滤镜backdrop-filter

css

backdrop-filter: blur(2px) brightness(30%) grayscale(100%) opacity(80%);

::tip backdrop-filter是让当前元素所在区域后面的内容模糊灰度或高亮之类，要想看到效果，需要元素本身半透明或者完全透明；而filter是让当前元素自身模糊灰度或高亮之类。 :::

十七、居中布局

1、margin

css

/* 水平居中：一般针对于固定宽度的盒子 */
width: 200px;
margin: 0 auto;

2、absolute

css

/* 水平居中 */
position: absolute;
left: 0px;
right: 0px;
margin: auto;

/* 垂直居中 */
position: absolute;
top: 0px;
bottom: 0px;
margin: auto;

/* 绝对定位 */
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
margin: auto;

/* 绝对定位+负边距:固定盒子宽高 */
width: 300px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;/* 左外边距为负的给定宽度的一半 */
margin-top: -100px; /* 上外边距为负的给定高度的一半 */

/* 绝对定位+平移：由内容撑开盒子宽高 */
position: absolute;
left: 50%;
top: 50%;
padding: 10px;
transform: translate(-50%, -50%);

3、flex

css

/* 仅父元素 */
display: flex;
justify-content: center;
align-items: center;

/* 父元素+子元素 */
display: flex;/* 父元素 */
margin: auto;/* 子元素 */

4、grid

css

display: grid;
place-content: center;
place-items: center;

5、text-align:center水平居中

文本
行内元素，如span，a；
行内块元素，如img，input；

TIP

设置父元素

6、line-height垂直居中

单行文本

十八、Scroll-snap滚动捕捉

1、scroll-snap-type

none：默认值。表示滚动时候忽略捕捉点，也就是我们平时使用的滚动。
x：捕捉水平定位点。
y：捕捉垂直平定位点。
block：捕捉和块状元素排列一个滚动方向的定位点。默认文档流下指的就是垂直轴。
inline：捕捉和内联元素排列一个滚动方向的定位点。默认文档流下指的就是水平轴。
both：横轴纵轴都捕捉。
mandatory：mandatory表示“强制”，可选参数。强制定位，无论是添加删除元素，或者滚动窗口较小，不足以放下子元素。
proximity：proximity表示“大约”，可选参数。可能会定位。

2、scroll-snap-align

none：默认值。不定义位置。
start：起始位置对齐，例如，垂直滚动，子元素和容器同上边缘对齐。
end：结束位置对齐，例如，垂直滚动，子元素和容器同下边缘对齐。
center：居中对齐。子元素中心和滚动容器中心一致。

十九、CSS变量

二十、Shapes布局

二十一、scrollbar·

二十二、不常见CSS属性

1、all

除 unicode-bidi 和 direction 之外的所有属性重置为其初始值或继承的值。

javascript

all: initial|inherit|unset;

2、backface-visibility

定义当元素不面向屏幕时是否可见。

javascript

backface-visibility: visible|hidden;

3、background-blend-mode

定义每个背景层（颜色和/或图像）的混合模式。

javascript

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

4、background-clip

规定背景的绘制区域。

javascript

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

5、background-origin

规定 background-position 属性相对于什么位置来定位。

javascript

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

注释：如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有效果。

6、border-collapse

设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。

javascript

border-collapse: separate|collapse|inherit;

CSS ​

一、基础标签 ​

1、特别要点 ​

2、相对路径 ​

3、Emmet语法 ​

二、CSS基础知识 ​

1、CSS三大特性：继承性 ​

2、CSS三大特性：层叠性 ​

3、CSS三大特性：优先级 ​

属性优先级 ​

样式优先级 ​

4、权重叠加计算 ​

5、初级选择器 ​

通配符选择器 ​

元素选择器 ​

class选择器 ​

id选择器 ​

后代选择器 ​

6、高级选择器 ​

并列选择器 ​

交集选择器 ​

子级选择器 ​

相邻选择器 ​

同级选择器 ​

属性选择器 ​

7、伪类选择器 ​

状态类 ​

结构类 ​

8、伪元素选择器 ​

三、盒模型 ​

1、标准盒模型 ​

2、怪异盒模型 ​

3、外边距合并 ​

4、外边距塌陷 ​

5、画三角形 ​

四、元素类型 ​

1、块级元素block ​

2、行内元素inline ​

3、行内块元素inline-block ​

4、元素隐藏 ​

5、元素整体透明度opacity ​

五、文字样式 ​

1、单行文本溢出 ​

2、多行文本溢出 ​

3、文本阴影 ​

4、文字排版 ​

5、基线对齐vertical-align ​

6、行高 ​

六、背景样式复合写法 ​

1、单张背景 ​

2、多张背景 ​

七、圆角/阴影/透明/渐变/鼠标 ​

1、圆角 ​

2、阴影 ​

3、透明 ​

4、线性渐变 ​

基础写法 ​

方向控制 ​

多颜色过渡占比 ​

多颜色不过渡占比 ​

线性重复 ​

5、径向渐变 ​

基础写法 ​

设置形状 ​

大小位置 ​

多颜色过渡占比 ​

多颜色不过渡占比 ​

多重径向渐变 ​

渐变顺序 ​

6、鼠标手势 ​

八、浮动 ​

1、清除浮动 ​

方法1 ​

方法2 ​

方法3 ​

方法4 ​

方法5 ​

2、BFC盒子 ​

创建BFC盒子 ​

BFC盒子应用 ​

CSS

一、基础标签

1、特别要点

2、相对路径

3、Emmet语法

二、CSS基础知识

1、CSS三大特性：继承性

2、CSS三大特性：层叠性

3、CSS三大特性：优先级

属性优先级

样式优先级

4、权重叠加计算

5、初级选择器

通配符选择器

元素选择器

class选择器

id选择器

后代选择器

6、高级选择器

并列选择器

交集选择器

子级选择器

相邻选择器

同级选择器

属性选择器

7、伪类选择器

状态类

结构类

8、伪元素选择器

三、盒模型

1、标准盒模型

2、怪异盒模型

3、外边距合并

4、外边距塌陷

5、画三角形

四、元素类型

1、块级元素block

2、行内元素inline

3、行内块元素inline-block

4、元素隐藏

5、元素整体透明度opacity

五、文字样式

1、单行文本溢出

2、多行文本溢出

3、文本阴影

4、文字排版

5、基线对齐vertical-align

6、行高

六、背景样式复合写法

1、单张背景

2、多张背景

七、圆角/阴影/透明/渐变/鼠标

1、圆角

2、阴影

3、透明

4、线性渐变

基础写法

方向控制

多颜色过渡占比

多颜色不过渡占比

线性重复

5、径向渐变

基础写法

设置形状

大小位置

多颜色过渡占比

多颜色不过渡占比

多重径向渐变

渐变顺序

6、鼠标手势

八、浮动

1、清除浮动

方法1

方法2

方法3

方法4

方法5

2、BFC盒子

创建BFC盒子

BFC盒子应用