HTML5+CSS3 - 完整前端人的骨架和皮肤

01_Introduce

网页分为三个部分：

1.结构（HTML）
2.表现（CSS）
3.行为（JavaScript）

CSS - 层叠样式表

网页实际上是一个多层的结构，通过CSS可以分别为网页的每一层中的元素来设置样式

使用CSS来修改元素的样式

1.内联样式、行内样式
在标签内部通过style属性来设置元素的样式
- 问题：使用内联样式，样式只能对一个标签生效，如果希望影响到多个元素，必须在每一个元素中都复制一遍。并且当样式发生变化时，必须要一个一个修改，十分不方便
2.内部样式表
将样式编写到head中的style标签里，通过CSS的选择器来选中元素并为其设置各种样式，可以同时为多个标签设置样式，并且修改时只需要修改一处即可全部应用
内部样式更加方便对样式进行复用
- 问题：内部样式表只能对一个网页起作用，样式不能跨页面进行复用
3.外部样式表（最佳方式）
将CSS样式编写到一个外部的CSS文件中，通过link标签来引入外部的CSS文件
外部样式表需要通过link标签进行引入，意味着只要想使用这些样式的网页都可以对其进行引用，样式可以在不同页面之间进行复用
将样式编写到外部的CSS文件中，可以使用到浏览器的缓存机制，从而加快网页的加载速度，提升用户体验

02_CSS

一、选择器

通过选择器可以选中页面中的指定元素，比如p的作用就是选中页面中所有的p元素

二、声明块

通过声明块来指定要为元素设置的样式，声明块由一个一个的声明组成
声明是一个名值对结构，一个样式名对用一个样式值，名和值之间以：连接，以；结尾

常见选择器

1.元素选择器

作用：根据标签名来选中指定的元素
语法：标签名{ }
例子：p{ } h1{ } div{ }

2.id选择器

作用：根据元素的id属性值选中一个元素
语法：#id属性值{ }
例子：#box{ } #red{ }

3.类选择器

class是一个标签的属性，它和id类似，不同的是class可以重组使用，可以通过class属性来为元素分组
作用：根据元素的class属性值选中一组元素
语法：.class属性值{ }

4.通配选择器

作用：选中页面中的所有元素
语法：*{ }

5.交集选择器

作用：选中同时符合多个条件的元素
语法：选择器1选择器2选择器3{ }
注意：交集选择器中如果有元素选择器，必须使用元素选择器开头

6.并集选择器

作用：同时选择多个选择器对应的元素
语法：选择器1，选择器2，选择器3{ }

7.关系选择器

父元素：直接包含子元素的元素是父元素
子元素：直接被父元素包含的元素是子元素
祖先元素：直接或间接包含后代元素的元素是祖先元素，一个元素的父元素也是它的祖先元素
后代元素：直接或间接被祖先元素包含的元素叫作后代元素，子元素也是后代元素
兄弟元素：拥有相同父元素的元素是兄弟元素

1.子元素选择器

作用：选中指定父元素的指定子元素
语法：父元素>子元素{ }

2.后代元素选择器

作用：选中指定元素内的所有后代元素
语法：祖先 后代{ }

3.兄弟元素选择器

作用：选择下一个兄弟或之后所有兄弟
语法： 前一个 + 下一个{ } / 兄 ~ 弟{ }

8.属性选择器

[属性名] 选择含有指定属性的元素
[属性名 =属性值] 选择含有指定属性和属性值的元素
[属性名 ^=属性值] 选择属性值以指定值开头的元素
[属性名 $=属性值] 选择属性值以指定值结尾的元素
[属性名 *=属性值] 选择属性值中含有某值的元素

9.伪类选择器

伪类（不存在的类，特殊的类）
伪类用来描述一个元素的特殊状态，比如：第一个子元素、被点击的元素、鼠标移入的元素
伪类一般情况下都是使用：开头

