html笔记

水平居中

margin 的左右方向可以设置自适应 auto，这样它所修饰的块属性标签就会在左右方向上自动居中
注意：auto只能控制水平方向的自动居中，不能控制垂直方向的自动居中
设置方式：
margin:0 auto;
auto的原理
auto的值 = (父元素的宽度-当前元素的宽度)/2;

浮动

浮动的原理：设置浮动的元素超出文档流
文档流：就是元素从上到下从左到右的布局顺序
浮动的作用：从整体出发，把标签元素进行横向布局
使用inline-block横向的弊端：
1.元素之间有缝隙，需要解决
2.低版本浏览器不支持 inline-block
浮动的特点：
1.浮动元素超出文档流
2.块属性标签浮动之后，不再独自占据一行空间，如果不设置宽高，则它的宽高由内容撑开
3.块属性标签浮动之后，他的margin属性的auto值失效
4.行属性标签浮动之后，可以设置宽和高，并且支持上下padding和上下margin

清浮动

当子级元素进行浮动的时候，他的父元素会因此产生影响，由于浮动元素脱离文档流，父元素没有子元素撑开，导致父元素没有高度，这样在布局的时候会产生混乱
清除浮动产生的影响（清浮动）
1. 给浮动元素的父级，添加 overflow:hidden
2. 给父元素设置指定高度，确保布局正确
3. 给父元素添加 display: inline-block，该方法兼容性差
4. 给父元素添加浮动，可能会影响布局
5. 设置一个空标签，在空标签中设置属性
.clear { clear:both; /* 防止ie低版本具有默认高度 */ height:0; overflow:hidden; }
6. 通过after伪元素清浮动
.clearfix::after { content: ''; display: block; height: 0; overflow:hidden ; clear: both; }

精灵图

精灵图，又叫 sprite (雪碧图)
他是把在项目当中用到的小图标拼合到一个图片上，这样在项目加载的时候，一次性地把小图标请求到客户端。减少了http请求，减轻服务器压力，提高了服务器效率

定位

原理：定位的元素超出文档流
什么时候需要用到定位？
在同一块文档流的区域内，需要同时叠放多个标签
定位的流程：
1.通过 position 属性设置定位的参照物
2.通过 方位属性，设置具体方位的定位数据，方位属性有 top，left，right，bottom，他是用来设置距离参照物有多远
他们的优先级是left>right top>bottom
position 属性的值
static relative absolute fixed
static：静态定位，无参照物，不定位
relative：相对定位，以 元素本身没有移动之前的位置为参照物
absolute：绝对定位，以 当前元素的 第一个具有定位属性的祖先级元素 为 参照物，作为参照物的祖先级元素，必须具有
position: relative 或则 position: absolute 设置
如果没有定位的祖先级属性，则参照物是 body
fixed：固定定位，相对于浏览器窗口定位

定位的特点

相对定位的特点：
1.相对定位是基于元素原来的位置进行定位
2.元素设置了相对定位以后，对于元素本身没有任何影响
3.元素设置了相对定位以后，虽然元素脱离了文档流，但是元素本身的位置依然占据文档流的空间
4.相对定位的元素，天然的提升层级，比没有定位的元素层级高
5.相对定位的元素，可以通过left top bottom right改变元素的位置
绝对定位的特点：
1.设置了绝对定位的元素，会脱离文档流，不占据文档流空间，并且提升层级
2.行元素设置完绝对定位以后，可以设置宽高，可以设置上下padding和上下margin，如果不设置宽高，宽高由内容撑开
3.块元素设置了绝对定位以后，自动的margin消失，如果不设置宽高，宽高由内容撑开
4.绝对定位是相对于他的第一个具有定位属性的祖先级元素进行定位，如果不存在这样的祖先级元素，则相对于 document（文档）定位。具有定位属性的祖先级元素，一般需要有relative和absolute其中的一个定位属性
5.一般的，如果设置了绝对定位，那么他的父元素需要有一个固定的高
固定定位的特点：
1.固定定为相对于浏览器窗口定位
2.固定定位脱离文档流

定位的层级

不做特殊设置的时候，
定位元素的层级 比非定位元素的层级高
定位元素后来者居上
使用z-index设置定位的层级，如果设置该属性，则默认为 0
如果z-index的值相同，则还是后加载的元素高于先加载的
如果值不相同，值大的元素层级

透明度

transparent 透明色
opacity: 设置元素的透明度，可以使整个元素透明，包含元素里面所有的内容
取值范围 0-1，0完全透明 1完全不透明
行元素在垂直方向的对齐方式
vertical-aline
值：
top：顶部对齐
middle：中间对齐
baseline：基线对齐
bottom：底部对齐
vertical-aline只能使用在行元素或者内联元素(inline-block)上，不能使用在块元素上
使用方式
1.如果父元素的高度由其中一个子元素撑开，那么给其他元素设置vertical-aline: middle;就可以实现居中效果
2.如果父元素高度固定，不是子元素撑开高度，则可以通过 添加一个自定义标签，该标签的高度为父元素的高度，然后设置 vertical-align: middle;和 display: inline-block;就可以使父元素的内容居中
vertical-align也可以同来解决img标签的缝隙

居中专题

