一、自适应：
1.自适应概念:
不去给元素定义固定的宽和高，元素宽度随着窗口的宽度改变而改变，随着子元素的高度或者随着内容的高度而改变自身的高度。
2.宽度自适应
(1)定义：不去定义固定的宽度，宽度自适应。随着浏览器窗口或者说父元素的大小改变而改变。
(2)宽度默认值:auto; 在常态下可以当100%去理解。在浮动元素中，实际宽度由子内容撑开。
(3)用途：
——写版心和延展层时使用
——子元素占据父元素全部，并且希望子元素随着父元素宽度改变而改变时使用。
3.高度自适应
(1)定义：不写固定高度，高度由内容区域或者子元素撑开，若无内容区域或者子元素，则没有高度。
(2)高度默认值:height:auto;
(3)优势：——不会出现子元素或者文字内容溢出父元素的情况，在子元素高度或者数量不确定时，不会影响页面的正常显示。
(4)劣势：
<1>当子元素无法加载或者说没有子元素时，父元素模块将会没有高度，显示效果太差。
解决方法：min-height
给父元素添加最小高度，当内容过短时，按最小高度显示，来保障页面的显示效果。
<2>父元素不写高度，高度由子内容撑开。如果子元素一旦发生浮动，父元素就会高度塌陷。
高度塌陷的解决方法：
——1.给父元素写高度
弊端：加上高度以后，父元素就不再是高度自适应了。
——2.overflow:hidden;
弊端：如果该元素子元素没有超出父元素区域的效果时，使用没有任何问题。
如果需要写子元素超出父元素空间区域的效果，则超出部分会被隐藏。所以此方法请选择性使用。
——3.clear:both;
弊端：把clear:both加给未浮动元素，但是只能解决子元素没有完全浮动时的塌陷问题。
——3plus. 在元素内部最后添加一个宽高为0的子元素，并让这个子元素不浮动。给
这个子元素添加clear:both;
弊端：页面中会多出来很多的空白标签。
——4.万能清除浮动法
塌陷元素::after{
content: "";
display: block;
height: 0;
overflow: hidden;
clear: both;
}
二、伪元素选择器
回顾：之前学过的伪类选择器
:link 超链接初始状态
:visited 超链接访问后的状态
:hover 元素鼠标悬停时的状态
:active 超链接激活时的状态
伪元素：
(1)在xxx之后添加内容
xx::after{
content:''
}
(2)在xxx之前添加内容
xx::before{
content:""
}
(3)选中xxx内第一个字符 ::first-letter。
xx::first-letter{
}
(4)选中xxx内第一行文本 ::first-line
xx::first-line{
}
伪类和伪元素区别：
(1)伪类是单冒号，伪元素是双冒号
(2)伪类是元素处于某种状态下被选中，选中的还是元素标签。伪元素是选中一个类似元素但又不是元素，而是元素中某个部分。把这一块当成元素来修饰。简单的说就是一个假的元素选择器。
三、透明和隐藏
1.元素隐藏
(1)display:none; 元素消失不可见，不占据空间
(2)opacity:0; 元素透明，仍占据空间，可以被选中
(3)height:0; 元素高度消失，文字内容仍在存在原来的地方。
(4)visibility
hidden(隐藏) 元素消失，仍占据原本空间，文本也一起不可见
visible(默认值，可见)
(5)transform: scale(0); 2d缩放，将元素缩放为0,元素消失不可见。仍占据空间
overflow:hidden;不是隐藏元素而是隐藏元素溢出的
2.元素透明
(1)opacity 元素整体透明
取值 0-1 之间 0为全透明 1为不透明
(2)rgba(0-255,0-255,0-255,0-1) 颜色透明（一般写给背景）
四个参数分别为红绿蓝三个色域及颜色透明度
(3)transparent 透明色（一般写给背景）
四、最大最小宽高
1.max-width 最大宽度
(1)块元素默认情况下展示效果为100%，这个时候会按照最大宽度显示。
(2)浮动状态下，块元素宽度由子内容撑开，这个时候，设置max-width，如果没有达到最大宽度，则子元素多宽，父元素多宽。一旦子元素超过父元素max-width，则父元素按照max-width大小显示。
(3)如果同时设置width和max-width，如果width比max-width大，则按照max-width显示，如果max-width比width大，则按照width显示。
2.min-width 最小宽度
(1)块元素在常态下，设置min-width后，如果100%的大小不小于min-width，则按照100%显示。
(2)浮动状态下，设置min-width后，如果没有写width,则宽度由子内容撑开。如果子内容宽度小于min-width,则按照min-width显示。如果子内容大于min-width,则按照子内容撑开的宽度显示。
(3)浮动状态下，设置min-width后，如果设置的width大于min-width则按照width显示，如果设置的min-width大于width则按照min-width显示。
注意:最大最小宽高可以围绕这一句去理解：在常态下可以宽度当100%去理解。在浮动元素中，如果父元素没有写宽度，则实际宽度由子内容撑开。
3.min-height 最小高度
如果height小于min-height则按照min-height显示，如果height大于min-height,则按照height显示。
4.max-height 最大高度
如果height大于max-height则按照max-height显示，如果height小于max-height,则按照height显示。
五、宽高百分百，窗口自适应
1.盒子根据窗口的大小进行改变
设置方法：html,body{height:100%;}
总结：如果想要给body下边的元素添加高度百分百时，需要让body也有高度，具体代码如上。
六、iframe在一个页面中显示另外一个页面，用来做页面嵌套。
<iframe src="http://www.taobao.com" ></iframe>
此标签可以正常修饰css,把他当成一个盒模型即可。只是这个盒模型中，显示的是另一个页面。
七、calc函数
计算函数，calc()
八、两栏三栏布局
如果想让高度100%，给html,body下加height:100%
EIGHT
*一、五大主要浏览器
1.Chrome 谷歌浏览器
2.Safari 苹果浏览器
3.IE浏览器 ie浏览器
4.Firefox 火狐浏览器
5.Opera 欧朋
总结：市场上的浏览器格式各样，但是其实都是以上五款浏览器，本质上来说，都是这几个浏览器披了一层外衣。
学习目的：知道咱们要做测试和兼容时，都需要兼容谁，都需要测试谁。
二、html5做出的改变
相较于之前的html版本，html5新增很多的标签和属性，同时也废弃了很多标签和属性，并且语法相较于之前更加具有包容性，语法要求没有之前那么严格。
三、html5新增语义化标签
1.header 头部
2.footer 脚部
3.nav 导航栏
4.section 内容模块
5.article 与上下文无关的独立模块
6.aside 在article之外，用来存放article的辅助信息。
7.main 页面主体或者主要内容模块 (在IE浏览器中，体现形式为内联元素)
8.figure 独立的流内容 标题使用figcaption（一般放在figure头部或者脚部)
9.hgroup 标题分组
总结：其实这些语义化标签本质上和div没有太大区别，只是相较于div多了一层含义。
补充：因为这些标签都是h5新增的一些标签，所以在一些老版本的浏览器上是不支持的，需要做兼容，可以在网络上下载一个html5.js文件，引入进来添加支持。
四、视频和音频标签
1.video 视频标签
——1.元素类型：内联块元素
——2.属性：
(1)src 引入文件路径地址（可以是本地文件，也可以是网络文件地址）
(2)controls 控制台
(3)autoplay 默认自动播放，在某些浏览器中使用无效（搭配muted静音来使用）
(4)muted 默认静音
(5)loop 循环播放
(6)poster 加载等待的画面（视频播放前的图片展示彩页）
——3.video所支持格式 MP4、webm、ogg
——4.老版本一些浏览器可能不支持某种视频格式，我们可以采用以下写法来提供兼容
<video>
<source src="../public/3theA.mp4">
<source src="../public/3theA.ogg">
<source src="../public/3theA.webm">
</video>
2.audio 音频标签
——1.元素类型：内联块元素
——2.属性
(1)src 引入文件路径地址（可以是本地文件，也可以是网络文件地址）
(2)controls 控制台（不写控制台默认看不到效果）
(3)muted 默认静音
(4)loop 循环播放
——3.老版本一些浏览器可能不支持某种音频格式，我们可以采用以下写法来提供兼容
<audio>
<source src="../public/a.mp3">
<source src="../public/a.wav">
</audio>
五、html5新增智能表单
1.新增不同type属性
(1)color 取色框（拾色器）
(2)tel 唤醒拨号盘（此类型在pc端无效，需要在手机上进行测试）
(3)search 搜索框 (在搜索框敲回车，可以调用submit按钮功能)
(4)range 滑块
(5)number 数字框 （只能够输入数字相关内容）
(6)email 邮箱框 特征：提交时，会检测输入的内容是否是邮箱格式
(7)url 网址框 特征：提交时，会检测输入的内容是否为网址格式
(8)time 时间选择器 （选择小时、分钟）
(9)date 日期选择器 （选择年、月、日）
(10)month 月份选择器 （选择年、月）
(11)week 周选择器 （选择本年第几周）
(12)datetime-local 本地时间（选择本地时间年月日和时分）
2.新增其他属性
*(1)number和range支持的css属性 | |
min 最小值 | |
max 最大值 | |
step 改变数值时的间隔 | |
value 默认值 | |
*(2)placeholder 提示文本信息 | |
*(3)required 必填项 | |
*(4)disabled 不可被选中（禁用） | |
*(5)checked 默认被选中 | |
*(6)autofocus 自动获取焦点(不同同时出现多个，若真这么写，第一个生效) | |
(7)autocomplete 是否开启输入框提示补全功能 | |
on(默认值，打开，需要搭配name使用) | |
off(关闭) | |
*(8)pattern 正则校验,和js不同，在html标签的属性值中，不需要写前后的/ | |
(9)multiple 上传文件或者填写邮箱时，允许输入多个值，用“,”隔开。 | |
(10)datalist 数据提示下拉框 | |
1.写一个datalist标签，内部搭配option使用，注意：要显示的内容需要写在value里边 | |
2.给datalist起一个id名 | |
3.给需要datalist标签的元素添加一个list属性，属性值为datalist的id名 |
Nine
面试题
一、优雅降级和渐进增强
渐进增强：
针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级：
一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
区别：
优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。
二、css3选择器
1.层级选择器
(1)包含选择器 E F 选中E下边所有层级中的F(包括儿子和孙子)
(2)子代选择器 E>F 选中E下边第一层中的F(只有亲儿子)
(3)相邻兄弟选择器E+F 选中E后边相邻的兄弟F(如果后面兄弟不是F，则F不选中)
(4)通用选择器 E~F 选中E后边所有的同级F
2.属性选择器
(1)E[属性D] 选中所有E标签中，属性名为D的标签。
(2)E[属性D='属性值F'] 选中所有E标签中，属性名为D,属性值仅为F的元素
(3)E[属性D~='属性值F'] 选中所有E标签中，属性名为D,多个属性值有一个属性值为F的元素
补充:
(4)E[属性D*='属性值F'] 选中所有E标签中，属性名为D,属性值中包含F的元素(5)E[属性D^='属性值F'] 选中所有E标签中，属性名为D,第一个属性值以F关键词作为开头的元素
(6)E[属性D$='属性值F'] 选中所有E标签中，属性名为D,最后一个属性值以F关键词作为结尾的元素
(7)E[属性D|='属性值F'] 选中所有E标签中，属性名为D，属性值为F或者F-开头的元素
3.结构伪类选择器
(1)E F:first-child 选中E下边的第一个子元素，如果这个子元素是F，则被选中
(2)E F:last-child 选中E下边的最后一个子元素，如果这个子元素是F，则被选中
(3)E F:nth-child() 选中E下边符合某种规律的子元素F
具体规律：
- 数字
选中E下边的第几个子元素，如果这个子元素是F，则被选中
2.关键词
even 偶数
odd 奇数
3.表达式
2n
(2n+1)或(2n-1)
3n
补充：
(4)E F:only-child E下边只有一个子元素，而且此子元素为F时，被选中
4.根元素选择器
html:root 匹配文档的根元素。但是在html中，根元素只有一个，那就是html
5.空元素选择器
E:empty 匹配内容为空的E元素,有空格或者换行都不行。
6.目标伪类选择器
E:target 需要搭配锚点使用，当锚点元素获取焦点时，被选中
7.UI状态伪类选择器（多用于表单）
E:enabled 选中E标签中的可用元素
E:disabled 选中E标签中的不可用元素
E:checked 选中E标签中被选中的元素
8.UI状态伪元素选择器
E::selection 选中被用户选中的内容
9.用户行为选择器
E:focus 当元素获取焦点时被选中
10.否定伪类选择器
E:not(F) 选中E中除了F之外所有的元素
11.Css3的背景属性background-size:contain不会被裁切也不会变形
三、css3属性
1.文本阴影属性 text-shadow
属性 text-shadow:h-shadow v-shadow blur color;
h-shadow 阴影水平方向上的偏移，左负右正
v-shadow 阴影垂直方向上的偏移，上负下正
blur 模糊距离（不可为负）
color 阴影颜色
注意：一段文本可以设置多个阴影，每组阴影之间用逗号隔开。
2.盒子阴影 box-shadow
属性 text-shadow:h-shadow v-shadow blur spread color inset;
h-shadow 阴影水平方向上的偏移，左负右正
v-shadow 阴影垂直方向上的偏移，上负下正
blur 模糊距离（不可为负）
spread(可选参数) 阴影大小，为正放大，为负缩小
color 阴影颜色
inset(可选参数) 设置内阴影
默认是outset，但是写上去阴影失效
3.圆角属性 border-radius
属性值：
(1）四个值
1个值 四个角圆角
2个值 左上、右下 右上、左下
3个值 左上 右上、左下 右下
4个值 左上 右上 右下 左下
(2）x1/y1 第一个参数表示圆角的水平半径，第二个参数表示圆角的垂直半径
(3) 1.在正方形中，宽高的一半或者 直接写50%为圆形
2.在长方形中，宽高为50%，显示为椭圆形
宽高为宽度的一半或者高度的一半，为跑道型。
3.可以使图片设置成圆形的有：border-radius:50%;和border-radius:100%;
4.背景图的多背景图案例：
background:url(../images/234.jpg) no-repeat,url(../images/345.jpg) no-repeat,red;
总结：在使用多背景图时，先写的背景图在上层，后写的背景图在下层,背景色需要写在最后边，层级也在下层。
5.兼容写法(浏览器前缀)
谷歌浏览器和safari浏览器前缀为 -webkit-box-shadow:
欧朋浏览器前缀 -o-box-shadow:
火狐浏览器前缀 -moz-box-shadow:
IE浏览器前缀 -ms-box-shadow:
自定义字体：
案例： @font-face {
font-family: "ljy1";
src: url(../images/HYC6GFM.TTF);
}
.p1{font-family: 'ljy1';}
<p class="p1">China 中国智造，慧及全球</p>
iconfont阿里矢量图标库
(1)font-class 引用
第一步：引入项目下面生成的 fontclass 代码：
<link rel="stylesheet" href="../iconfont/iconfont.css">
第二步：挑选相应图标并获取类名，应用于页面：
<span class="iconfont icon-xxx"></span>
(2) Unicode 引用
第一步：引入项目下面生成的 fontclass 代码：
<link rel="stylesheet" href="../iconfont/iconfont.css">
第二步：挑选相应图标并获取字体编码，应用于页面：
<span class="iconfont">3</span>
TEN
一、渐变
1. CSS3渐变
可以让你在两个或多个指定的颜色之间显示平稳的过渡。
2.线性渐变 linear-gradient
—— background: linear-gradient(to top,red,green,blue);
特点：线性渐变是从“一个方向”向“另一个方向”的颜色渐变。
(1)第一个参数可以写渐变方向，但是可以省略。
(2)默认渐变方向为从上到下，按照写的颜色顺序依次渐变。
(3)关于渐变方向，既可以是某条边(to right)，还可以去某个角(to right top)，也可以是一个角度(45deg)。
(4)非规律性渐变：
可以在颜色后边跟百分比，规定此颜色出现的位置，从而达到非规律渐变的效果。
----background: linear-gradient(to top,red 0%,green 30%,blue 100%);
3.径向渐变 radial-gradient()
案例1: ————background: radial-gradient(red,yellow,blue)
特点：径向渐变是从“一个点”向四周的颜色渐变。
默认特点:
(1)默认渐变形状为椭圆形，但是因为正方形中间到四条边距离相等，所以在正方形中，看起来像圆形。
(2)默认的渐变起点为盒模型的中心点，向四周渐变。
(3)从内到外按照书写的颜色顺序进行渐变。
案例2：————background: radial-gradient(渐变位置,渐变形状,渐变大小,red,yellow,blue);
(1)渐变位置可以写关键词，还可以写像素单位大小,还可以写百分比。
(2)渐变形状默认为椭圆形ellipse，还可以写圆形circle。
(3)渐变大小最好不要和渐变形状同时用，
closest-side：最近边；
farthest-side：最远边；
closest-corner：最近角；
farthest-corner：最远角
(4)注意：目前部分浏览器对于渐变形状，渐变位置，渐变大小的兼容性还不是特别完善，需要写浏览器前缀。
非规律性径向渐变:可以在颜色后边跟百分比，规定此颜色出现的位置，从而达到非规律渐变的效果。
案例————background: radial-gradient(red 0%,yellow 20%,blue 100%);
4.重复渐变
(1) 重复线性渐变： repeating-linear-gradient(色值1 x%,色值2 y%,色值3 z%);
(2) 重复径向渐变： repeating-radial-gradient(色值1 x%,色值2 y%,色值3 z%);二、过渡 transition
含义：css3的transition允许css的同一个属性值在一定的时间区间内平滑地过渡。但是需要一个触发条件。
案例: transition: all 2s linear 2s;
参数1 哪些属性参与过渡 all代表所有的属性均参与过渡
参数2 过渡时间 ms为毫秒 s为秒
参数3 过渡速率
linear 匀速
ease 逐渐减速
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速
steps() 分步骤
cubic-bezier()
参数4 延迟时间
注意：当transition写给划过后，失去划过状态后，css立即恢复原来的状态，没有过渡效果。
所以如果我们需要移出也有过渡效果，需要将transition写给初始状态。
一、2D效果 transform
1.translate 位移 和position差不多
————translate
(1)translate控制元素X轴Y轴的位移，第一个参数为X轴位移，第二个参数Y轴位移
(2)X轴左负右正 Y轴上负下正
(3)当只写一个参数时，默认第二个参数为0
(4)translateX仅控制X轴位移,translateY仅控制Y轴位移
2.scale 缩放
形式：transform:scale(width,height);
(1)缩放原点默认为中心点，默认值为transform:scale(1,1)。
(2)第一个参数为宽的缩放倍数，第二个参数为高的缩放倍数。
(3)写一个值时，默认第二个参数和第一个参数一致。
(4)默认大小为1，大于1放大，小于1缩小。支持负数，负数先缩小再反转放大。
和改变宽高放大的区别：
(1)放大原点不同，scale以中心点放大，width和height以左上角为起点放大
(2)scale仍占据原本的空间大小，width和height会改变原本的大小结构，从而影响到其他元素
3.rotate 旋转
形式:transform:rotate(30deg);
(1)值为度数，默认正数顺时针旋转，负数逆时针旋转，旋转原点为中心点。
(2)rotateX() 沿着X轴旋转
(3)rotateY() 沿着Y轴旋转
4.skew 倾斜
skew(x轴倾斜，y轴倾斜)
(1)一个参数时，是X轴倾斜，y轴默认为0
(2)两个参数时，第一个参数控制X轴倾斜，第二个参数控制Y轴倾斜。
(3)支持负数，负数反方向倾斜。
(4)skewX()控制X轴倾斜，skewY()控制Y轴倾斜。
5.transform-origin 2d转换原点
(1)案例：transform-origin:参数1 参数2;
(2)参数1代表转换原点X轴坐标，参数2代表转换原点Y轴坐标。
(3)取值即可是关键词left/right/top/bottom/center，也可以是具体的数值参数。
(4)当参数为取值时，坐标点0,0在左上角。当参数为负数时，转换原点将会出现在元素之外。
二、动画
1.css3中由三个关于制作动画的属性：transform、transition、animation.
其实transform、transition可以完成一个2d的过渡动画，但是需要一个触发条件，
所以严格意义上来说他俩不属于真正的动画，在css3中，animation是专门用来做动画的属性。
2.@keyframes 关键帧动画
第一种形式
@keyframes huluwa {
from{
/* 定义初始样式 */
width: 200px;
height: 200px;
background-color: red;
}
to{
/* 定义最终样式 */
width: 500px;
height: 500px;
background-color: blue;
}
}
第二种形式
@keyframes huluwa {
33%{
/* 定义初始样式 */
width: 200px;
height: 200px;
background-color: red;
}
66%{
/* 中间帧样式 */
width: 500px;
height: 500px;
background-color: blue;
}
100%{
/* 结束帧样式 */
width: 200px;
height: 200px;
background-color: red;
}
}
注意：关键帧动画中每一帧都是相互独立的，需要将想要的效果定义完善,定义完关键帧动画后，需要将其绑定给animation。
一、动画 animation
1.结构 animation:动画名 单次时间 速率 延迟时间 循环次数 运动方向 动画状态;
(1)参数1 设置动画名称
(2)参数2 设置动画额单次执行时间
(3)参数3 动画执行速率（详细速率取值看day13）
(4)参数4 延迟时间
(5)参数5 循环次数
——取值1 数值 代表具体循环几次
——取值2 infinite 代表无限循环
(6)参数6 运动方向
——normal 正常方向(默认值)
——reverse 反方向运行
——alternate 先正常运行再反方向运行，并持续交替运行
——alternate-reverse 先反运行再正方向运行，并持续交替运行
(7)参数7 动画是否暂停运行
running 正常运行(默认值)
paused 暂定运行
二、3D
1.关于Z轴及2d和3d之间区别。
2d是一个平面，在2d中，我们拥有水平的X轴，和垂直于X轴的Y轴。
但是3d是立体的，他比2d多一条轴，这条轴垂直于2d的平面，叫做
Z轴，Z轴可以看作2d平面拥有了厚度，从而变成了一个3d的立体图形。
Z轴正半轴靠近电脑屏幕，Z轴负半轴远离电脑屏幕。
2.景深 perspective (视觉效果3d,只是看的有近大远小的效果)
日常生活中，我们在看一个物体时，有近大远小的视觉效果。让物体显得更加立体。但是在页面中，元素是没有远近这个概念的，他们是一个平面，这个时候为了让我们的页面有近大远小的视觉效果，我们一般会给3d元素的父元素添加景深,从而使他们视觉上也拥有近大远小的效果。
注意：一般我们将景深设置为 perspective:1200px; 视觉效果最佳
3.perspective-origin 改变3d观察点
观察3d元素的（位置）角度 perspective-origin：center center （中心）
perspective-origin：left top （左上角）
perspective-origin：100% 100% （右下角）
4.3d空间 transform-style
transform-style属性是3D空间一个重要属性，指定嵌套元素如何在3D空间中呈现。
给元素设置transform-style:preserve-3d;之后，这个元素就变成一个3d空间，他的子元素就能展现出3d效果。
5.3d属性
(1)3d位移
transform:translate3d(tx,ty,tz);
——参数1为X轴位移
——参数2为Y轴位移
——参数3为Z轴位移
translateX X轴位移
translateY Y轴位移
translateZ Z轴位移
(2)3d旋转
transform:rotate3d(x,y,z,a);
——参数1为X轴矢量
——参数2为Y轴矢量
——参数3为Z轴矢量
——参数4为旋转角度
——矢量主要为0和1，0为不旋转，1为旋转
rotateX X轴旋转
rotateY Y轴旋转
rotateZ Z轴旋转
一、标准盒模型 box-sizing:content-box;
1.实际所占空间大小=(content=width)+padding*2+border*2+margin*2
2.相当于，在标准盒模型中，border和padding是在width之外的，margin也在width之外。
二、怪异盒模型 box-sizing:border-box;
1.实际所占空间大小=width+margin*2 width=content+padding*2+border*2
2.相当于在怪异盒模型中，border和padding是加在width之内的。margin在width之外。
新内容：
三、弹性盒 display:flex;(父元素添加)
概念:
1.通过display:flex属性，将当前元素变为一个弹性盒，此元素下边第一层的子元素变为弹性布局元素。
2.特性：在弹性盒中，有一条默认水平的主轴，和一条永远垂直于主轴的交叉轴,元素默认沿着主轴排列。
3.弹性盒中，我们一般不适用margin和float来改变元素的位置。
属性:
(1)写给父元素，控制整体
1. display:flex;(父元素添加) 将元素变成弹性盒里边的第一层子元素按照弹性布局排列。
2.justify-content(父元素添加) 改变主轴上元素的对齐方式
——flex-start 沿着主轴开始的地方对齐
——flex-end 沿着主轴结束的地方对齐
——center 在主轴上居中对齐
——space-around 在主轴上环绕式分布
——space-between 在主轴上两端分布
3.flex-direction(父元素添加) 主轴排列方式(默认是横向排列)
——row(默认值) 主轴横向排列
——*column 主轴纵向排列
——row-reverse 主轴横向翻转排列
——column-reverse 主轴纵向反转排列
4.flex-wrap(父元素添加) 主轴是否换行
注意：弹性元素沿着主轴排列，默认不换行，放不下默认会缩小。flex-wrap可以使主轴换行，换行后，元素不会再缩小，放不下自动换行。
——wrap 换行
——nowrap(默认值) 不换行
5.align-items(父元素添加) 改变交叉轴（侧轴）对齐方式(每一行的对齐方式)
——flex-start 当前行侧轴开始的地方对齐
——flex-end 当前行侧轴结束的地方对齐
——center 当前行侧轴中间对齐
6.align-content(父元素添加) 改变交叉轴（侧轴）整体对齐方式(在主轴使用换行(flex-wrap:wrap)后使用)
——flex-start 侧轴整体沿开始地方对齐
——flex-end 侧轴整体沿结束地方对齐
——center 侧轴整体中心地方对齐
——space-between 侧轴整体两端对齐
——space-around 侧轴整体环绕式分布
(2)写给子元素(控制单个)
7.align-self(写给子元素) 当前单个弹性元素单行侧轴对齐方式(可以在父元素是align-items时使用)
——flex-start 当前行侧轴开始的地方对齐
——flex-end 当前行侧轴结束的地方对齐
——center 当前行侧轴中间对齐
8.order(写给子元素) 弹性元素排列优先级
属性值写数字，数字越大，越靠后。支持负数。默认值为0
9.flex flex-grow、flex-shrink、flex-basis
<1>复写形式默认值 flex:0 1 auto; 有剩余空间不放大、空间不够就缩小、宽度按照元素宽度来
<2>复写属性中各个属性的含义
flex-grow flex元素是否放大
0 不放大（默认值）
1 放大
flex-shrink flex元素是否缩小
0 不缩小
1 缩小（默认值）
flex-basis flex元素初始长度
如果属性值写数字，弹性元素按照这个数值来
auto（按照元素原本的宽度，或者根据剩余空间分配）
<3>常用几组值
——默认值 flex:0 1 auto; 有剩余空间不放大、空间不够就缩小、宽度自适应
——弹性 flex:1 1 auto; 有剩余空间就放大、空间不够就缩小、宽度自适应 flex:1; 三栏布局：头部固定，脚部固定，中间自适应
——不弹性 flex:0 0 auto; 有剩余空间不放大、空间不够也不缩小、宽度自适应 flex:none;
四、多列
1.column-count 定义将元素分为几列 备注：table不适用。
2.column-gap 定义列与列之间的间距
3.column-rule 定义列间隔线(跟边框写法一样）
4.column-fill
auto 列高度自适应 父元素有多高，前几列就多高。空白空间全部放在最后几列
balance 默认值，高度统一，每列平分空余空间
5.column-span (写给子元素) 跨列
all 横跨所有列
none 不跨列（默认值）
6.column-width 每列的宽度
作用：可以通过设置列宽来将元素分列，一般不和column-count同时使用，若同时使用了，两者谁列宽较大，谁优先生效。