：first-child 第一个子元素
：last-child 最后一个子元素
：nth-child() 选中地n个子元素

特殊值： n 第n个 n的范围0到正无穷
2n/even n的范围为偶数
2n+1/odd n的范围为奇数
- 注意：以上这些伪类都是根据所有的子元素进行排序
：first-of-type
：first-of-type
：first-of-type
以上几个伪类的功能和上述的类似，不同点是它们是在同类型元素中进行排序
：not() 否定伪类：将符合条件的元素从选择器中去除

超链接的伪类

1.没有访问过的链接	:link 用法		a:link{ }
2.访问过的链接	:visited 用法	a:visited{ }
注意：只适用于a，且由于隐私的原因，所以visited这个伪类只能修改链接的颜色
3.鼠标移入的状态	:hover	用法	a:hover{ }
4.鼠标点击的状态	:active 用法	a:active{ }

10.伪元素选择器

伪元素：表示页面中一些特殊的并不真实存在的元素（特殊的位置）
伪元素使用 :: 开头

::first-letter	表示第一个字母
::first-line	表示第一行
::selection	表示选中的内容
::before	表示元素起始的位置
::after	表示元素最后的位置
	- before 和 after 必须结合content属性来使用
	- 用法 ::before/after{ content }

样式的继承

我们为一个元素设置的样式同时也会应用到它的后代元素上，继承是发生在祖先和后代之间的
继承的设计是为了方便开发，利用继承可以将一些通用的样式设置到共同的祖先元素上
注意：并不是所有的样式都会被继承，比如背景相关、布局相关等不会被继承

选择器的权重

当通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值，此时发生样式冲突
发生样式冲突时，应由选择器的权重（优先级）决定
选择器的权重
内联样式 - 1000
id选择器 - 100
类和伪类选择器 - 10
元素选择器 - 1
通配选择器 - 0
继承的样式 - 没有优先级

注：
1.比较优先级时，需要将所有的选择器优先进行相加计算，最后优先级越高，则越优先显示（分组选择器是单独计算的）
2.选择器的累加不会超过其最大的数量级，类选择器和再高也不会超过id选择器
3.如果优先级计算后相同，此时优先使用靠下的样式

03_layout

文档流(normal flow)

网页是一个多层的结构，一层摞着一层，通过css可以分别为每一层设置样式， 作为用户来讲只能看到最顶上一层，最底下的一层称为文档流，文档流是网页的基础，我们所创建的元素默认都是在文档流中进行排列

• 元素主要有两个状态

1. 在文档流中
2. 不在文档流中（脱离文档流）

• 元素在文档流中的特点

1. 块元素
   块元素会在页面中独占一行
   默认宽度是父元素的全部（会把父元素撑满）
   默认高度是被内容撑开（子元素）
   块元素在页面中自上向下竖直排列
2. 行内元素
   行内元素不会独占页面的一行，只占自身的大小
   行内元素在页面中自左向右水平排列，如果一行之中不能容纳下行内元素，元素会换到第二行自左向右排列
   行内元素的默认宽度和高度都是被内容撑开

盒模型

CSS将页面中的所有元素都设置为了一个矩形的盒子，将元素设置为矩形的盒子后，对页面的布局就变成将不同的盒子摆到不同的位置
每个盒子都由以下几个部分组成
1.内容区（content）
2.内边距（padding）
内边距的设置会影响到盒子的大小，背景颜色会延伸到内边距上
3.边框（border）
设置边框，需要至少设置三个样式，边框的大小会影响到整个盒子的大小

边框的宽度 border-width
边框的颜色 border-color
边框的样式 border-style：solid 实线 dotted 点状虚线 dashed 虚线 double 双线
border简写属性：通过该属性可以同时设置边框所有的相关样式，并且没有顺序要求