1. 块元素水平居中，设置margin:0 auto;
   2. 行元素，内联元素的水平居中，在父级设置 text-aline: center;
   3. 使用 vertical-aline 设置行元素和内联元素的垂直居中
   4. 使用定位 和 margin 结合，设置元素居中
   a.给需要居中的元素设置margion-top和margin-left 为自身的一半
   b.给需要居中的元素设置定位距离为left:5o%; top:50%;
   5. 父元素宽高固定，子元素绝对定位，可以实现绝对居中
   a.父元素宽高固定
   b.子元素绝对定位
   c.给子元素设置left:0; right:0; top:0; bottom:0;
   d.给子元素设置margin:auto;

表格

table 表示表格
表格的作用：
1、在之前可以使用表格进行布局
2、作为列表来显示数据
一个表格是由thead、tbody和tfoot组成，这三个标签可以不写，浏览器会自动添加
想要创建一个表格，可以使用一下表格
table ：表示当前创建一个表格 tr ：表示表格中的一行 th ：表示表格的一个单元格，一般代表表头 tb ：表示表格的一个单元格，一般代表表内容
以上标签都是快标签
给table 添加 border 属性，设置边框
cellspacing 设置单元格和单元格之间的距离
cellpadding 设置单元格和边框之间的距离

合并单元格

colspan 和并列(横向合并)
rowspan 合并行(竖向合并)
width 设置表格的宽度，可以是具体的值，也可以是百分比
height 设置表格的高度，可以是具体的值，也可以是百分比
以上 width height 属性，可以设置到 table td th 上，width影响的是一列，height影响的是一行
使用 border-collapse 设置单元格的边框是否合并
border-collapse: separate; 不合并 border-collapse: collapse; 合并

form表单

form 标签，表单，可以用来提交数据、
form 是一个块标签
action 属性，数据要提交到的服务器地址，一般是接口地址
method 属性，数据的提交方式
他的值有
get, post, put, delete 等
get: get请求可以把数据拼接到 接口地址的 url上，缺点是，不安全，提交的数据较少
post：post请求，在post提交的信息中，不会看到提交的数据结构，相比较get是安全的，并且提交的数据较大
lable 标签，行标签，经常和input搭配使用，表示input的标题
input 标签，行标签，输入框，常用于表单输入
type属性，用来设置输入框的类型
属性值
text 文本输入框 password 密码输入框 button 普通按钮 submit 提交按钮 reset 重置按钮 radio 单选框 checkbox 多选框 hidden 隐藏框 file 提交文件 number 输入数字
value属性，设置input的值
name属性，对于界面的显示没有任何影响，主要用于数据交互，实质上name的值既是后台数据的字段名
placeholder 属性，输入框的提示信息 maxlength 属性，输入字符的最大长度

单选框

同一类型选项，他们的name值必须相同
lable 的for属性，用来绑定对应 id的input，例如
只要对该lable操作，则会在当前页面找到 id="abc"的input，并且选中该input。
单选框和复选框的默认选中，只需要在 input 上设置checked属性即可
禁用某一个input 标签，只需要给 input 添加 disabled 属性即可
给某一个输入框添加只读属性readonly，确保该输入框内容可以通过程序修改，并且能提交到后台
disabled 和 readonly 的异同：他们都不能手动修改 不同的是disabled的值不能提交和使用，readonly的值可以提交到后台
input 属性,input虽然是行标签，但是可以设置宽高
minlength 最少字符数 required 设置为必填项 type 属性补充 file 提交文件 number 输入数字

select 下拉框

行标签
他的子级必须是 option 标签，每一个 option 标签表示一个选项，option具有 value属性
fieldset 创建一个组 legend 组的标题 textarea 多行文本输入框 属性 rows 设置具有多少行 cols 设置具有多少列
设置 textarea
通过 css的resize属性，设置 拖拽的方向
horizontal 横向拖拽 vertical 纵向拖拽 both 双向拖拽 none 不拖拽

H5新标签

h5新特性都有哪些
1. 新增了很多语义化标签
2. 废弃了一些css修饰和html标签
3. 支持本地持久化数据
4. 增加了音视频标签的api
5. 提供了canvas画布及其api
H5各种功能比较新，低于IE9的浏览器支持的功能不够全面，建议使用 IE9及其以上的浏览器
meter 用电量标签
常用于能量的使用或者内容的使用量等
属性
value 当前电量的值 max 最大值 min 最小值 low 用电量最低报警值 high 用电量最高报警值
当前标签的文字，只有在浏览器不支持的时候会被渲染出来
<progress max="100" value="50"></progress>
进度条标签, 只有最大max属性, 没有min属性, value属性是当前值
ruby 标签，常用来做拼音，注音，注释等
rt 表示注释的内容
rp 如果浏览器不支持，显示的内容
datalist 数据列表
通过 input的 list属性和 datalist的id属性进行绑定
datalist 中的选项使用 option 标签
通过 datalist 可以制作关联查询效果
sup 上角标, sub 下角标,常用于注释
details 展示详情标签，自带折叠效果
summary 标签是 delails 的 标题
audio 标签，用来播放音频文件，支持mp3 ogg wav类型的文件
属性
controls：控制是否出现播放的控制条 autoplay：控制自动播放 loop：循环播放 muted：设置静音 preload：设置预加载
值：
auto：默认值，在整个页面加载之后立即加载音频文件 metadata：只加载音乐的源文件 none：不加载，可以用它来减少服务器压力
如果设置了autoplay，则可以不设置preload，默认即可
audio 结合 source 标签 做音频播放的兼容效果
source 专门用来解决不同浏览器对不同资源格式的支持问题，做兼容
video 视频播放标签，支持mp4 ogg webm格式
controls loop muted autoplay width：视频播放区域的宽度 poster：视频的封面
figure注释标签，一般包括一段文字、图片、代码、图表等
注释的内容写在figcaption标签中

