HTML\CSS可以说是前端的基础，通过几天跟着青训营的老师们学习，收获颇多，下面是根据老师讲的和结合自己线下学习，琢磨，总结出来关于前端HTML\CSS的一些知识点（如不全面请谅解，如有错误多谢指出，谢谢大家！）

什么是HTML?

html 是用来描述网页的一种语言.
html 是超文本标记语言

Web标准组成部分

HTML结构：W3C制定了HTML的语法，标准
CSS表现：W3C制定了CSS的语法，标准
JS行为：W3C,ECMS制定了行为标准（W3C DOM，ECMAScript）

称手兵器-VSCode 快捷键

ctrl+ 放大
！回车直接生成完整的HTML页面结构
Shift + Alt +R 打开文件夹
shift+alt+向下箭头快速复制一整行代码
lorem 随机生成一长串英文字符
div*3 快速生成3个空白div
div{123}*3快速生成3个有内容的div
ul>li{2222}*3 快速生成3个有内容无序列表
dl>dt+dd快速生成一个自定义列表
dl>dt3+dd3快速生成3个dt和3个dd的自定义列表
table>tr2>td2 快速生成一个2行2列的表格

VSCode插件

auto rename tag 自动重命名标记
view-in-browser 直接在浏览器中查看
Live Server 实时服务器页面自动刷新
htmltagwrap 标签包裹 alt+w 快捷键默认p标签
px to rem 单位快速转换成rem

HTML基本结构

<!DOCTYPE html> 特殊且固定的文档声明标签

<html lang='en'> en代表英语

<meta charset='***'>

ASCII 美国信息交换标准代码
UTF-8 万国码字符编码
编码和解码要一致

<meta name="viewport" content="width=device-width, initial-scale=1.0">移动端 <meta http-equiv="X-UA-Compatible" content="IE=edge" > 这句代码可以改变360兼容模式下以任何版本的IE去渲染页面

HTML常用标签

文本标题h1-h6 自带加粗，有自己文本的大小，独占一行，有默认间距
段落文本 p 段落于段落有间距
换行 <br/>
水平线<hr/>
加粗<b></b>只显示加粗 <strong>强调内容</strong> 突出文本推荐用strong
倾斜 <em></em> 有强调作用 <i> </i>只倾斜推荐用em
删除线<s></s>只显示删除线 <del></del>有强调作用推荐del
下划线<u></u>
上标<sup></sup>
下标<sub></sub>

不一样的hr

默认hr有阴影水平居中
color 颜色
width 宽度
align 对齐方式
noshade 取消阴影

特殊符号

&lt；左尖角号
&gt；右尖角号
&nbsp；空格占据宽度受字体影响明显而强烈
&emsp；空格占据的宽度正好是一个中文宽度，基本不受字体影响（推荐使用）
&copy；版权符号 ©
&trade；™
&reg；® word中快捷键 ctrl+alt+R
&#128512；&#128513；各种表情

无序列表

<ul><li></li></ul>

ul属性

disc 默认的黑色实心圆
circle 空心圆
square 实心正方形
none什么也没有

有序列表

<ol><li></li></ol>

ol的属性

type：1，a，A，i，I 只有这五种取值
start：从哪开始只能是数字

自定义列表

<dl><dt></dt><dd></dd></dl>

img

路径src：（绝对路径，相对路径）同级目录（相对路径）：1.直接写图片名称 2. ./1.jpg 表示当前路径下的1.jpg图片（推荐）返回上级目录 ../img/6.jpg 两点表示返回上级目录绝对路径：复制本地磁盘上的路径

img属性

title:鼠标悬停上去之后的提示信息
alt: 图片不显示之后（加载失败）的提示信息
width
height

超链接

<a></a>

超链接属性

href：路径
title：鼠标悬浮信息
target：规定在何处打开文档 _self 默认值 _blank 打开新窗口

表格

<table><tr></tr><td></td>

table上的属性

border=“1”外边框
width 宽度 px 或者 %
height 高度 px 或者 % %基于父级元素，如果父级元素没有高度，那么无效
align 对齐方式
bordercolor 外边框的颜色
bgcolor 背景颜色
cellspacing 单元格之间的间距
cellpadding 单元格与内容的空隙