4.外边距（margin）
外边距不会影响盒子可见框的大小，但是会影响盒子的位置，元素在页面中是按照自左向右的顺序排列的，所以默认情况下设置左和上外边距则会移动元素自身，而设置下和右外边距会移动其他元素

• 元素水平方向的布局：
  元素在其父元素中水平方向的位置由以下几个属性共同决定
  margin-left border-left padding-left width padding-right border-right margin-right
  一个元素在其父元素中，水平布局必须要满足以下等式
  margin-left+border-left+padding-left+width+padding-right+border-right+margin-right=其父元素内容区的宽度（必须满足）

• 使用 overflow 属性来设置父元素如何处理溢出的子元素4
  可选值：默认值visible hidden scroll auto

• 垂直方向外边距的重叠（折叠）
  相邻的垂直方向外边距会发生重叠现象
  1.兄弟元素
  兄弟元素间的相邻垂直外边距会取两者之间的较大值（两者都是正值）
  如果相邻的外边距一正一负，则取两者的和
  如果相邻的外边距都是负值，则取绝对值较大的
  2.父子元素
  父子元素间的相邻外边距，子元素的会传递给父元素（上外边距）
  父子外边距的折叠会影响页面的布局，必须要进行处理

• 行内元素的盒模型
  1.行内元素不支持设置宽度和高度
  2.行内元素可以设置padding，但是垂直方向的padding不会影响页面的布局
  3.行内元素可以设置border，但是垂直方向的border不会影响页面的布局
  4.行内元素可以设置margin，但是垂直方向的margin不会影响页面的布局

• display用来设置元素显示的类型

    inline 将元素设置为行内元素
    block 将元素设置为块元素
    inline-block 将元素设置为行内块元素：既可以设置宽度和高度，又不会独占一行
    table 将元素设置为一个表格
    none 元素不在页面中显示
  

• visibility用来设置元素的显示状态

    visible 默认值，元素在页面中正常显示
    hidden 元素在页面中隐藏不显示，但是依然占据页面的位置
  

• box-sizing 用来设置盒子尺寸的计算方式（设置width和height的作用）

    content-box 默认值，宽度和高度用来设置内容区的大小
    border-box 宽度和高度用来设置盒子可见框的大小
  

• outline 用来设置元素的轮廓线，用法和border一样
  轮廓不会影响到可见框的大小

• box-shadow 用来设置元素的阴影效果，阴影不会影响页面的布局

• border-radus 用来设置圆角

04_layout

浮动的简介

通过浮动可以使一个元素向其父元素的左侧或者右侧移动，使用float属性来设置元素的浮动。元素设置浮动以后，水平布局的等式便不需要强制成立，元素会从文档流中脱离，不再占用文档流的位置，所以元素下边的还在文档流的元素会自动向上移动

• 浮动的特点
  1.浮动元素会完全脱离文档流，不再占据文档流中的位置
  2.设置浮动以后元素会向父元素的左侧或右侧移动
  3.浮动元素默认不会从父元素中移出
  4.浮动元素向左或向右移动时，不会超过它前边的其它浮动元素
  5.如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移
  6.浮动元素不会超过它上班浮动的兄弟元素，最多就是和它一样高
  7.浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围（利用浮动来设置文字环绕图片的效果）
• 脱离文档流的特点
  块元素：1.块元素不会独占页面一行2.块元素的高度和宽度都被内容撑开
  行内元素：行内元素会变成块元素
  脱离文档流以后，不需要再区分块元素和行内元素

简单总结：目前来讲，浮动的主要作用就是让页面中的元素可以水平排列，通过浮动可以制作一些水平方向的布局

高度塌陷的问题

在浮动布局中，父元素的高度默认是被子元素撑开的，当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离将会无法撑起父元素的高度，导致父元素的高度丢失，其下的元素会自动上移，导致页面布局混乱。高度塌陷是浮动布局中比较常见的一个问题
BFC（Block Formatting Context）块级格式化环境
BFC是CSS中的一个隐含属性，可以为一个元素开启BFC，开启BFC以后，该元素会变成一个独立的布局区域