input标签

普通的input的type类型
text、password、hidden、submit、reset、radio、checkbox、file、number、button
input属性
autofocus 自动获取光标，自动聚焦
email 约束输入的内容为邮箱
邮箱：<input type="email" value="" autofocus><br>
url 约束输入的内容为网址
网址：<input type="url" value=""><br>
number 约束输入的内容为数字 step属性为，每次的步长
年龄：<input type="number" value="" step="10"><br>
color 取色器
取色器：<input type="color" value=""><br>
range 滑竿 min 最小值max 最大值 value 当前值
滑竿：<input type="range" min="0" max="100" value="10"><br>
data 显示日期
日期：<input type="date" value=""><br>
month 显示日期到月
月份：<input type="month" value=""><br>
week 显示当前周
周：<input type="week" value=""><br>
time 设置时间
时间：<input type="time" value=""><br>
datetime-local 设置当地时间
设置当地时间：<input type="datetime-local" value=""><br>
image 图片提交按钮
<input type="image" src="./src/kun.jpg" width="100" value="">

布局标签

H5新增关于布局的标签
header ：页面的头部区域，要和head标签区分开 fooder ：页面的底部区域 nav ：导航区域 aside ：侧边栏区域 section ：一个独立的区域，类似 div article ：他一般包含在 section中，使用article包裹一段独立的模块

单位

em 相对单位，他是父级font-size的倍数
可以理解为 子级设置长度或者尺寸的时候，可以使用em作为单位，
1em = 父级的font-size，如果当前元素设置了font-size则
1em = 当前元素的font-size
rem 相对单位，在html标签上设置一个font-size 作为整个页面的root，在设置所有标签尺寸的时候，可以直接以html设置的字号大小为根字号，即为 1rem
rem常用于移动端开发
vh/vw : vh是 view-height 视窗的高度
1vh = 视窗的高度 * 1%
css的最大最小属性 min-height：最小高度 max-height：最大高度 min-width：最小宽度 max-width：最大宽度

viewport-视窗

用户可以通过视窗看到浏览器渲染的内容
常用于 移动端的布局
通过 meta 标签设置
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width：值是正整数，定义视窗的宽度，单位也是px，也可以设置
它的值是 device-width ，表示视窗的宽度为设备的宽度
height：值是正整数，定义视窗的高度，单位也是px，也可以设置
它的值是 device-height ，表示视窗的高度为设备的高度
initial-scale：范围在[0,1]，用来定义初始时候的缩放值
mininum-scale：范围在[0,1] 定义最小缩放比例，他的值必须小于或等于 initial-scale的值
maxinum-scale：范围在[0,1] 定义最大缩放比例，他的值必须大于或等于 initial-scale的值
user-scalable设置用户是否能够手动缩放，它的值是 yes/no，
默认是yes

弹性布局

弹性布局
1. 他是css3推出的布局方式
2. 低版本浏览器不支持
3. 所有的移动端都支持
设置弹性容器(弹性盒子)
块 -> 弹性容器：
display:flex;
行 -> 弹性容器：
display:inline-flex;
一般行不会设置为弹性容器
设置弹性布局，只需要给父容器设置display:flex;
flex-direction设置主轴的方向
row：默认值，主轴为水平方向，起点在左边
row-reverse：主轴为水平方向，起点在右边
column：主轴为垂直方向，起点在上边
column-reverse：主轴为垂直方向，起点在下边
flex-wrap:设置子元素是否换行
nowrap：默认值，不换行，子元素可能会被压缩
wrap：换行，行的起点在上边
wrap-reverse：换行，行的起点在下边
以上两个属性可以合写为 flex-flow
flex-flow: flex-direction flex-wrap;
align-content 设置多行元素的排列方式
stretch默认值，如果子元素没有设置高度，会被拉伸
flex-start根据主轴方向排列元素，第二排紧跟第一排，它们之间的距离不会被弹性拉伸
flex-end根据主轴方向排列元素，第二排紧跟第一排，并且他的起始位置在主轴的垂直方向的下面
space-around行间距平分
space-between 第一行和最后一行分别出现在 垂直主轴的上边和下边，如果有第三行，则行间距相等
justify-content 设置主轴方向的对齐方式(重要) flex-start：（默认值）从左到右 flex-end：从右到左 center：居中 space-around：在主轴方向把父级整体的尺寸按照子元素的数量平分，并且子元素在平分的尺寸范围内居中 space-between：第一个子元素在主轴起始位置，第二个子元素在主轴结束位置。
如果子元素的数量大于等于3，则每一个子元素之间的距离相等，第一个子元素在主轴起始位置，最后一个子元素在主轴结束位置
Y轴 垂直于主轴方向
align-items设置垂直于主轴方向的对齐方式
stretch：默认值，如果子元素没有高度，则会被拉伸
flex-start：Y轴 的起始点，如果子元素没有高度，则不会被拉伸
flex-end：Y轴 的结束点
center：垂直居中
baseline：基线对齐

