1.水平方向布局
大家有没有想过，我们页面上的布局是什么实现的，为什么我一个宽100px的元素永远在左边？，margin：0 auto 为什么居中？，一般水平方向的是公式的：
元素在其父元素中水平方向的位置由以下几个属性共同决定
- margin-left
- padding-left
- border-left
- width
- padding-right
- border-right
- margin-right
一个元素在其父元素中，水平布局必须满足以下等式
margin-left+padding-left+ border-left+width+padding-right+border-right+margin-right = 其父元素的宽度（必须满足）
以上等式必须满足，如果相加的等式不成立，则称为过渡约束，则等式会自动调整
调整情况以下：如果七个值中没有为auto的情况下，则浏览器会自动调整margin-right
这七个值有三个值可以设置为auto
- width
- margin-left
- margin-right
如果某个值为auto，则会自动调整为auto的那个值以试等式成立
0+0+0+auto+0+0+0 = 800 auto：800
auto+0+0+auto+0+0+0 = 800 宽auto：800（其他一个外边距为0 宽最大）
auto+0+0+auto+0+0+auto = 800 宽auto 800（其他两个外边距为0 宽最大）
两个值为auto
auto+0+0+0+0+0+auto = 800 auto：400
如果将一个宽度和一个外边距设置为auto，则宽度会调整为最大，设置为auto的外边距为自动为0
如果将三个值都设置为auto，则外边距都是0，宽度最大（占满）
如果将两个外边距设置为auto，宽度固定值，则会将外边距设置想同的值
所以我们经常利用这个特点，来使一个元素在其父元素水平居中
如：width：xxxpx margin：0 auto
2.垂直方向布局
垂直方向就更简单了，默认情况下父元素的高度被内容撑开，但如果子元素的高度超过了父元素，我们可以使用overflow来调整
3.浮动
通过浮动可以使一个元素向其父元素的左侧或右侧 使用 float 属性来设置于元素的浮动
none 默认值，元素不浮动
left 元素向左移动
right 元素向右浮动
浮动的特点
1.浮动元素会完全脱离文档流，不再占用文档流中的位置
2.设置浮动以后元素会向父元素的左侧或右侧移动
3.浮动元素默认不会从父元素中移出
4.浮动元素向左向右移动时，不会超过ta前边的其他浮动元素
5.如果浮动元素的上边是一个没有浮动废人块元素，则浮动元素无法上移
6.浮动元素不会超过它上边的浮动的兄弟元素，最多最多就是和它一样高
简单总结
浮动目前来讲它的主要作用就是让它在页面中的元素可以水平排列
通过浮动可以制作一些水平方向的布局
4.清除浮动
如果我们不希望某个元素因为其他元素浮动的影响而改变位置，可以通过clear属性来清除浮动元素对当前元素所产生的影响
clear
作用 清除浮动元素对当前元素所产生的影响
-可选值
left 清除左侧浮动元素对当前元素的影响
right 清除右侧浮动元素对当前元素的影响
both 清除两侧中最大影响的那侧
5.高度塌陷
有一个父元素和子元素，父元素的高是子元素撑起来的，突然子元素浮动了，那么就脱离文档流， 这时候就高度塌陷了，父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱， 所以高度塌陷是浮动布局中比较常见的一个问题，这个问题我们必须要进行处理
5.1父元素设置一个高度
5.2使用clearFix，也就是使用元素的前后伪元素，保持高度不变
.clearfix::before,
.clearfix::after{
content: '';
display: table;
clear: both;
}
5.3开启BFC（重点，面试也会问）
BFC(Block formatting Context)
-BFC是一个css中的一个隐含的属性，可以为一个元素开启BFC
开启BFC该元素会变成一个独立的布局区域
-元素开启BFC后特点
1.开启BFC的元素不会被浮动元素所覆盖
2.开启BFC的元素子元素和父元素外边距不会重叠
3.开启BFC的元素可以包含浮动的子元素
可以通过一些特殊方式来开启元素的BFC
1.设置元素的浮动(不推荐)
2.将元素设置为行内块元素display：inline-block(不推荐)
3.将元素的overflow设置为一个非visible的值
常用的方式 为元素设置 overflow hidden开启BFC 已使其可以包含浮动元素
总结：开启了BFC就相当于为这个元素开启另一个规则，可以帮我们解决高度塌陷，也可以帮我们解决margin-top重叠问题(设置子元素margin-top，父元素却也跟着动的问题)
6.定位
6.1相对定位
当元素的position属性设置为relative时则开启了元素的相对定位
相对定位的特点
1.元素开启相对定位以后，如果不设置偏移量元素不会发生任何的变化
2.相对定位是参照与元素在文档流中的位置进行定位的
3.相对定位会提升元素的层级
4.相对定位不会使元素脱离文档流
5.相对定位不会改变元素的性质块还是块，行内还是行内
偏移量（offset）
-当元素开启了定位以后，可以通过偏移量来设置元素的位置
top
-定位元素的上边的位置
bottom
-定位元素和定位下边的位置
定位元素垂直方向的位置由top和bottom两个属性来控制
通常情况下我们只会使用其中一
top值越大，定位元素会往下移动
bottom值越大 定位元素越上移动
left
-定位元素的左边的位置
right
-定位元素和定位右边的位置
6.2 绝对定位
当元素的position属性值设置为absolute时，则开启元素的绝对定位
绝对定位的特点
1.开启绝对定位后，如果不设置偏移量元素位置不会发生变化
2.开启绝对后，元素会从文档流中脱离
3.绝对定位会改变元素的性质，行内变成块，块的高度被内容撑开
4.绝对定位会使元素提高一个层级
5.绝对定位元素相对于其包含块进行定位的
包含块（containing block）
-正常情况下：
包含块就是离当前元素最近的祖先块元素
正确：
错误：正常情况父元素必须块元素
-绝对定位的包含块
包含块就是离它最近开启的定位的祖先元素
如果所有的祖先元素都没有开启定位则根元素就是ta的包含块
html（根元素，初始包含块）
如果祖先元素是行内元素的情况下，也可以对子元素的进行绝对定位
6.3 固定定位
将元素的position属性设置为fixed则开启了元素的固定定位
固定定位也是一种绝对定位，所以固定定位的大部分特点都和绝对定位一样
唯一不同的是固定定位永远参照与浏览器的视口进行定位
固定定位的元素不会随着网页的滚动条滚动
6.4粘滞定位
当元素的position属性设置为sticky时则开启了元素的粘滞定位
粘滞定位和相对定位的特点基本一致
不同的是粘滞定位可以在元素到达某个位置时将其固定
7.表格的组成
头部 thead
主体 tbody
底部 tfoot
很多时候我们写表格的时候，基本没有写tbody，其实浏览器帮我们加入来的，所以要记着之后在js动态添加表格项，记着还有一个tbody
8.弹性盒子
-是一种css的又一种布局手段，它主要用来代替浮动来完成页面的布局
-flex可以使元素具有弹性，让元素可以跟随页面的大小的改变改变
-弹性容器
要使用弹性盒，必须先将一个元素设置为弹性容器
我们可以通过display来设置弹性盒子
display:flex 设置块级弹性盒子
display：inline flex 设置行内的弹性容器
-弹性元素
-弹性容器的子元素是弹性元素（弹性项）
-弹性元素可以同时是弹性容器
给弹性容器的属性
flex-direction 指定容器弹性元素的排列方式
可选值：
row 默认值 弹性元素在容器中水平排列（从左往右）
-主轴 自左往右
row-reverse 弹性元素在容器中反向水平排列
-主轴 自右往左
column 弹性元素纵向排列（自上向下）
-主轴 自上向下
column-reverse 弹性元素方向纵向排列（自下往上）
--主轴 自下往上
给弹性元素的属性
flex-grow:指定弹性元素的伸展的系数
-当父元素有多余的空间时，会按照比例分配
flex-shrink 指定弹性元素的收缩系数
-当父元素的空间不足或不足以容纳所有的子元素时，如何对子元素进行收缩
8.1弹性容器里的属性
flex-wrap:
设置弹性盒子是否在弹性容器自动换行
可选值
nowrap 默认值 元素不会换行
wrap 元素沿着辅轴方向自动换行
wrap-reveres 元素沿着辅轴的反方向换行
justify-content
-如何分配主轴上的空白空间（主轴上的元素如何排序）
-可选值
flex-start 元素沿着主轴起边排列
flex-end 元素沿着主轴终边排列
center 元素居中对齐
space-around 空白分布到元素两侧
space-between 空白均匀到元素之间
space-evenly 空白分配到元素单侧
align -items
-元素在辅轴上如何对齐
-元素间的关系
可选值
stretch 默认值，将元素的长度设置为相同的值
flex-start 元素了不会拉伸，沿着辅轴起边对齐
flex-end 沿着辅轴的终边对齐
center 居中对齐
baseline 基线对齐 注：可以让第一个段文字可以沿着一条线对齐
align-content 辅轴空白空间的分布
可选值
flex-start 元素沿着辅轴起边排列
flex-end 元素沿着辅轴的终端对齐
center 元素居中对齐
space-around 空白分布到元素两侧
space-between 空白均匀到元素之间
space-evenly 空白均匀到元素单侧