tr属性

height 高度
bgcolor 背景颜色
align 文字对齐方式 left（默认） right center
valign 文字垂直对齐方式 top middle（默认） bottom

td属性

width 宽度（如果一个单元格设置了宽度，影响的是一整列的宽度）
height 高度（如果一个单元格设置了高度，影响的是一整行的宽度）
bgcolor 背景颜色
align 文字对齐方式 left（默认） right center
valign 文字垂直对齐方式 top middle（默认） bottom
colspan 合并列
rowspan 合并行

form表单

属性：method：get或post（推荐）
action 向何处发送表单数据
input 输入框类型 type=“text”普通文本 password密码 submit提交 button按钮 reset重置
placeholder 描述输入字段值的提示信息
name 必须设置否则提交表单是，信息无法发送到服务器
value 值

-------------------------------------------CSS-----------------------------------

CSS导入（内部样式表，外部样式表，行内样式表）

通过外部css导入进html 无兼容性问题（推荐）
在head中中加入 @import url（css路径）（有兼容性问题）
优先级（行内样式>内部样式>外部样式）！important 优先级最高

选择器

标签选择器（范围太广）
类选择器
id选择器（id唯一）
通配符选择器 *
群组选择器（逗号分隔） div,p,span{ background-color: red; }
后代选择器（空格分隔） div p{ background-color: red; }
子代选择器（>符号分隔） di>p
伪类选择器（顺序一定不能错）
a:link 超链接初始状态
a:visited 超链接被访问后的状态
a:hover鼠标悬停的状态
a:active 超链接被激活的状态，点下去的状态
选择器权重： !important > 内联样式 > 后代选择器 > id选择器 > 类选择器 > 标签选择器

文本属性

font-size 字体大小默认16px 设计图常用12px
font-family 字体默认微软雅黑对个字体间用逗号间隔
color 字体颜色 rgb（255,0,0）十六进制0-9 A-F #ffffff（六位）前两位红中间两位绿最后两位蓝色
font-weight 字体加粗（100 400 700 900） lighter（更细）bolder（更粗的） bold（加粗）normal（常规）
font-style 字体倾斜 italic（斜体字） oblique（倾斜的文字） normal（常规）
text-align 文本水平对齐方式 justify 两端对齐，对多行有效
line-height 行高 line-height=height 实现文本垂直居中
text-indent 首行缩进可取负值只对第一行起作用（根据字体大小调整首行缩进两个字符或者用2em：表示当前字体大小的两倍，也就是首行缩进两个汉字大小）
letter-spacing 字间距控制文字和文字之间的间距（一个字母和一个字母的间距）
word-spacing 控制单词与单词之间的间距
text-decoration 文本修饰 1.none没有,2.underline下划线 3.overline上划线,4.line-through删除线
text-transform 大小写转换 1.capitalize 首字母大写 2.lowercase 全小写 3.uppercase 全大写
font 缩写 font-style font-weight font-size/line-height font-family 顺序不能变（样式和加粗可不写，字体大小，行高和字体必须写否则不生效）如： font: italic bolder 20px/1em 宋体;

列表属性CSS

list-style-type 定义列表符号样式：1.disc实心圆 2.circle空心圆 3.square实心方块 4.none去掉符号
list-style-image 将图片设置为列表符号样式 url（）
list-style-position 设置列表项标记的放置位置 1.outside 外面 2.inside里面
简写 list-style：none 去掉所有符号顺序不影响

背景属性

background-color 背景颜色
background-image: url（）背景图片
background-repeat 背景图片平铺 1.no-repeat 不平铺 2.repeat 平铺（默认）3.repeat-x X轴平铺 4.repeat-y Y轴平铺
background-position 背景图片定位 1.20px 20px 2.百分比% 百分比% 3.left right bottom top center组合
background-size 背景图大小 1.20px 20px 2.百分比% 百分比% 3.cover 把背景图扩展到足够大，完全覆盖背景区域，但是有可能导致图片无法显示完整。 4.contain 把图片扩展至最大尺寸，使其高度和宽度完全适应内容区域，但是有可能铺不满整个背景，有留白部分。
background-attachment 背景图片的固定 1.scroll滚动（默认）2.fixed 相对于浏览器窗口。
缩写 background:color,image,repeat,position,attachment 顺序不影响，但是属性不写就会认为没有这个属性单独写的属性会被覆盖，background-size必须单独写。