设置弹性布局子级内容属性

order 设置单个弹性布局的顺序，order的值越大，元素越靠后，默认是0
flex-grow 设置元素的放大比例，默认值为0，不放大,使用条件是 总宽度小于父元素的宽度
元素的最终宽度 = 元素宽度 + flex-grow的值/总
flex-grow的值 * 总体剩余宽度
flex-shrink 设置元素的缩小比例,默认值为1,使用条件是 总宽度大于父元素的宽度
如果值为0,则表示不缩小,保持原宽度
flex-basis 设置子元素在父元素的主轴方向上所占空间的大小,他的值可以是具体值,也可以是百分比,默认是auto,auto的含义是遵循给该子元素设置的 width值
以上三个属性可以合写
flex: flex-grow flex-shrink flex-basis;
因此默认是: flex:0 1 auto;
后面两个属性是非必写项
可以简写: flex:flex-grow;
flex:1;
align-self : 该属性可以设置单个子元素的垂直于主轴方向的对齐方式,他可以覆盖 align-items 设置的方式,
align-self 的属性值和 align-items 相同,意义相同

流式布局

流式布局，就是百分比布局
高度的百分比是基于父元素的百分比进行渲染，因此使用百分比作为高度，他的父级必须定高
特殊属性百分比
元素的 margin-top、margin-bottom、padding-top、padding-bottom 他们的百分比设置都是基于父元素宽度的百分比
line-height 如果设置百分比，不是基于父元素的line-height值，而是基于他自己字号(font-size)的百分比

媒体查询

根据不同设备的宽度，设置不同的样式
关键字是 @media
属性
only 指的是只针对某一种设备
not 不针对某一设备
screen 电脑屏幕，手机，iPad 设备中的一种，print 打印机，speech盲人听读机，all 指的是所有设备
and 链接 后面括号中条件的关键字，and 的左右两边必须有空格
() 在()里面可以设置条件，他里面的条件一般都是 max-width min-width的设置
{} 满足条件的时候，设置的css样式必须书写在 {} 中
注意事项：媒体查询不提供优先级，因此，需要把媒体查询的样式最后加载，基础样式写在媒体查询的前面，这样才不会覆盖媒体查询的样式

选择器

属性选择器

以下 E 代表标签名，attr 表示属性名 val 表示属性值
1. E[attr] 选择所有具有 attr属性的 E 元素
2. E[attr=val] 选择所有具有 attr属性并且它的值是val的 E元素
3. E[attr~=val] 选择所有具有 attr属性并且它的值 包含 val的 E元素
4. E[attr|=val] 选择所有具有 attr属性并且它的值是以 val 或者 val- 开头的 E元素
5. E[attr*=val] 选择所有具有 attr属性并且它的值具有 val 字符的E元素
6. E[attr$=val] 选择所有具有 attr属性并且它的值是以 val 字符 结束的 E元素
7. E[attr^=val] 选择所有具有 attr属性并且它的值是以 val 字符 开始的 E元素

伪类选择器

focus 为所有获取焦点的input设置样式
disabled 为所有被禁用的input设置样式
:target 目标伪类选择器，当跳转到它所修饰的元素上的时候才会执行该选择器的样式
root 表示的是 html
E:empty 选中所有内容为空的E标签，并添加样式
:empty 选中所有内容为空的标签，并添加样式
E:only-child 选中父元素中只有一个E标签的 E标签,并添加样式,独生子标签

伪元素选择器

通过伪元素选择器可以给元素添加一个类似子元素的内容，不是真正的标签
使用伪元素需要添加 ::
::first-letter 表示修改第一个字符
::first-line 表示修改第一行字符
::before 在元素内容的最前面添加一个伪元素
::after 在元素内容的最后面添加一个伪元素

结构伪类选择器

父级 E: nth-child(num) 选中同一个父级下，排名次序为 num的E元素，num 从1开始
使用n表达式，设置选中的标签，n从0开始计算
偶数使用 2n
E: nth-child(2n)
E: nth-child(2n+1)
也可以使用 odd 表示奇数
even 表示偶数
E: nth-last-child(num) 表示从后开始往前数，使用方式和 nth-child 一样，也就是倒着计算
如果父元素中的子元素不是同一个类型，则不能使用 nth-child(num) 来设置css，因为匹配到的元素不对
使用 E:nth-of-type(num) 来匹配元素，他的意思是，找到和E标签同类型第num个元素
E:nth-last-of-type(num) 使用方法和 nth-of-type 一样，只是倒着数

border-radius 设置圆角

border-radius: 左上 右上 右下 左下;
右上！=右下 右上=左下
border-radius：左上 右上 右下;
右上=右下 右上=左下
border-radius：左上 右上;
右上=右下=右上=左下
border-radius：左上;
实质上，每一个角的上面，都有一个水平半径和一个垂直半径，如果每一个方向上的半径不同，则需要写成：水平半径/垂直半径
注意，圆角的值也可以设置百分比，一般的制作一个圆形，可以直接是设置 50%