• 元素开启BFC以后的特点
  1.开启BFC的元素不会被浮动元素所遮盖
  2.开启BFC的元素子元素和父元素外边距不会重叠
  3.开启BFC的元素可以包含浮动的子元素
• 可以通过一些特殊方式开启元素的BFC
  1.设置元素的浮动（不推荐）
  2.将元素设置为行内块元素（不推荐）
  3.将元素的overflow设置为一个非visible值（常用 overflow: hidden）

如果不希望某个元素因为其它元素浮动的影响而改变位置，可以通过clear属性来清除浮动元素对当前元素产生的影响，可选值 left/right/both（清除两侧中最大影响的那一侧）
clear原理：设置清除浮动以后，浏览器会自动为元素添加一个上外边距，使其位置不受其它元素的影响

高度塌陷的最终解决方案 - clearfix

clearfix可以同时解决高度塌陷和外边距重叠的问题

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

05_position

定位的简介

定位（position）是一种更高级的布局手段，通过定位可以将元素摆放到页面的任意位置

• position属性用来设置定位

    static 默认值，元素是静止的，没有开启定位
    relative 开启元素的相对定位
    absolute 开启元素的绝对定位
    fixed 开启元素的固定定位
    sticky 开启元素的粘滞定位
  

• 相对定位（relative）
  1.元素开启相对定位以后，如果不设置偏移量，元素不会发生任何变化
  2.相对定位是参照于元素在文档流中的位置进行定位的
  3.相对定位会提升元素的层级
  4.相对定位不会使元素脱离文档流
  5.相对定位不会改变元素的性质，块还是块，行内还是行内

• 偏移量（offset）
  当元素开启了定位以后，可以通过偏移量来设置元素的位置，可选值top/bottom/left/right
  定位元素垂直方向的位置由top和bottom两个属性来控制，通常情况下指挥使用其中之一
  定位元素水平方向的位置由left和right两个属性来控制，通常情况下指挥使用其中之一

• 绝对定位（absolute）
  1.开启绝对定位后，如果不设置偏移量元素的位置不会发生变化
  2.开启绝对定位后，元素会从文档流中脱离
  3.绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开
  4.绝对对位会使元素提升层级
  5.绝对定位元素是相对于其包含块进行定位的

• 包含块（containing block）
  正常情况下，包含块就是离当前元素最近的祖先块元素
  绝对定位的包含块：包含块就是离它最近的开启了定位的祖先元素，如果所有的祖先元素都没有开启定位则根元素就是它的包含块
  html（根元素、初始包含块）

• 固定定位（fixed）
  固定定位也是一种绝对定位，所以固定定位的大部分特点都和绝对定位一样，唯一不同的是固定定位永远参照于浏览器的可视窗口进行定位，固定定位的元素不会随网页的滚动条滚动

• 粘滞定位（sticky）
  粘滞定位的忒点和相对定位的特点基本一致，不同的是粘滞定位可以在元素到达某个位置时将其固定

• 绝对定位元素的布局
  当开启了绝对定位以后，水平方向的布局等式需要添加left和right两个值，垂直方向的布局等式需要添加top和bottom两个值，此时规则和之前一样，当发生过度约束时
  1.如果9个值中没有auto则自动调整right以使等式满足
  2.如果9个值中有auto则自动调整auto以使等式满足
  可以设置auto的值：margin/width/left/right
  left和right的值默认是auto，如果不设置left和right，则等式不满足时会自动调整这两个值

元素的层级

对于开启了定位的元素，可以通过设置z-index属性来指定元素的层级，z-index需要一个整数作为参数，值越大则元素的层级越高，元素层级越高越优先显示
如果元素的层级一样，则优先显示靠下的元素
祖先元素的层级再高也不会盖住后代元素

06_font&background

字体

