华清远见-重庆中心-HTML、CSS知识点梳理
第一阶段的学习结束了一些知识点总结如下
注释
ctrl+/
标签
1.什么是标签?
在html文档中用<>包裹起来的对象
2.什么是属性？
属性就是标签中额外向浏览器提供的数据和信息。
属性的构成：总是以 属性名 = ‘属性值’ 这种形式出现。并且总是在标签的开始部分出现！
通过标签可以大致的了解该标签的作用或者相对应的语义，相同的标签携带的属性信息不一定相同。通过属性值的变化向外展示的信息也不同。
标签属性的分类：
全局属性：
全局属性就是任何标签都能使用的属性，称为全局属性！
常见的全局属性： class 、 hidden 、 id 、 style 、 title等
特定属性（私有属性）: 特定属性就是某些特定的标签才具备的属性称为特定属性！
常见的语义化标签
1. 标题标签 h1-h6
2. 段落标签 p
3. 换行标签 br
4. 水平线标签 hr
5. i斜体标签（iconfont字体图标的容器来使用） i
6. em 标签 斜体字 注重文本的语调加重
7. b标签 粗体字 加粗
8. strong 粗体 强调重要内容
9. blockquote 长引用标签
10. q 短引用
11. sub 文本下角标
12. sup 文本上角标
13. del 删除线
14. ins 插入线
元素的分类
块级元素：
1.块级元素独占一行；
2.可以设置元素的宽高，默认的宽度是其父元素的宽度；
3.块元素可以嵌套其他的块元素(p元素除外，p元素不能嵌套其他的块元素)或者行内元素或者文本信息。
行内元素：
1.行内元素不会独占一行，它会在一行上一直显示直到无法排列为止；
2.不可以设置元素的宽高，尤其内容的宽高决定
3.通常包裹其他行内元素及文本信息
行内块元素
1.可以设置宽高
2.不会独占一行
div和span元素两个都不具备任何的语义！
div是典型的块级元素， span是典型的行内元素，span通常是作为行内元素以及文本信息的容器使用！
列表标签
列表标签：
HTML中将列表类型分为三类，有序列表(ol)、无序列表(ul)、定义列表(dl)(对xxx进行解释) （子项只能为li）
有序列表
无序列表
定义列表
- hello
- 对hello进行解释
img标签
img标签（图片标签）：利用img标签向文档内引入外部(网络资源/本地资源)的图片资源
img标签是一个单标签（自结束标签）
超链接
html中使用a标签来定义创建一个超链接
a标签的属性：
href属性：指定跳转的目标路径
- 值可以是一个外部网站的地址
traget属性： 两个值
- _blank:新网页以新窗口的方式打开
- _self: 默认值，新网页在当前窗口中打开
注意：
1.超链接是一个行内元素
2.a标签比较特殊，a标签可以嵌套除它自身以外的任何元素
路径问题
路径的分类：
- 绝对路径：任何文件和资源都存在一个绝对路径，通过绝对路径可以让其他任何位置的文件准备的找到！
相对路径的书写方式： / (当前文件所在的根目录) ./(当前文件所在目录路径) …/(当前文件所在的上一级目录路径)
总结：在项目的实际开发中，以相对路径为主！尽可能的不要使用绝对路径访问资源！
基础选择器
元素选择器：
通过元素的标签名进行选择，该方式会选择页面中所以同名的元素
格式： div p span a h1 等都属于元素选择器
id选择器：
通过标签元素的id属性值，来选择对应的元素，注意id属性是唯一的（类似于人的身份证号）
格式: #id值
类选择器：
通过标签元素的class属性值，来选择同类别的元素！
注意：这里的同类别，不是说 div 和 div是同类别（并不是说标签名相同的才是同类别元素）
同类别是指各元素的class值是相同的！
class值不唯一！
div class=demo
span class=demo
格式： .class值
通配符选择器：
选择页面中所以的元素
格式： *
复合选择器
复合选择器：是由两个或多个基础选择器共同构成的！称为复合选择器！
- 交集选择器: 同时满足多个选择器的元素才能被选中
语法： 选择器1选择器2选择器3 {}
注意：各选择器之间没有任何的符号包括空格
- 并集选择器： 被选择的元素只需要满足其中一种选择器即可被选中！
语法： 选择器1,选择器2,选择器3 {}
注意：各选择器之间是用,逗号进行分隔
关系选择器
关系选择器：由两个或多个其他选择器组合构成！
元素之间的关系
html中各元素，如果通过关系来区分的话，可以大致分为以下几种：
父元素、子元素、祖先元素、后代元素、兄弟元素
父元素： 该元素直接去包含了子元素的元素称为父元素
子元素： 被父元素直接包裹的元素，叫做子元素
兄弟元素： 拥有共同的父元素的元素称为兄弟元素
祖先元素： 包裹着其他元素的元素就是祖先元素，父元素其实也是特殊的祖先元素！二级嵌套或多级嵌套的元素！
后代元素： 被祖先元素的嵌套包裹的元素都可以称为是后代元素，子元素是特殊的后代元素
关系选择器
子代选择器：
格式： 选择器1>选择器2>选择器3…
注意：子代选择器主要是看直接的父子关系！
后代选择器：
格式： 选择器1 选择器2 选择器3 …
注意：后代选择器主要是看重祖先和后代元素的关系，（父元素和子元素都是特殊的元素）
总结：后代选择器所包含的范围更广！因为子元素也是特殊的后代元素！
子代选择器它只会去看父元素下的子元素！它不会管元素下的其他后代元素！
兄弟选择器:
格式：
- 1. 选择器1+选择器2 选中指定元素后面的第一个兄弟元素
- 2. 选择器1~选择器2 选中指定元素后面的所以兄弟元素
属性选择器
属性选择器: 通过标签元素自身的某个属性来选择元素的
格式: [属性相关语法]
1. [属性名] 选择所有含有该属性的元素
2. [属性名=属性值] 选择所有含有该属性并且值是指定数据的元素
3. [属性名^=属性值] 选择所有含有该属性并且也指定字符开头的元素
4. [属性名$=属性值] 选择所有含有该属性并且也指定字符结尾的元素
5. [属性名*=属性值] 选择所有含有该属性并且属性值中拥有指定的字符的元素
伪类选择器
伪类： 不存在的类，是一些特殊的类！代表的是元素的某种状态
在css中可以将伪类进行分类，分成两大类：
结构型伪类：与hmlt结构相关的类
动态伪类： 与用户的交互相互的类
伪类的语法一般是： :伪类名
注意：伪类选择器大多数情况下不会单独进行使用，通常和其他选择器配合使用！
结构伪类（常用的）：
:first-child 父元素下的第一个子元素
:last-child 父元素下的最后一个子元素
:nth-child() 父元素下的第n各子元素
注意：以上这些伪类都是将父元素下的所有子元素进行排序的！包括不同类型的节点！
:first-of-type 父元素下同类型的子元素进行排序中的第一个子元素
:last-of-type 父元素下同类型的子元素进行排序中的最后一个子元素
:nth-of-type() 父元素下同类型的子元素进行排序中的任意的子元素*
注意： 以上的三个伪类的功能和之前的三个伪类是类似的，不同点是他们只在同类型元素中进行排序
动态伪类
动态伪类主要是和用户的交互相关
常用的动态伪类：
:link 用来表示没有被访问过的超链接(只能用于a标签)
:visited 用来表示已经被访问过的超链接(只能用于a标签)
:hover 表示鼠标移入到某元素内 （用于任何元素）
:active 表示点击某元素 (用于任何元素)
注意：伪类尽可能的不要单独使用！请配合其他的选择器使用
伪类选择器
伪元素选择器：
伪元素，是一种假的页面元素！会动态的进行改变！更多是表示页面中一些特殊的位置！
伪元素通常是使用： ::伪元素名
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中的内容
注意：以下两个伪元素必须搭配css中的content属性进行使用！
::before 元素的最开始的位置
::after 元素的末尾位置
css的三大特性
层叠性，优先级（选择器的权重），继承性
css的层叠性
css的层叠性主要作用是解决css的样式冲突问题(当一个元素被多个相设置了相同的属性但属性值不同的选择器选中时，css就会利用层叠性来解决 )
层叠性的特点:选择最后一个即最靠近元素的一个选择器将它的属性作为该元素的css属性值。
ps:层叠性的作用只体现在权重相同的选择其中，如果选择器的权重被打破层叠性将不再发挥作用。
css选择器的优先级
优先级：因为css的各个选择器的权重不一样，所以才会有优先级。
css中的基础选择器分为元素选择器，类选择器，id选择器和通配符选择器。
权重原则:当有两条或多条样式选中了一个相同的元素时css的权重才会生效或者说优先级生效即权重高的那条样式才会对该元素生效
各选择器之间的权重值
继承的样式:最低
通配符选择器：0，0，0，0
元素选择器：0，0，0，1
类/属性/伪类选择器:0,0,1,0
id选择器:0,1,0,0
行内元素选择器:1,0,0,0
除此之外还有一个无穷大的选择器:!importanr(该方式要慎重考虑使用)；属性选择器，子代选择器，后代选择器，伪元素选择器这些选择器都有权重也是通过计算得来的
css选择器优先级的总结
以上的选择器的权重都是基础值并不是最终的值，如果有多个选择器组合那么会将多个选择器的基础权重相加得到最终的权重值，但相加的过程不会进位，他权重的最高位是由其最高的选择器来决定的(比如最高位的选择器时id选择器那么它在怎么相加权重也不可能超过 0，1，0，0)
css的继承性
继承性:为了解决相同的样式属性频繁的在元素中设置，就可以利用继承性，继承性只发生在父代元素和子代元素之间
注意：并不是所有属性都可以被继承，可以继承的属性有:字体相关的(font-) 文本相关的(text-) 列表相关的(list-) 字体颜色相关的(color)等等
文档流
文档流:
-网页就是一个多层的结构，就像ps里面的图层一样，一层叠着一层，最底层就是文档流。
-所有的在网页中的元素都应该默认遵循文档流的规则
块元素在文档流中的规则
1.独占一行
2.可以设置宽高
3.默认宽度有宽元素决定
4.默认的高度由自身的内容撑开或者子元素和设置的css相关的属性决定
行内元素在文本流中的规则
1.不独占一行
2.不可以设置宽高
3.默认宽度和高度有内容决定
4.行内元素在页面中都是水平排列知道无法排列时换行
行内块元素在文本流中的规则
1.可以设置宽高
2.不会独占一行
元素不遵循文本流（元素不在文本流中或者脱离文本流）
1.元素脱离文本流后将不会在占据文本流中的实际位置
2.元素脱离文本流后层级会自动提高
3.元素脱离文本流后在不再区分块元素，行内元素和行内块元素 统一称为脱离文本流的元素
4.元素脱离文本流后默认的高度宽度由自身内容决定也可以设置宽高
ps：设置了浮动的元素就脱离了文本流(float:left float:right)
盒模型
盒模型
-将网页中的所有元素都看成一个矩形盒子
-将元素设置成矩形盒子之后对页面的布局就变成了将不同的盒子摆放到对应的位置
-盒子由下面几部分组成
1.内容区(content)
2.内边距(padding)
3.边框(border)
4.外边距(margin)
盒模型-内容区
盒子模型中的内容区是用来放置各种元素以及文本的区域，内容的大小由width和height决定
盒模型-边框
边框属于盒子的边缘部分，边框以内是属于盒子内部，以外是属于盒子外部
css中设置边框的属性
边框的颜色：border-color
边框的宽度:border-width（四个值:上右下左；三个值:上 左右 下；两个值:上下 左右；一个值:上下左右)
边框的样式：border-style
border:1px solid red;这样同时设置了宽度颜色和样式，这三个值没有顺序关系
border-color和border-width的用法一样
- border-style 边框的样式：
值的情况：
- solid 实线
- dotted 点状虚线
- dashed 虚线
- double 双实线
- none 无边框（默认值）
盒模型-内边距：
- 内边距是指内容区与边框之间的距离
- 每个盒子一共由四个方向的内边距
可以分别通过css属性设置：
padding-top 上内边距
padding-right 右内边距
padding-left 左内边距
padding-bottom 下内边距
大多数情况下使用简写方式： padding：
根据值数量的不同，效果不同：
四个值： 上 右 下 左
两个值： 上下 左右
一个值： 上下左右
注意：内边距的大小设置会影响盒子可见框的大小
盒模型-外边距
- 外边距不在盒模型自身上，
- 外边距不会影响盒子可见框的大小
- 每个盒子具备四个方向的外边距：
margin-top 上外边距 设置正值或者负值
margin-right 右外边距
margin-left 左外边距
margin-bottom 下外边距
除了以上四个属性可以设置外边距之外，还可以利用简写形式margin同时为盒子的四个方向设置外边距
margin属性的用法和padding是一模一样的盒模型-内边距：
- 内边距是指内容区与边框之间的距离
- 每个盒子一共由四个方向的内边距
可以分别通过css属性设置：
padding-top 上内边距
padding-right 右内边距
padding-left 左内边距
padding-bottom 下内边距
大多数情况下使用简写方式： padding：
根据值数量的不同，效果不同：
四个值： 上 右 下 左
三个值： 上 左右 下
两个值： 上下 左右
一个值： 上下左右
注意：内边距的大小设置会影响盒子可见框的大小
盒模型-内边距：
- 内边距是指内容区与边框之间的距离
- 每个盒子一共由四个方向的内边距
可以分别通过css属性设置：
padding-top 上内边距
padding-right 右内边距
padding-left 左内边距
padding-bottom 下内边距
大多数情况下使用简写方式： padding：
根据值数量的不同，效果不同：
四个值： 上 右 下 左
三个值： 上 左右 下
两个值： 上下 左右
一个值： 上下左右
注意：内边距的大小设置会影响盒子可见框的大小
盒模型-外边距
- 外边距不在盒模型自身上，
- 外边距不会影响盒子可见框的大小
- 每个盒子具备四个方向的外边距：
margin-top 上外边距 设置正值或者负值
margin-right 右外边距
margin-left 左外边距
margin-bottom 下外边距
除了以上四个属性可以设置外边距之外，还可以利用简写形式margin同时为盒子的四个方向设置外边距
margin属性的用法和padding是一模一样的 盒模型-外边距
- 外边距不在盒模型自身上，
- 外边距不会影响盒子可见框的大小
- 每个盒子具备四个方向的外边距：
margin-top 上外边距 设置正值或者负值
margin-right 右外边距
margin-left 左外边距
margin-bottom 下外边距
除了以上四个属性可以设置外边距之外，还可以利用简写形式margin同时为盒子的四个方向设置外边距
margin属性的用法和padding是一模一样的
元素的溢出
因为子元素是在父元素的内容区进行排列的，如果子元素的大小超过了父元素那么子元素就会从父元素中溢出但是子元素溢出的部分不会占据实际中文档的位置
元素溢出的处理方法
处理溢出可以通过css的overflow属性来处理：
-visible，默认值 子元素从父元素中溢出时，在父元素的外部的位置显示
-hidden，溢出的内容将被裁剪，不会显示
auto：根据子元素溢出的方向来设置滚动条，通过滚动条的方式来展示子元素的内容
外边距的折叠问题
垂直方向的外边距重叠（折叠）： 相邻的垂直方向的外边距会发生重叠现象
- 兄弟元素
- 兄弟元素间的垂直外边距会取两者之间的较大值作为两个元素的外边距
兄弟元素之间的外边距折叠是对开发有利的！不需要过度的去处理！
- 父子元素
- 父子元素间外边距，子元素的外边距会传递给父元素，导致父元素也会更改盒子的位置！
- 父子外边距的折叠是不好的，会影响到页面的布局，必须要进行处理
- 处理方式：
1.给父元素开启BFC空间
- BFC特殊的块级领域！不会影响其他元素！
- overflow：hidden
2.设置父元素的padding
3.设置父元素的border - 兄弟元素间的垂直外边距会取两者之间的较大值作为两个元素的外边距
（兄弟元素之间的外边距折叠是对开发有利的！不需要过度的去处理！）
- 父子元素
- 父子元素间外边距，子元素的外边距会传递给父元素，导致父元素也会更改盒子的位置！
- 父子外边距的折叠是不好的，会影响到页面的布局，必须要进行处理
- 处理方式：
1.给父元素开启BFC空间
- BFC特殊的块级领域！不会影响其他元素！
- overflow：hidden
2.设置父元素的padding
3.设置父元素的border
行内元素的盒模型
html文档中所有的元素（块元素、行内块元素、行内元素）都是一个矩形盒子！
但是，行内元素的盒模型比较特殊！
矩形盒子组成部分 = 内容区 + 内边距 + 边框 + 外边距
行内元素的盒模型：
- 行内元素不支持设置宽度和高度！
- 行内元素可以设置padding，但是垂直方向的padding不会影响页面，不起作用
- 行内元素可以设置border，但是垂直方向的border不会影响页面的布局
- 行内元素可以设置margin，但是垂直方向的margin不会影响布局
元素的转换
在开发过程中有时需要给行内元素设置宽高或者让块元素多个排列在一行这个时候就需要对元素进行转换
转换是块元素，行内元素和行内块元素之间的互相转换，可以通过css的样式属性display对三者进行转换
display：
inline：设置为行内元素
block转换为块元素
inline-block转换为行内块元素
除此之外display还有其他的作用
none：将元素设置为不可见
相应元素的隐藏设置可以通过display：none来设置，还可以通过visibility来设置元素的显示状态
-visible 默认值元素显示正常
-hidden 元素在页面中隐藏不显示，但依然占据实际位置
布局小技巧
margin：0 auto可以将块元素水平居中在它的父元素内
text-align：center可以将行内元素水平居中在元素内
line-hight可以将文本信息垂直居中在元素内(行间距等于自身的高度与)
元素中的透明度：opacity
元素的阴影：box-shadow
浮动布局
通过css的浮动属性设置可以将元素移到其父元素的左边或者右边
float：left左浮动
float：right右浮动
注意：元素设置了浮动之后将会脱离文本流，不会再占据文本流中的位置
浮动元素的特点
1.浮动元素完全脱离文本流，。不在占据文本流中的位置
2.设置浮动之后只能向其父元素的左边或者右边进行浮动
3.浮动元素默认不会超过它前面的浮动元素
4.默认情况下浮动元素不会脱离其父元素的的掌控
5.如果浮动元素的前面是一个没有设置浮动的元素那么浮动元素将无法浮动
解决高度塌陷的问题
在设置了浮动之后可能会导致高度塌陷
解决方法：
1.给父元素设置固定的高度，防止子元素浮动引起塌陷
2.给父元素开启BFC
BFC是一个特殊的领域，该领域不会受到其他元素布局的影响
overflow：hidden；目前最优解
3.给父元素设置浮动（不建议）
清除浮动的最终解决方法
.clearfix::after,
.clearfix::before{
content: '';
display: table;
clear: both;
定位
定位(position)是一种更高级的布局手段分为相对定位(position:relative)l绝对定位(position:absolute)还有固定定位和粘滞定位了解一下即可不常用。定位一般下为子决父相：给子元素进行绝对定位，父元素进行相对定位
元素设置了定位之后还要设置偏移量才能将元素移到正确的位置，我们可以可利用css4个偏移量属性进行设置
-position
- top 定位元素和基准点上方向的距离
- left 定位元素和基准点左方向的距离
- right 定位元素和基准点右方向的距离
- bottom 定位元素和基准点下方向的距离
相对定位
当元素的position属性值，设置为relative则对该元素开启了相对定位模式！
- 相对定位元素的特点：
1.元素开启了相对定位后，如果不设置偏移量元素是不会发生任何变化的
2.相对定位是参照于元素在文档流中的位置进行定位的 （参照自身原本的位置，为基准）
3.相对定位会提升元素的层级
4.相对定位不会使元素脱离文档流
5.相对定位不会改变元素的性质，块还是块，行内还是行内
总结：相对定位是对页面布局影响最小的定位方式！
绝对定位
绝对定位
- 当元素的position属性值设置为absolute就为元素开启了绝对定位
- 绝对定位元素的特点：
1.开启绝对定位后，如果不设置偏移量元素的位置不会发生变化
2.开启绝对定位后，元素会从文档流中脱离
3.绝对定位会改变元素的性质，（脱离文档流的元素）
4.绝对定位会让元素提升层级
5.绝对定位元素是相对于其最近的开启了定位的包含块来定位的
口诀：‘子绝父相’
HTML的表格标签
在网页中我们通过table标签来创建一个表格元素
H5中标准表格的组成
头部 thead 主体tbody 底部 tfoot
th表示表示头部thead中的单元格
td单元格内容，一个td是一个单元格；tr表示行一对tr标签表示一行
HTML的表单标签
表单的作用：
对数据的收集并发送给服务器
HTML中通过form来创建表单
表单中的常用属性;
-text常见的文本框
-password密码输入框
-radio单选框
-checkbox复选框
-button 普通提交按钮
-submit 提交按钮
-reset 重置按钮
- name属性
注意:数据要想提交给服务器,那么每一个表单控件都应该指定一个name属性值
- value属性
value属性是与name属性进行搭配使用, 一个表单控件 必须存在 name和value
name和value就会构成一种数据格式: name=value
- placeholder属性 用于输入框的提示描述
- disabled 禁用控件 并且数据不能提交给服务器
- readonly 只读控件 数据不能修改但是可以提交给服务器
具体代码展示
轮播图
轮播图就是将几张图片放在一个盒子里然后根据设置的放映时间轮流展示出来。
如何创建轮播图
1. 轮播图首先要创建一个装图片的盒子盒子的宽高建议跟图片的宽高一样（比如创建一个ul，每个li中含有一张图片根据图片的数量来决定li的数量）
2.利用@keyframes move创建一段动画帧,根据图片的数量来设置每个节点
@keyframes move {
from {
margin-left: 0px;
} to{
margin-left: 500px;
}
}
3. /* 为该元素设置动画帧 /
/ 动画帧的名字 move /
/ 动画整体持续的事件 5s /
/ 动画整体播放的速度是匀速播放 linear /
/ 动画重复播放 infinite*/
animation: move 5s linear infinite;
具体代码演示：
}
.picture ul{
width: calc(9 * 100%);
height: 100%;
outline: 1px solid red;
margin-left: 0px;
animation: lunbotu linear 13s infinite;
}
@keyframes lunbotu{
0%,11% {
margin-left: 0px;
}
12%,23% {
margin-left: -100%;
}
24%,35%{
margin-left: -200%;
}
36%,47% {
margin-left: -300%;
}
48%,59%{
margin-left: -400%;
}
60%,71%{
margin-left: -500%;
}
72%,83% {
margin-left: -600%;
}
84%,95%{
margin-left: -700%;
}
100%{
margin-left: -800%;
}
}
.picture ul li:nth-child(1) {
background-image: url("../image/1.jpg");
background-size: cover;
}
.picture ul li:nth-child(2) {
background-image: url("../image/2.jpg");
background-size: cover;
}
.picture ul li:nth-child(3) {
background-image: url("../image/3.jpg");
background-size: cover;
}
.picture ul li:nth-child(4) {
background-image: url("../image/4.jpg");
background-size: cover;
}
.picture ul li:nth-child(5) {
background-image: url("../image/5.jpg");
background-size: cover;
}
.picture ul li:nth-child(6) {
background-image: url("../image/6.jpg");
background-size: cover;
}
.picture ul li:nth-child(7) {
background-image: url("../image/7.jpg");
background-size: cover;
}
.picture ul li:nth-child(8) {
background-image: url("../image/8.jpg");
background-size: cover;
}
.picture ul li:nth-child(9) {
background-image: url("../image/1.jpg");
background-size: cover;
}
弹性盒
（搬运老师上课的内容）
flex (弹性盒)：
- 是css中的又一种高级的布局手段，它主要用来替代浮动的！
- flex可以使得元素具有弹性！让元素可以跟随页面发送变化！
- 弹性容器：为一个元素开启了flex时，该元素就是弹性容器，弹性盒
- 利用css的属性 display 开启
display:flex 将元素设置为块级弹性容器
display：inline-flex 将元素设置为行内块的弹性容器
- 弹性元素（项目元素）：弹性容器下的子元素就称作为，弹性元素！项目元素！
元素一旦开启了flex布局，那么该容器就自动生成两个轴线！
分别是主轴和侧轴
- 主轴：默认情况下，主轴就是横向的x轴，方向是从左往右
- 侧轴：默认情况下，侧轴就是纵向的y轴，方式是从上往下
注意：弹性元素，就会在主轴和侧轴上进行排列！
- css的属性设置
- 弹性容器设置相关的css属性
- 以下这些属性都是设置在弹性容器身上的！
1. flex-direciton 指定容器中的主轴和侧重方向！
可选值：
- row 默认值 主轴是x轴 方向是从左往右 ，侧轴是y轴，方向是从上往下
- column 主轴是y轴 方向是从上往下 ，侧轴是x轴，方向是从左往右
2. flex-wrap 设置弹性元素是否在弹性容器中换行
可选值：
nowrap 默认值 弹性元素不会换行
wrap 元素可以进行换行
3. flex-flow 该属性是 direciton和wrap属性的简写！
4. justify-content 分配主轴上的空白空间
可选值：
flex-start 元素从主轴的起点排列 默认值
flex-end 元素从主轴的终点排列
center 元素居中排列
space-around 空白分布到元素的两侧
space-between 空白均匀分布的元素之间 ，开始元素顶格容器边缘，末尾元素顶格容器的边缘
space-evenly 空白均匀分布到元素
5. align-items 设置元素在侧轴上对齐的方式
可选值：
- streth 默认值， 如果元素未设置高度或者宽度，则将元素沿着侧轴填满
- flex-start 元素不会拉伸，沿着侧轴起点对齐
- flex-end 元素不会拉伸，沿着侧轴终点对齐
- center 侧轴居中对齐
- baseline 文本基线对齐 了解
6. align-content 分配侧轴上的空白空间 ，
注意：该属性只能用于容器开启了换行模式才能生效 flex-wrap：wrap
可选值：
flex-start 所有元素向侧轴的起点对齐
flex-end 所有元素向侧轴的终点对齐
center 所有元素向侧轴的中间对齐
space-around 空白分布到元素的两侧
space-between 空白均匀分布的元素之间
stretch 空白单向向元素一侧分配，产生间隙
- 弹性元素的属性：
1. order 排序 数值越小 排列越靠前 默认为0
2. flex-grow 指定弹性元素的伸展系数 元素的扩充 默认情况元素不会自动扩充
3. flex-shrink 指定弹性元素的压缩 当空间不够时对元素进行压缩 默认压缩系数是1
4. flex-basis 指定元素的初始值大小，元素的宽高属性！ 该属性要优于元素的宽高属性！
5. flex 属性是 flex-grow ， flex-shrink ， flex-basis 的简写
- flex
auto ： 1 1 auto
none ： 0 0 auto
6. align-self 该属性是用来覆盖当前弹性元素上的aline-items属性值的，特殊化的对待
- flex-start
- flex-end
- center
- baseline 了解
- stretch 拉满侧轴
注意： 弹性元素既可以作为某一个弹性容器的弹性元素，也可以作为其他元素的弹性容器！
元素一旦变成弹性元素后，则不再区分行元素，块元素，行内块元素
在蒋老师的指导下也完成了一个静态页面的编写
展示如下：
这就是第一阶段的学习总结及学习结果