浮动属性

float ：left左 right右浮动 none不浮动
浮动作用：（1）定义网页中其他文字如何环绕该元素显示（2）让竖着的东西横着来
clear 清除浮动 none right不允许右浮动 left不允许左浮动 both左右都不允许浮动 1.固定给高度（给父元素的div，就有高度） 2. clear加在后面的兄弟元素上加的（无高度，清除前面的浮动）3.用overflow：hidden 加在最外层div中（让浮动元素计算高度）

盒子模型

内边距 padding（1）1个值：全部都一样（2）2个值：上下左右（3）三个值: 上左右下（4）4个值:上右下左（会扩大区域如一个div 宽200 padding 20 总宽：220px，内边距的背景也是背景色）
padding-top/left/right/bottom 单独设置（不支持负数）
border：1px solid red 4个边框都一样（transparen透明的）
border-top/left/right/bottom 单独设置
border-width/color/style单独设置
border-style：solid 实线 double 双实线 dashed 虚线 dotted 点线
外边距 margin 顺序与padding一样
margin-top/right/left/bottom单独设置 (支持负数)
margin快速水平居中 margin：0 auto

外边距特性

兄弟关系，两个盒子垂直外边距和水平外边距的问题？
垂直方向：外边距取最大值如 box1-bottom：100px ；box2-top：50px 取100px
水平方向：外边距会进行合并如 box1-left：100px； box2-right：50px 一共150px

问：父子关系，给子元素加外边距，但作用于父元素身上，怎么解决？

给父元素padding-top 但是要注意高度计算，因为padding会计算到页面高度中（推荐）
给父元素加边框注意高度计算
加浮动（父元素，子元素都可以）
给父元素加overflow：hidden 构成BFC块（推荐）缺点：会隐藏溢出的元素

溢出属性overflow（容器的）

visible 默认值，溢出内容会显示在元素之外
hidden：溢出内容隐藏
scroll：溢出内容以滚动条的方式显示
auto：如果有溢出则加滚动条，反之正常显示
inherit：继承父元素的overflow属性值
overflow-x:X轴溢出的属性 overflow-y：Y轴溢出的属性

多余空间white-space属性

nowrap 不换行
pre 显示空格，回车，不换行
pre-wrap 显示空格，回车换行
pre-line：显示回车，不显示空格，换行
页面显示溢出省略符号(1)设置宽度（2）white-space：nowrap 不换行（3）overflow：hidden溢出隐藏（4）text-overflow:ellipsis: 文本溢出显示省略号（...） text-overflow默认属性值：clip

元素显示类型

块元素：display：block 或者 list-item（1）独占一行（2）可以定义宽高（3）作为其他元素的容器（4）例如：div p ul li ol dl dt dd h1-h6等（p标签可以放文本，但是不能放块状元素） 2.行内元素display：inline（1）不独占一行（2）不能定义宽高（3）例如：a b em i span strong
注意：行内元素只能设置左右的边距，不能设置上下的边距
行内块inline-block（1）同时具备行内元素和块状元素的特点（2）例如：img input
display：none 隐藏

定位position

默认值 static
绝对定位 absolute 脱离文档流（原来的位不保留）如果没有父元素或者父元素没有定位，参照物就是浏览器的窗口（子绝父对）
相对定位 relative 不脱离文档流（原来位置保留）根据自己为参照物
固定定位fixed 脱离文档流参照物是浏览器窗口
粘性定位sticky css3.0新增功能（脱离文档流），兼容性不好（可以通过js来做粘性定位）（也需要结合top right left bottom使用，支持负值）

三角形案例

div宽高都为0
border 全部transparent透明色
display:inline-block 行内块元素
border-top：5px solid red （高度为5px红色的下三角）
通过相对定位控制三角形的位置

层级显示z-index

z-index值越大，层级越大，越靠上显示（支持负值）
在父子关系中（子绝父相）给父元素设置z-index没有作用，需要在子元素上设置z-index：-1（负值）即可
兄弟关系的绝对定位z-index有效
绝对定位能将行内元素转为块状元素