@font-face 可以将服务器中的字体直接提供给用户使用，但是存在加载速度和版权的问题

 @font-face {
            /* 指定字体的名字 */
            font-family: 'myfont';
            /* 服务器中字体的路径 */
            src: url();
        }

字体相关的样式

color // 用来设置字体的颜色
font-size //用来设置字体的大小
			和 font-size 相关的单位
			em 相当于当前元素的一个 font-size
			rem 相当于根元素的一个 font-size
font-family // 用来设置字体族(字体的格式)
			可选值：
				serif 衬线字体
				sans-serif 非衬线字体
				monospace 等宽字体

font-family 可以同时指定多个字体，多个字体间使用逗号隔开，字体生效时优先使用第一个，第一个无法使用则使用第二个

字体相关的简写属性

font 可以设置字体相关的所有属性
语法：font : 字体大小/行高 字体族
行高可以省略不写，如果不写则使用默认值

font : bold italic 50px/2 serif;

行高

行高(line-height)指的是文字占有的实际高度，可以通过 line-height 来设置行高，行高可以直接指定一个大小(px em)，也可以直接为行高设置一个整数。如果是一个整数，行高将会是字体的指定的倍数。
行高经常用来设置文字的行间距
行间距 = 行高 - 字体大小
字体框：字体框就是字体存在的格子，设置 font-size 实际上就是在设置字体框的高度
行高会在字体框的上下平均分配，可以将行高设置为和高度一样，使单行文字在一个元素中垂直居中

文本的样式

• text-align 文本的水平对齐方式
  可选值：
  left right 左右对齐
  center 居中对齐
  justify 两端对齐
• vertical-align 元素垂直对齐方式
  可选值：
  baseline 默认值 基线对齐
  top bottom 顶/底部对齐
  middle 居中对齐
• text-decoration 文本修饰
  可选值：
  none 默认值
  underline 下划线
  overline 上划线
  line-through 删除线
• white-space 网页处理空白的方式
  可选值：
  normal 正常
  nowrap 不换行
  pre 保留空白

background

• background-color 设置背景颜色
• background-image 设置背景图片
  同时设置背景图片和背景颜色时，背景颜色会成为背景图片的背景颜色。如果背景图片小于元素，背景图片会在元素中平铺将元素铺满，如果背景图片大于元素，将会有一部分背景无法完全显示
• background-repeat 设置背景的重复方式
  可选值：
  repeat 默认值 背景会沿着x轴 y轴双方向重复
  repeat-x 沿着x轴方向重复
  repeat-y 沿着y轴方向重复
  no-repeat 背景图片不重复
• background-position 用来设置背景图片的位置
  可选值：top left right bottom center
  使用方位时如果只写一个值，第二个值默认为center
  也可以使用偏移量来指定背景图片的位置
  background-position: 10px（水平方向） 10px（垂直方向）;
• background-origin 背景图片偏移量计算的原点
  可选值：
  padding-box 默认值 从内边距处开始计算
  content-box 从内容区处开始计算
  border-box 从边框处开始计算
• background-clip 边框范围
  可选值：
  border-box 默认值 背景会出现在边框下边
  padding-box 背景只出现在内容区和内边距
  content-box 背景只出现在内容区
• background-size 背景图片大小
  第一个值表示宽度，第二个值表示高度，如果只写一个值，则第二个值默认是auto
  可选值：
  cover 图片比例不变，将元素铺满
  contain 图片比例不变，将图片在元素中完整显示
• background-attachment 设置背景图片是否跟随元素移动
  可选值：
  scroll 默认值 背景图片会随元素移动
  fixed 背景图片会固定在页面中，不会随元素移动

背景相关的简写属性

background 可以设置背景相关的所有简写属性，并且该样式没有顺序要求，也没有哪个属性是必须写的
注意：
1.background-size 必须写在 background-position 后面，并且使用/隔开
2.background-origin 必须写在 background-clip 前面