设置背景

background-origin 设置背景图渲染的起始位置
值
padding-box 默认值，从padding位置开始渲染
conter-box 从内容部分开始渲染
border-box 从border开始渲染
background-size 设置背景图片的填充方式，也就是设置背景图大小
值：
cover 以最短边为基础渲染图片，长边按比例缩放，有可能无法显示全部图片
contain 以最长边为基础渲染图片，短边按比例缩放
值还可以是以下写法
background-size: 宽度 高度;
如果只写一个宽度，高度按照比例渲染
宽度和高度可以是具体的数值，也可以是相对于所在元素的百分比

背景蒙版 mask

1.最初只有 谷歌浏览器支持
2.背景蒙版可以把 透明图的透明部分渲染为不透明，把不透明的部分渲染为透明
3.他的设置方式和背景图一致
浏览器前缀
-webkit- ：是谷歌、苹果等浏览器内核的前缀
-moz-：是火狐浏览器内核的前缀
-ms-：是IE浏览器内核的前缀
-o-：是欧朋浏览器内核的前缀
在css属性名之前添加 浏览器前缀，表示该css属性是浏览器的私有属性

box-shadow 设置阴影

box-shadow：x方向的偏移量 y方向的偏移量 阴影的发散度(模糊度) 阴影的宽度 阴影的颜色 [阴影的位置]
inset 设置阴影
box-shadow: 10px 10px 20px 0 #ff0 inset;
设置多组阴影，使用英文逗号隔开，设置的方式一样
注意：在元素上设置阴影通常是为了增强元素的立体感，阴影不占据文档流空间，因此不会引起元素盒模型的变化

渐变

渐变，至少IE10支持
渐变也是背景图的一种，
1.线性渐变
background:linear-gradient(to 方向,颜色 开始渐变的位置,颜色 开始渐变的位置…)
linear-gradient 里面的参数
1. to 方向，方向可以使用具体的方向单词，也可以使用角度的度数
如果是度数，则直接写具体的角度，不需要加to
正值：顺时针旋转
0 -> 向上
90 -> 向右
180 -> 向下
负值：逆时针旋转
开始渐变的位置 可以是具体的数值，也可以是百分比
2.径向渐变
radial-gradient 设置径向渐变
radial-gradient(半径 形状 at 圆心,颜色 渐变的开始位置,颜色 渐变的开始位置…)
形状的值：
circle 圆形，默认值，可以省略
半径可以是具体的数值，也可以是如下系统给定的值：
farthest-corner 最远角
closest-corner 最近角
farthest-side 最远边
closest-side 最近边
圆心的设置
1.可以是具体数值，第一个数值代表x轴方向，第二个数值代表y轴方向
2.可以是 left top right bottom center 等方向名词的组合
渐变开始的位置
1.可以是具体的数值
2.可以是百分比，百分比是以半径长度为基准

重复性渐变

repeating-linear-gradient 设置重复性线性渐变，设置方式和线性渐变一样，效果是自动渲染重复的渐变内容
repeating-radial-gradient 设置重复性径向渐变，语法同径向渐变一致
设置重复性渐变需要注意
1. 需要设置重复渐变的颜色起始位置
2. 至少设置两种颜色
同背景图一样，渐变也可以设置多组渐变，同时设置多种背景图或者渐变图，后面设置的会被前面设置的图覆盖

2D形变

包含的内容是
1.平移
2.旋转
3.缩放
4.拉伸(倾斜)
注意：
1. 行元素不能形变， img和input除外
2. 仅仅是元素形状的变化，文档流的空间并没有变化
设置形变，使用 transform 属性
平移使用 translate
1.水平方向平移 translateX(num) num是具体值，正值向右平移，负值向左平移
2.垂直方向平移 translateY(num) num是具体值，正值向下平移，负值向上平移
3.复合写法 translate(x,y)
旋转使用 rotate(度数) 度数的单位是 deg
度数为正，顺时针旋转
度数为负，逆时针旋转
*形变的层级，后来者居上
使用 transform-origin 属性，设置形变的参考点
默认是center center
transform-origin:x轴方向的位置 y轴方向的位置
值
1.具体的数值
2. left top right bottom center 等方位名词的组合，如果只写一个词，则另一个默认是 center
缩放使用 scale(x轴方向的倍数，y轴方向的倍数)
如果x轴y轴的缩放倍数相同，则可以只写一个
scale(n)
如果需要把形变组合在一起
transform: scale(2) rotate(180deg) translate(30px,50px);
设置倾斜 skew()
写法和 translate 一样，分为x轴倾斜，y轴倾斜和复合写法
skewX(n+deg) 元素倾斜，就是元素和y轴的夹角为n度
X轴度数为正，向左倾斜
X轴度数为负，向右倾斜
Y轴同理
注意，度数不能是90度，使用复合写法，他们的和不能为90度

过渡动画