问：如何将行内元素转换为块状元素？

display：block
absolute
float：left

问：浮动与定位的区别？

浮动：半脱离文档流，文字环绕
定位：全脱离文档流，不会出现文字环绕效果

锚点

通过a链接 href="#id的名字"

css精灵图（雪碧图）

是一种网页图片应用处理方式。它允许将一个页面涉及到的所有零星图片都包含到一张大图中去。

精灵图优势

通过小图片整合减少对服务器请求次数，从而提高页面的加载速度
减少图片的体积

宽度高度自适应

auto（默认）
min-height 最小高度（推荐）
maxheight 最大高度
min-width 最小宽度
max-width 最大宽度（推荐）

问：父元素不写高度时，子元素写了浮动后，父元素就会发生告诉塌陷，怎么解决？

给父元素加 overflow:hidden（缺点：会隐藏溢出的元素）
在子元素最下方添加一个空快状元素，并添加clear:both height:0 overflow:hidden（缺点：在结构里添加空标签，不利于代码可读性，并且降低了浏览器的性能）
万能清浮动法(伪元素::）（两个冒号）必须寄托在某个元素身上 (1)div::after 定义对象后的内容 (2)div::before 定义对象前的内容内容（content：“aaa”）如果conten里面有内容，想要把它隐藏加上 visibility:hidden wdith：0 height：0 表示文字占位隐藏，加上宽高为0 就不显示了 (3)div::first-letter 第一个字母的选择 (4)div::first-line 第一行的选择

问：display：none与 visibility：hidden 区别？

display：none 不占位的隐藏
visibility：hidden 占位隐藏

表单进阶-单选框（radio）

<input type="radio" name="" checked> radio 单选框 name一样的input则为一组单选 checked表示默认选中如要想点击文字也可以选中则：非常满意，for为input 的id名,不用加#

表单进阶-多选框（checkbox）

<input type="checkbox" name="aaa" checked>

disabled表示禁用
readonly 只读

上传文件（file）

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

隐藏按钮（hidden）

<input type="hidden" name="" id="" value="带给后端的个人信息">

下拉菜单（行内元素）

<select name="" id="" size="" multiple=""> <option value="cq" selected>重庆</option> <option value="sh">上海</option> <option value="bj">北京</option> </select>

下拉才当中size属性：显示的个数

multiple属性：多选（按住ctrl或者shift键）
value属性：提交给后端的值（一定要加value值）
selected属性：默认选中

文本域-多行文本输入框（textarea）

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

宽高建议用css设置
placeholder提示文字
默认value值是写在双标签里面的
resize（设置是否随意拖动）both（水平垂直都可以随意拖动），horizontal（只可以水平拖动），vertical（只可以垂直拖动），none（不可以拖动）

字段集合（fieldset）

<fieldset> <legend>性别</legend> </fieldset> 边框加一个小缺口，可以当一个小集合

H5新增功能

一、语法：

扩展名.html或者.htm
DOCTYPE声明部分大小写
指定字符集编码 meta charset=“UTF-8”
有的标签可以不写结束标记
属性可以使用单引号

二、新增语义化标签

header 页面中的头部
section 页面中的中间部分
footer 页面中的尾部
nav 页面中导航链接部分
main 页面中的主要内容部分
aside 在article之外相关辅助信息
article 一块与上下文无关的独立内容
figure 独立的内容使用figcaption为其添加标题

三、音频标签

<audio src="链接地址" controls loop autoplay muted></audio>

controls 必须写，才会出现控制栏
loop 循环
autoplay 自动播放（谷歌第一次能用）
muted 静音

四、视频标签

video（属性和audio一致，除了poster，设置海报,宽高css设置也可以）

五、增强表单（type）（结核form表单一起使用，必须写name）

Type= “color”生成一个颜色选择的表单
Type= “tel”唤起拨号盘表单（适用于移动端，出现数字键盘）
Type= “search”产生一个搜索意义的表单（多了一个清除功能）
Type= “range”产生一个滑动条表单（min max设置一个区间 value设置初始值，默认50 step=“10”步长，每次移动增加的值）
Type= “number”产生一个数值表单（属性与range相似min max value step）
Type= “email”限制用户必须输入email类型
Type= “url”限制用户必须输入url类型
Type= “date”限制用户必须输入日期（年月日）
Type= “month”限制用户必须输入月类型（年月）
Type= “week”限制用户必须输入周类型（年第几周）
Type= “time”限制用户必须输入时间类型（分，秒）
Type= “datetime-local”选取本地时间（年月日分秒）

H5input新增属性

autofocus 自动聚焦一个页面只能有一个
required 输入验证不能为空
multiple 可以输入一个或多个值，用逗号分开（email file）
pattern=“[0-9][A-Z]{3}”输入正则表达式（现在表示第一个为数字，后面三个为大写字母）

问：怎么理解 CSS3渐进增强优雅降级？

渐进增强：先对低版本浏览器进行构建页面，保证最基本功能，在针对高级浏览器进行效果，交互等功能的改进，达到更好的用户体验。
优雅降级:一开始构建完美的功能，然后针对低版本浏览器进行兼容。

CSS3新增-文本阴影（支持多个阴影，逗号隔开）

text-shadow：-1px -2px 1px red，0px 10px 2px blue
text-shadow：-1px -2px 1px red（顺序不能乱）
-1px 水平方向位移
-1px 垂直方向位移
1px 模糊程度（越大越模糊）
red 颜色

CSS3新增-盒子阴影（支持多个阴影）

box-shadow：-1px -2px 1px 2px red inset（顺序不能乱）
-1px 水平阴影位置
-2px 垂直阴影位置
1px 模糊程度(可选）
2px 阴影大小（可选）
red 颜色
inset 内侧阴影（默认外侧阴影，可选）

CSS3新增-圆角边框（border-radius）

border-radius：v1 v2 v3 v4（单位支持px 或者%）
v1:4个角都一样大
v1 v2 左上右下一致左下右上一致
v1 v2 v3 左上左下右上右下
v1 v2 v3 v4 顺时针（左上开始）
border-top-left-radius 左上角
border-bottom-left-radius 左下角
border-top-right-radius 右上角
border-bottom-right-radius 右下角
border-radius：30px/60px（表示水平走30 垂直走60）
border-top-left-radius：30px/60px 不支持
圆（盒子的一半--要考虑padding border）border-radius：50% 要方便些
半圆 border-radius: 200px 200px 0 0;（宽是高的2倍，这里高是200 宽是400）
扇形 border-radius: 200px 0 0 0;（正方形，左上角设置为正方形的边长）

CSS3新增-字体引入（@font-face）

@font-face { font-family: SQ; src: url(../font/白舟忍者字体_爱给网_aigei_com.ttf);

CSS3新增-怪异盒模型（box-sizing:border-box）

问：标准盒模型与怪异盒模型的区别？

答：标准盒模型box的宽高需要计算padding，border，而怪异盒模型 加上padding 和border，box的宽高不会改变，而是压缩内容的宽高

CSS3新增-弹性盒（一种新的布局方式，特别适合移动端布局）

让子元素默认横向排列
行内元素变成块状元素
如果子元素只有一个元素给子孩子加上 margin:auto 自动水平垂直居中

加载容器上面的属性

决定主轴方向（加给父元素） flex-direction:row（默认） column row-reverse column-reverse
调整主轴对齐方向(justify-content) justify-content:flex-start（左对齐）flex-end（右对齐）center（居中） space-between（两端对齐） space-around（每个项目两侧间距相等） 调整侧轴的对齐方向(align-items) align-items:flex-start flex-end center baseline stretch
控制主轴是否换行(flex-wrap) flex-wrap:nowrap默认不换行 wrap换行 wrap-reverse反向换行
控制换行后行间距（align-content） align-content：flex-start

加在项目上的属性

允许单个项目与其他不一样（align-self） align-self：flex-start flex-end center baseline stretch
stretch:表示没有设置高度时，占满容器的高度（默认）

引入icon图标

<link rel="stylesheet" href="../icon/font_3521401_amtpvvwxioa/iconfont.css">

分辨率

（设备像素比(dpr) = 设备像素(分辨率)/设备独立像素(屏幕尺寸) ）
模拟器上显示的分辨率是CSS像素
设备像素是物理分辨率
设备像素比（dpr）=物理像素/CSS像素

移动端：

<meta name="viewport" content="width=device-width, initial-scale=1.0，user-scalable=no">

viewport：视口
width-device-width ：理想宽度=设备宽度
initial-scale=1.0 ，user-scalable=no 不缩放，不允许用户进行缩放

多列布局（适合瀑布流）

column-count:5 显示的列数
column-gap：30px 调整列间距 3.column-rule: 1px solid red 列边框
column-full：balance （默认）列的高度一致
column-full：auto 把父盒子高度占满
column-width：500px 调整列宽
加给子元素column-span：none 不跨列 column-span：all 横跨所有的列

响应式布局

对相同内容进行不同宽度的布局设计，两种方式： 1.pc优先 2.移动端优先无论基于那种设计，要兼容所有设备，（布局不变对一部分模块进行设置）

方法

模块中的内容：挤压-拉伸（布局不变）
换行-平铺（布局不变）
删减-增加内容（布局不变）
位置-变换（布局改变）
隐藏-展开（布局改变）

响应式布局特点

面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题

缺点:

兼容各种设备工作量大,效率低下
代码累赘,会出现隐藏无用的元素，加载时间加长
其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果
一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

CSS3 新增-媒体查询（找到断点）

含义：媒体查询可以让我们根据设备显示器的特性(如视口宽度、屏幕比例、设备方向:横向或纵向)为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有width. height 和color (等) .使用媒体查询,可以在不改变页面内容的情况下,为特定的一些输出设备定制显示效果。

@media:all 所有设备
@media:screen 显示器，笔记本，移动端等设备（主要用这个）
@media:handled 便携设备，如：手机，平板电脑
screen是媒体类型的一种，CSS2定义了10种媒体类型
and被称为关键字,其他关键字还包括not(排除某种设备), only(限定某种设备)
@media screen and (max-width:768px) and (min-width:450px)
表示：小于768 大于450时

CSS3新增-渐变

一、线性background: linear-gradient（）

支持多颜色渐变 background: linear-gradient(pink,blue,yellow,gray);
支持存过度 background: linear-gradient(blue 50%,yellow 50%);
支持方向 background: linear-gradient(to left top,blue,yellow);
支持角度的写法 background: linear-gradient(45deg,blue,yellow);

二、径向 background: radial-gradient（）

支持形状 background: radial-gradient(circle,blue,yellow);默认椭圆
支持存过度 background: radial-gradient(blue 20%,yellow 50%);
支持不同尺寸的渐变background: -webkit-radial-gradient(60% 40%,closest-corner,blue,yellow,pink,black);最近边（closest-side）最近角（closest-corner最远边）（farthest-side）最远角（farthest-corner
支持改变中心点位置 background: -webkit-radial-gradient(60% 40%,blue,yellow,pink,black);

三、重复渐变

重复线性渐变：background: repeating-linear-gradient(blue,yellow 10%,green 10%,red 10%);
重复径向渐变：background: repeating-radial-gradient(blue,yellow 10%,green 10%,red 10%)

过度（transition）

transition：all 2s linear 匀速
transition：all 2s ease 逐渐慢下来
transition：all 2s ease-in 加速
transition：all 2s ease-out 减速
transition：all 2s ease-in-out 先加速后减速
transition：all 运动时间（2s）动画类型（匀速，加速，减速）延迟时间
（单一属性）
transition-property：过度属性（height，width，background）
transition-duration：持续时间
transition-timing-function：动画类型（匀速加速减速）
transition-delay：延迟时间

css3新增-平移（transform：translate）

transform：translateX(100px) x轴平移100px（支持负值）
transform：translateY(100px) y轴平移100px
transform：translate（100px,100px） x，y轴都平移100px

问：transform和margin区别?

margin是属于布局属性,该属性的变化会导致页面的重排。对布局属性进行动画,浏览器需要为每一帧进行重绘并上传到GPU中进行渲染
transform是合成属性,浏览器会为元素创建一个独立的复合层,当元素内容没有发生变化,该层不会被重绘,通过重新复合来创建动画帧

CSS新增-放大缩小（transform：scale（））

transform：scalex（1.5）x轴放大1.5倍设置负值图片是倒过来的
transform：scaley（1.5）y轴放大1.5倍 0.5缩小0.5倍(默认1）
transform-origin：left top 设置中心点的位置（谁要变大缩小就在谁身上设置）

CSS新增-旋转（transform：rotate（））

transform：rotateZ（30deg）中心点==3DZ轴顺时针转30度负值（逆时针转）
transform：rotateX（360deg）以X轴为中心
transform：rotateY（360deg）以Y轴为中心

CSS3新增-倾斜（transform：skew）

skewX 正值，拽右下角，往右边拉动，负值拽着左下角，往左边拉动形成30deg
skewY正值，拽右下角，往下边拉动，负值拽着左下角，往下边拉动形成30deg
skew（X,Y）

CSS3新增-关键帧动画（animation）

animation: shuqiao 1s linear 2s infinite（或者 1 2） alternate;
shuqiao：关键帧的名字
1s 动画持续时间
linear 匀速
2s 延迟时间
infinite 无线次数 1 2：一次或者两次
alternate 再循环中是否反向运动

设置关键帧方法一：(from-to)

@keyframes shuqiao{ form{ width: 200px; height: 200px; background-color: red; } to{ width: 400px; height: 400px; background-color:green; } }

设置关键帧方法二：（0%-100%）

0%{ background-color: red; } 10%{ background-color: pink; } 20%{ background-color: green; } 100%{ background-color:forestgreen; }

animation是复合属性

animation-name 动画名称
animation-duration 动画持续时间
animation-timing-function 动画过度类型
animation-delay 动画延迟时间
animation-iteration-count 动画循环次数
animation-direction 动画在循环中是否反向运动
animation-play-state 设置动画的装状态
animation-fill-mode 动画填充模式

CSS3-新增 3D-平移/旋转/缩放

一、平移：

transform-style: preserve-3d; 需要在父元素上加 3d舞台 flat 2d（默认）
perspective: 900px; 需要在父元素上加景深（远小近大的感觉）

二、旋转：

transform-styel：perserve-3d
transform：rotateX（30deg）
transform：rotateY（30deg）
transform：rotateZ（30deg）
transform：rotate（0,0,1,30deg）表示X，Y轴0 Z轴30deg 前面三个值去0-1的范围

三、缩放：

transform-style：perserve-3d
perspective:900px
transform:scaleX(2)
transform:scaleY(2)
transform:scaleZ(2)
transform:scale3d(1,2,10)

CSS3新增-网格布局

问：网格布局与flex布局的区别？

flex布局是轴线布局，主轴侧轴可以看做是一维布局
网格布局则是将容器划分为行和列，产生单元格，指定项目所在的单元格，可以看做二维布局。

设置网络布局方法一：

grid-template-rows：200px 200px 200px grid-template-columns:200px 200px 200px

方法二：百分比

grid-template-rows：25% 25% 25% 25% grid-template-columns:25% 25% 25% 25%

网格布局列间距（gap）

grid-row-gap：20px 行间距
grid-column-gap：20px 列间距
grid-gap：20px 20px 复合式写法

网格布局-对齐方式

1.改变排列顺序 grid-auto-flow：row（默认）column

2.整个容器对齐方式： justify-content（水平对齐）：start（对齐容器起始边框）/end（结束边框）/center（居中）/stretch（拉满整个小网格）/space-around（两侧间隔相等）/space-between（项目与项目间隔相等，项目与容器边框没有间隔）/space-evenly（项目与项目与容器边框之间间隔都相等） align-content（垂直对齐）：start/end/center/stretch/space-around/space-between/space-evenly 复合写法：place-content：<justify-content><align-content>

3.单元格内容对齐方式： justify-items：start（对齐容器起始边框）/end（结束边框）/center（居中）/stretch（拉满整个小网格） align-items：start（对齐容器起始边框）/end（结束边框）/center（居中）/stretch（拉满整个小网格，默认值）复合写法：place-align<justify-items><align-items>`

结束！

以上属于个人总结结果（希望和一些志同道合的朋友一起讨论，一起学习，共同进步，谢谢大家！） --JS后面会继续整理总结--

大前端Web | 青训营笔记