渐变（linear-gradient）

通过渐变可以设置一些复杂的背景颜色，可以实现从一个颜色向其它颜色过渡的效果
线性渐变：颜色沿着一条直线发生变化
线性渐变的开头可以指定渐变的方向
to left / to right / to bottom / to top
deg 度数 / turn 圈
repeating-linear-gradient 可以平铺的线性渐变

07_HTML补充

表格简介

通过

标签来创建表格，在table中使用表示表格中的一行，在中使用表示单元格
rowspan 纵向合并单元格 colspan 横向合并单元格
表格可以分成三个部分，分别是头部 thead，主体 tbody，底部 tfoot，th表示头部的单元格
注：如果表格中没有使用tbody而是直接使用tr，浏览器会自动创建一个tbody并且将全部tr放到这个tbody中，tr不是table的子元素

表格的样式

• border-spacing 指定边框之间的距离
• border-collapse 设置边框的合并

表单简介

网页中的表单用于将本地的数据提交给远程的服务器，使用form标签来创建表单

// form属性 action 指定表单要提交的服务器地址
<form action = "target.html">
// 文本框 注意：数据要提交到服务器中，必须腰围元素指定一个name属性
文本框 <input type="text" name="username">
密码框 <input type="password" name="password">
// 单选按钮：选择框必须要指定一个value属性，最终会作为用户填写的值传递给服务器。checked 可以将单选按钮设置为默认选中
单选按钮 <input type="radio" name="hello" value="a">
		<input type="radio" name="hello" value="b" checked>
多选框 <input type="checkbox" name="test" value="1">
       <input type="checkbox" name="test" value="2">
       <input type="checkbox" name="test" value="3">
下拉列表 <select name="haha" id="">
        <option value="i">选项1</option>
        <option value="ii" selected>选项2</option>
        <option value="iii">选项3</option>
        </select>
提交按钮<input type="submit" value="注册">
重置按钮<input type="reset">
普通按钮<input type="button" value="按钮">
// autocomplete = "off" 关闭自动补全
// readonly 只读 数据会提交
// disabled 禁用 数据不会提交
// autofocus 设置表单项自动获取焦点
</form>

08_animation

过渡（transition）

通过过渡可以指定一个属性发生变化时的切换方式

• transition-property 指定要执行过渡的属性
  多个属性间使用逗号隔开，如果所有属性都需要过渡，则使用all关键字，大部分属性都支持过渡效果。注意过渡时必须是从一个有效数值向另外一个有效数值进行过渡
• transition-duration 指定过渡效果持续的时间
• transition-timing-function 过渡的时序函数 指定过渡的执行方式
  可选值：
  ease 默认值 先加速，再减速
  linear 匀速运动
  ease-in 加速运动
  ease-out 减速运动
  ease-in-out 先加速再减速
  cubic-bezier() 来指定时序函数
  steps() 分布执行过渡效果
  可以设置 start 和 end 值
  start 表示时间开始时过渡
  end 表示时间结束时过渡 默认值
• transition-delay 过渡效果的延时

过渡相关的简写属性

transition 可以同时设置过渡相关的所有属性，只有一个要求，如果要写延时，先写持续时间，再写延迟时间

动画（animation）

动画和过渡类似，都是可以实现一些动态的效果，不同的是，过渡需要在某个属性发生变化时才会触发，而动画可以自动触发动态效果。
设置动画效果，必须先设置一个关键帧，关键帧设置了动画指定的每一个步骤

@keyframes test {
 /* from表示动画的开始位置 也可以使用0% */
from {
         margin-left: 0;
      }
/* to表示动画的结束位置 也可以使用100% */
 to {
        margin-left: 700px;
	 }
}

• animation-name 要对当前元素生效的关键帧的名字
• animation-duration 动画的执行时间
• animation-delay 动画的延时
• animation-iteration-count 动画执行的次数
  可选值：次数 / infinite