如果同时设置 平移和缩放，有两种写法
1.先写平移，然后再缩放，他的结果是 先平移到具体位置，然后在该位置上执行缩放
2.先写缩放，然后再平移，他的结果是 先把所有的值进行缩放，然后按照缩放后的值平移
一般都用第一种写法
过渡动画，设置元素从一种状态达到另一种状态的动画效果
设置属性是 transition
transition-property 设置需要过渡的css属性，如果有多个属性需要过渡，则可以用英文逗号分开，也可以直接设置all，all表示所有变化的css属性都需要过渡，如果不设置该属性，默认为all
transition-duration 设置过渡动画的持续时间，单位是 s秒
transition-delay 设置过渡动画的延迟时间，动画开始的时候有延迟，结束的时候也有延迟
transition-timing-function 设置动画的变化曲线
ease 默认值，先快后慢
linear 匀速运动
ease-in 淡入效果，先快后慢
ease-out 淡出效果，先迅速，再快，再慢
ease-in-out 淡入淡出，两边慢，中间快
以上均属于贝塞尔曲线中的特殊曲线
过渡动画也可以合写：
transition:property duration timing-function delay;
后面两个可以省略，直接设置默认值
过渡动画的触发时机
过渡动画不会主动触发
触发方式：
1.通过伪类触发 hover focus targeted 2.媒体查询 3.通过js触发

3D形变

设置3D环境
perspective：景深
它的默认值是 none
需要把景深perspective 设置在3d环境的父级上
他的值是具体的数值，不可以是百分比，因为z轴没有百分比，也不能是0或者负值
使用 ransform-style 设置3d效果
默认值是 flat，表示2d
preserve-3d 表示3d
使用 perspective-origin 设置透视点的位置
1.可以是 left top right bottom center 等方位名词的组合
2.可以是具体数值
3.可以是百分比
perspective-origin: x轴的位置 y轴的位置
以上三个关于3d设置的属性都设置在 3d环境的父级上

平移和旋转

平移 可以使用 translate3d(x,y,z);
也可以单独使用 translateZ(z)
3D旋转
分开写法
rotateX(num)：num为正，以上边为基准线，上边往视窗的里面翻转，num为负，上边往视窗的的外面翻转
rotateY(num)：num为正，以左边为基准线，左边往视窗的外面翻转，num为负，左边往视窗的的里面翻转
rotateZ(num)
合写
rotate3d(x倍数,y倍数,z倍数,度数)
rotate3d(1,2,3,40deg);
x轴旋转40度，y轴旋转80度，z轴旋转120度
查看元素从后面看能否看到元素的内容
backface-visibility
值
1. visible 默认值，能看到
2. hidden 不能看到

关键帧动画

关键帧动画和过渡动画的区别
1.关键帧动画的触发时机是，只要添加关键帧动画，就会立即执行动画
2.关键帧动画可以对动画的流程进行控制
关键帧动画的使用流程
1.先封装一组关键帧动画，使用关键字 @keyframes
2.给需要设置动画的元素，添加动画属性
设置动画名称
animation-name：值是通过 @keyframes 声明的名称
设置动画的持续时间
animation-duration:10s;
以上两个属性，不能省略
设置动画的运动函数
animation-timing-function：值和过渡函数一致，都是贝塞尔曲线设置的函数
设置动画的延迟时间
animation-delay: 10s;
设置动画的重复次数
animation-iteration-count：num;
值是一个正整数，表示次数，默认为一次，也可以是 infinite 表示无限次数
设置动画的方向
animation-direction：
值
nomal 默认值，正方向运行
reverse 反方向运行
alternate 当运行次数是奇数时，正方向运行; 偶数时，反方向运行
alternate-reverse 当运行次数是奇数时，反方向运行; 偶数时，正方向运行
设置动画最后一帧的状态
animation-fill-mode
值
forwars 以动画的最后一帧作为动画的最后呈现状态
both 状态和forwards相同
backwards 默认值，以动画开始的第一帧作为动画的最后呈现状态
合写
animation: name duration timing-function delay iteration-count direction fill-mode;
和写的时候，除了 mane duration 不能省略，其他均可视情况省略
控制动画的播放状态
animation-play-state
值：
paused 暂停
running 运动

鼠标手势

指的是鼠标在页面内或者元素上的样式
cursor
值：
crosshairs 用于精确定位的 十 字形
pointer 鼠标显示小手
move 拖拽效果时候的鼠标移动样式
text 鼠标悬浮在文本上面的样式
wait 鼠标等待加载时候的样式
help 鼠标显示带问号的箭头
not-allowed 禁用效果
default 默认指针样式
auto 鼠标按照默认的状态根据页面上的内容自行修改样式

使用 animate.css

1.直接在元素上使用
需要添加公共类 animate__animated,然后根据效果添加要使用的 动画类名 ,注意以 animate__ 为前缀
animate__动画名
2.使用 animate.css 的动画名
不用可以添加类名,可以直接在css中声明 animation属性,然后他的动画名是 animate.css 中的动画名即可

引入外部字体

