一、布局基础
1、布局：按照设计图要求，进行区域划分
2、布局时一个循环往复的过程
3、常用设计布局：(高度都不设置，让其根据内容自动)
1、所有内容全部居中
<body>
<div class="container">
</div>
</body>
.container{
width: XXpx;
margin: 0 auto;
}
2、头部贯穿，下面主体居中
<body>
<header></header>
<div class="container">
</div>
</body>
header{
width: 100%;
}
.container{
width: XXpx;
margin: 0 auto;
}
3、头部、脚部贯穿，中间内容居中
<body>
<header></header>
<div class="container">
</div>
<footer></footer>
</body>
header,footer{
width: 100%;
}
.container{
width: XXpx;
margin: 0 auto;
}
二、flex布局
1、容器和项目
容器：装东西（父元素）
项目：子元素
2、主轴和交叉轴
默认情况下，主轴水平向右，交叉轴垂直向下
3、创建弹性布局
在父元素中创建display:flex; 父元素就是容器，在默认状态下里面的项目显示在一行，
当项目宽度总和超过容器宽度，它会自动等比例压缩项目宽度。
（1）项目换行：flex-wrap
flex-wrap: nowrap; 不换行 默认情况
flex-wrap: wrap; 换行
flex-wrap: wrap-reverse; 倒放换行
（2）控制主轴方向对齐方式：justify-content
justify-content: center; 所有项目居中显示
justify-content: flex-start; 靠左对齐
justify-content: flex-end; 靠右对齐
justify-content: space-between; 项目与项目之间等距分配，项目与容器距离为0
justify-content: space-around; 项目与项目之间距离相等，项目与容器距离为 项目与项目之间距离的一半
justify-content: space-evenly; 所有空白部分距离相等
（3）控制交叉轴方向对齐方式：align-items
align-items: center; 居中
align-items: flex-start; 上方排列
align-items: flex-end; 底部排列
align-items: baseline； 项目的第一行文字的基线对齐
align-items: stretch; 默认值，如果项目未设置高度或设为auto，将占满整个容器的高度
（4）改变主轴方向：flex-direction
flex-direction: row; 默认值，主轴为水平方向，起点在左端
flex-direction: row-reverse; 主轴为水平方向，起点在右端
flex-direction: column; 主轴为垂直方向，起点在上沿
flex-direction: column-reverse; 主轴为垂直方向，起点在下沿
（黑色表示主轴，橙色表示交叉轴，交叉轴随主轴变化）
（5）定义多根轴线的对齐方式：align-content（如果项目只有一根轴线，该属性不起作用）
align-content：flex-start; 与交叉轴的起点对齐
align-content：flex-end; 与交叉轴的终点对齐
align-content：center; 与交叉轴的中点对齐
align-content：space-between; 与交叉轴两端对齐，轴线之间的间隔平均分布
align-content：space-around; 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
align-content：stretch; 默认值，轴线占满整个交叉轴
（6）把剩余部分按比例分给子元素：flex-grow (写在子元素里面，后面的数字代表比例)
三、定位
元素设置了position属性：
div{
/* 静态定位 默认值 */
position: static;
/* 相对定位 */
position: relative;
/* 绝对定位 */
position: absolute;
/* 固定定位 */
position: fixed;
/* 粘性定位 */
position: static;
}
1、相对定位
相对盒子原来的位置偏移，原本所占空间不变，没有脱离文档流，一般用来做绝对定位的父元素。
2、绝对定位
- 当浮动元素被设置为绝对定位，元素的float属性会失效
- 相对于设置了定位属性（除static）的父元素偏移
- 如果没有就相对于html元素偏移
- 脱离了文档流，不再占据空间
- 子绝父相
子元素设置为绝对定位，父元素设置为相对定位，父元素位置发生变化，子元素跟着变化。
- 使用z-index可以改变堆叠顺序，数值越大，堆叠在越上方 3、固定定位
相对于浏览器窗口的固定位置，不会随着用户的滚动变化，脱离文档流。
4、粘性定位
依赖于用户的滚动，在相对定位与固定定位之间切换，指定top、left、right、bottom四个阈值其中之一，粘性才会生效。
四、块级格式化上下文
块级格式化上下文：block formatting context（简称BFC），它时一个独立的渲染区域，这个区域与外部毫不相干。
1、如何创建BFC
- float不能是none
- position的值不是static或者relative
- display的值是line-block、table-cell、flex、table-caption或者inline-flex
- overflow的值不是visible
2、作用
- 避免上下两个相邻元素垂直方向的margin重叠
<p>看看我的 margin是多少</p>
<div>
<p>看看我的 margin是多少</p>
</div>
*{
margin: 0;
padding: 0;
}
p {
color: #f555;
background: yellow;
width: 200px;
line-height: 100px;
text-align:center;
margin: 30px;
}
div{
/* 激活BFC */
overflow: hidden;
}
激活后，两个p元素之间的margin为60px
- 解决父元素高度坍塌问题，通过激活父元素的BFC
<div class="par">
<div class="child"></div>
<div class="child"></div>
</div>
.par {
border: 5px solid rgb(91, 243, 30);
width: 300px;
/* 激活BFC */
overflow: hidden;
}
.child {
border: 5px solid rgb(233, 250, 84);
width:100px;
height: 100px;
float: left;
}
- 自适应两栏布局
<div class="left">LEFT</div>
<div class="right">RIGHT</div>
*{
margin: 0;
padding: 0;
}
body {
width: 100%;
position: relative;
}
.left {
width: 100px;
height: 150px;
float: left;
background: rgb(139, 214, 78);
text-align: center;
line-height: 150px;
font-size: 20px;
}
.right {
/* 激活BFC */
overflow: hidden;
height: 300px;
background: rgb(170, 54, 236);
text-align: center;
line-height: 300px;
font-size: 40px;
}
总结：因为BFC内部的元素和外部的元素绝对不会互相影响，因此， 当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。