• animation-direction 动画运行的方向
  可选值：
  normal 默认值 从 from 到 to 每次都是这样
  reverse 从 to 到 from 每次都是这样
  alternate 从 from 到 to 重复执行动画时会反向执行
  alternate-reverse 从 to 到 from 重复执行动画时会反向执行
• animation-play-state 设置动画执行的状态
  可选值：
  running 默认值 动画执行
  paused 动画暂停
• animation-fill-mode 动画的填充模式
  可选值：
  none 默认值 动画执行完毕元素会回到原来位置
  forwards 动画执行完毕元素会停止在动画结束的位置
  backwords 动画延迟等待时，元素就会处于开始位置
  both 结合了 forwards 和 backwords
• animation-timing-function 动画的时序函数 指定动画的执行方式 可选值与过渡类似

变形

变形就是指通过CSS改变元素的形状或位置，变形不会影响到页面的布局

• transform 用来设置元素的变形效果 平移元素，百分比是相对于自身计算的
  可选值：
  translateX() 沿着x轴方向平移
  translateY() 沿着y轴方向平移
  translateZ() 沿着z轴方向平移
  rotateX() 沿着x轴方向旋转
  rotateY() 沿着y轴方向旋转
  rotateZ() 沿着z轴方向旋转
  scaleX() 水平方向缩放
  scaleY() 垂直方向缩放
  scale() 双方向的缩放
• backface-visibility 设置是否显示元素背面
• transform-origin 设置变形的原点 默认值为center

09_flex

flex（弹性盒、伸缩盒）简介

flex是css中又一种布局手段，它主要用来代替浮动完成页面的布局
flex可以使元素具有弹性，让元素可以跟随页面大小的改变而改变

弹性容器

要使用弹性盒，必须先将一个元素设置为弹性容器，通过 display 设置弹性容器

• display:flex 设置为块级弹性容器
• display:inine-flex 设置为行内的弹性容器

弹性元素

弹性容器的直接子元素是弹性元素（弹性项），一个元素可以同时是弹性容器和弹性元素

• flex-grow 指定弹性元素的伸展系数
  1.当父元素有多余的空间时子元素如何伸展
  2.父元素的剩余空间会按照比例进行分配
• flex-shrink 指定弹性元素的收缩系数
  当父元素中的空间不足以容纳所有的子元素时如何收缩
• flex 设置弹性元素的三个样式
  flex 增长 缩减 基础长度
  可选值：
  initial 0 1 auto
  auto 1 1 auto
  none 0 0 auto 弹性元素没有弹性
• order 决定弹性元素的排列顺序
• flex-direction 指定容器中弹性元素的排列方式
  可选值：
  row 默认值 弹性元素在容器中水平排列
  row-reverse 弹性元素在容器中反向水平排列
  column 弹性元素纵向排列
  column-reverse弹性元素反向纵向排列
• flex-wrap 设置弹性元素是否会自动换行
  可选值：
  nowrap 默认值 元素不会自动换行
  wrap 元素沿着辅轴方向自动换行
  wrap-reverse 元素沿着辅轴反方向换行
• flex-flow direction 和 wrap 的简写属性
• justify-content 主轴上的元素排列方式
  可选值：
  flex-start 元素沿着主轴起边排列
  flex-end 元素沿着主轴终边排列
  center 元素居中排列
  space-around 空白分布到元素两侧
  space-between 空白分布到元素间
  space-evenly 空白分布到元素的单侧
• align-items 元素在辅轴上的对齐方式
  可选值：
  stretch 默认值 将元素的值设置为相同的值
  flex-start 元素不会拉伸，沿着辅轴起边对齐
  flex-end 元素不会拉伸，沿着辅轴终边对齐
  center 居中对齐
  baseline 基线对齐
• align-content 辅轴空白空间的分布
• align-self 用来覆盖当前弹性元素上的align-items