字体格式
1. ttf: 专门用于标准浏览器和 Android等(最常用)
2. svg: 支持ios
3. eot: 仅支持IE浏览器
4. woff: 支持火狐和谷歌
使用步骤
1. 将字体引入到项目中
2. 声明引入的字体族
3. 在设置css字体的时候,使用声明的字体族
声明字体族的方式
@font-face {
font-family:‘自定义的字体族名字’;
src: url(‘字体资源地址’);

引入iconfont

1. 下载图标，并且 引入 iconfont.css
   2. 在使用的标签上引入 类名 iconfont
   3. 引入需要的图标类

怪异盒模型

outline,轮廓线 它的使用方式和 border一样
轮廓线不占据文档流空间
怪异盒模型
box-sizing :
值
border-box：border 和 padding 统一计入到width之内，也就是宽度包含了 border 和 padding 的值
content-box：默认值，只有内容被记入到 width 之内
padding-box：火狐支持，padding 计入到 width 之内
由于 padding-box 存在兼容问题，因此常用的怪异盒模型是border-box
标准盒模型
宽度 = border的宽度 + padding的宽度 + 内容的宽度
怪异盒模型
宽度 = 设置的width(包含了 border的宽度 + padding的宽度 + 内容的宽度 )

设置文字阴影

设置文字阴影
text-shadow：x轴偏移 y轴偏移 模糊度 阴影颜色
如果需要设置多个阴影，就使用英文逗号隔开
单个阴影
text-shadow:0 0 10px #f60;
多个阴影
text-shadow:0 0 10px #f60,0 0 10px #f60,0 0 10px #f60;

综合

多列布局

css3 中最新给出多列布局方案，他是css布局的一个新的扩展
设置列宽
column-width: 具体值 / auto
具体值是直接设置元素的宽度
auto 是 根据页面的宽度，自定义列宽
设置列数
column-count: num
mun是具体的正整数，范围是[1,10]
以上两个属性合写
columns: width count;
设置列间距
column-gap: normal 或者具体的值
normal 是默认值，它的大小是 1em
设置两列之间的边框
column-rule 具体设置规则和 css中的border一致
设置标题跨列
column-span
只有两个值
1. none 表示不跨列
2. all 表示跨所有列

css hack

由于不同的浏览器厂商，比如 ie，火狐，谷歌，safari(苹果)等，他们在生产浏览器的时候，会有不同的渲染解决方案。还有不同版本的浏览器也可能对相同的css设置渲染不同的效果，例如 IE6 7 8 9。css hack 是浏览器厂商给自己的浏览器专门制定的一套特殊的css指令。可以理解为css hack的目的就是解决不同的浏览器的css兼容问题，当然也可以使用css hack 为不同的浏览器制定不同的css
ie的条件注释
[if IE]:只要是ie浏览器都可以生效
[if lte IE 6]:浏览器的版本小于等于ie6的时候生效
[if lt IE 6]:浏览器的版本小于ie6的时候生效
[if gte IE 6]:浏览器的版本大于等于ie6的时候生效
[if gt IE 6]:浏览器的版本大于ie6的时候生效
[if IE 6]:浏览器的版本等于ie6的时候生效
[endif]:条件注释的结束指令
[if ! IE 6]:浏览器的版本不是ie6的时候生效
特殊符号 hack
* 在 IE10 及其以上生效
- 减号，只对ie6 生效
+ 加号，对ie7 生效
_ 下划线，对ie6 ie7 生效
\9 对IE6 7 8 9 10都生效
\0 对IE8 9 10都生效
\9\0 只对IE9 10生效

网格布局

是css3新出的一种布局方式，常见的适用方案为 九宫格布局
声明网格布局环境
display: grid; (最常用)
display: inline-grid;
设置列
grid-template-columns
值是 fr，1fr就代表一个比例划分
有几列就可以设置几个 fr，每一个fr所占据的 宽度比例为1夫人，如果需要设置其他比例的宽度，则可以设置整倍fr
如下例
grid-template-columns:1fr 2fr 3fr;
设置了当前网格为3列，第一列的宽度为1fr，第二列的宽度是第一列的2倍，第三列的宽度是第一列的3倍
有几个fr值，就有几列
还可以直接设置 具体宽度
grid-template-columns: 100px 100px 200px;
还可以设置 宽度+auto,auto 是除了具体宽度列数之外的 自适应宽度
也可以 宽度 + fr 组合
设置行
grid-template-rows
他的值是行高，有几个值，就设置几个行高
grid-template-rows:100px 200px 300px;
以上案例的含义是，设置了三行，第一行行高是 100px，第二行行高是 200px，第三行行高是 300px
如果总行高小于父级grid的高度，则父级剩余的高度会被剩余的子元素平分
行 列 合写
grid-template:行 / 列;
grid-template:100px auto auto/1fr 1fr 1fr;
设置列间距
column-gap: 具体数值
设置行间距
row-gap: 具体数值
合写间距
gap: row column;
指定开始行
grid-row-start:1; 从第一行开始跨行
指定结束行
grid-row-end:span 3; 到第三行结束,合并3行
指定开始列
grid-column-start:1; 从第一列开始跨列
指定结束列
grid-column-end:span 3; 到第三列结束,合并3列

bootstrap

bootstrap的栅格系统

栅格系统 的最外层必须有一个类名container
每一行的类名为 row
每一列的类名为 col
使栅格系统在不同的屏幕宽度下，显示不同的布局方式，可以使用 col-前缀 添加 列宽 列数 来设置
列宽设置依据
sm 屏幕宽度最小是 576px
md 屏幕宽度最小是 768px
lg 屏幕宽度最小是 992px
xl 屏幕宽度最小是 1200px
xxl 屏幕宽度最小是 1400px
col-lg-4 含义是，在 大于720 小于960的宽度下，占据4列栅格
栅格系统，把屏幕的总宽度默认分割成12列，元素可以在这12列中布局

button按钮

在 bootstrap 中使用 按钮步骤
1. 给需要设置成按钮的标签，设置 基础类名 btn
2. 根据按钮功能，设置不同功能名字的 类名

模态框

data-bs-target 绑定一个操作源，告诉bootstrap操作的具体是拿一个元素
data-bs-target=“#abc” 操作的是id=abc的元素
data-bs-toggle 指的是当前按钮操作的是哪一个功能
dropdown 表示下拉框
modal 表示模态框

sass

sass 是css的预编译语言
sass的写法
简单写法和 css 是一样的
less 的写法
通过换行符和空格来表达层级关系
css 写法
div { border:1px #f00 solid; } div p { font-size:20px; }
sass 写法
div { border:1px #f00 solid; p { font-size:20px; } }
less 写法
div border:1px #f00 solid; p font-size:20px;
Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。
使用sass，可以使用两种语法格式，语法格式不同，文件后缀名不同，具有 scss和sass 两种不同的后缀名
scss：支持css3语法格式，所有的css3语法都通用
sass：被称为缩进格式 (Indented Sass) 通常简称 “Sass”，是一种简化格式。它使用 “缩进” 代替 “花括号” 表示属性属于某个选择器，用 “换行” 代替 “分号” 分隔属性

sass的变量

在vscode中安装 插件
easy sass
easy ess
主要使用的是 easy sass ，通过插件编译后的结果是自动生成 一个css文件和一个 min.css 压缩文件
声明变量
通过关键字 $ 声明变量，$name 此时name就是变量名
变量名的命名方式：
以数字，字母，下划线 _ ，短横线 - 组合的字符作为变量名
注意，只能以 字母和下划线 _ 开头
通过#{$name} 插值语句可以在选择器或属性名中使用变量
直接在属性中使用变量，sass 会报错
如margin-$left:10px; 报错
margin-#{$left}:10px;正确写法
全局作用域和局部作用域
全局作用域范围是 整个sass文件，局部作用域范围是某一个选择器内部
全局变量和局部变量
全局变量 ：声明 在全局作用域内的变量，可以在任何地方使用
局部变量 ：声明在局部作用域内的变量，只能在声明的地方使用

sass的嵌套规则

.wp {
background:#f60;
h2 { color:#333; }
p { color:#333; }
}
以上嵌套规则最终会被编译为后代选择器的形式，因此嵌套不宜过深
属性嵌套:凡是可以拆分的属性，都可以使用属性嵌套，注意属性名后面的冒号(😃 要和 {} 有空格分开
border: { width:2px; style:solid; color:#f00; }
父选择器标识符&,&表示当前的父选择器

混合器

混合器的作用，是把相同的css样式提取出来，单独设置成一个模块，使用方便
使用混合器@mixin
语法 @mixin name { css 样式 }
其中，name 就是混合器的名字，他是一个变量，命名规则同 变量的命名规则
使用混合器
@include name; 通过@include把混合器的名字引入到使用混合器的位置
复杂的混合器
混合器也可以接受参数
1.定义混合器
@mixin name(arg1,arg2,arg3...) { css 样式 }
()中的arg 列表，就是混合器的参数，由于他们只是形式上的参数，不具备任何意思，因此称为 形参列表
注意，参数本质也是变量，因此需要 $开头
2.使用混合器
@include name(val1,val2,val3...)
val 列表，是实际的数据，因此称为实参列表
形参和实参是一一对应的关系

html中的特殊字符

      空格
    >   大于号
    <   小于号
    © 版权符号
    " 双引号
    ' 单引号
    × ×号
    ™ 商标

动画专题

动画分为 过渡动画 和 关键帧动画
1.过渡动画 transition
使用：
a. 给需要设置过渡动画的元素添加transition属性
b. 过渡动画需要手动触发
触发条件可以为
1.通过伪类选择器
2.通过js
3.媒体查询
2.关键帧动画 animation
使用：
a. 给需要设置关键帧动画的属性添加animation属性
b. 需要设置动画效果
c. 自动触发
关键帧动画不能控制 宽度和高度的 auto 值，也就是关键帧动画执行宽高的设置，必须有具体的值

BFC

块级格式化上下文，BFC规定了在当前元素中块元素的布局方式，默认只有一个标签body是块级上下文标签
BFC 特点
1.BFC 是一个独立的布局环境，BFC内部的布局和外部不会相互影响
2.可以通过一些方法触发BFC，完成一个独立的布局环境
BFC的布局规则
1.BFC内部的块元素，会从上到下一个一个的垂直排列
2.BFC 规定了 两个相邻的块元素他们的上下margin重合
3.每一个元素的margin 盒模型的左边(margin-left)，与包含他的父border 盒模型的左边(border-left)相接触
4.每一个BFC区域不会和浮动的元素重叠
5.每一个BFC区域都是独立的，他里面的内容和外面的内容相互不影响
创建一个BFC的方法
1. 给元素添加overflow，注意他的值 visible 除外
2. 给元素设置浮动，注意 浮动值 none除外
3. 给元素设置 position，它的值是 fixed或者 absolute
4. 给元素设置 display，它的值为flex、inline-flext、table-cell、inline-block