1.BFC及其应用
BFC是什么
BFC全称Block Formatting Context，区块格式化上下文，可以将BFC看成元素的一个属性，当元素开启了BFC之后，这个元素就拥有了一块隔离外部区域的独立的渲染区域，区域内部的布局和外部的布局互不干扰。
应用
1.避免外边距重叠
<template>
<div class="t1"></div>
<div class="t1"></div>
</template>
<style scoped>
.t1 {
width: 100px;
height: 100px;
margin: 50px;
background-color: orange;
}
</style>
上面代码同时给2个div盒子加了margin: 50px，但是呈现的效果是margin重叠了，2个盒子上下距离就是50px，并不是100px，这是正常现象。当我们在t1外面加上一层容器，并在这个容器上开启BFC，这时候距离就会变成100px。
<template>
<div class="container">
<div class="t1"></div>
</div>
<div class="container">
<div class="t1"></div>
</div>
</template>
<style scoped lang="less">
.container {
overflow: hidden;
.t1 {
width: 100px;
height: 100px;
margin: 50px;
background-color: orange;
}
}
</style>
2.清除浮动（解决父元素高度塌陷问题）
<template>
<div class="container2">
<div class="t2"></div>
</div>
</template>
<style scoped lang="less">
.container2 {
border: 1px solid #000;
overflow: hidden; // 此处开启BFC解决了高度塌陷问题
.t2 {
width: 100px;
height: 100px;
background-color: yellow;
float: left;
}
}
</style>
3.阻止元素被浮动元素覆盖
<template>
<div class="t3"></div>
<div class="t4"></div>
</template>
<style scoped lang="less">
.t3 {
width: 50px;
height: 50px;
background-color: red;
float: left;
}
.t4 {
width: 100px;
height: 100px;
background-color: blueviolet;
overflow: hidden; // 此处开启BFC解决了元素被覆盖的问题
}
</style>
开启BFC的常用方法
- 浮动元素（float属性不为none）
- 绝对定位元素（position为absolute或fixed）
- 行内块元素（display: inline-block）
- overflow值不为 visible 或 clip 的块级元素
- 弹性元素（display: flex 或 inline-flex）
- 网格元素（display: grid 或 inline-grid）
2.Flex布局中容易忽略的点
- 行内元素也可以使用flex布局 display: inline-flex;
- flex-flow 是 flex-direction 和 flex-wrap 的简写形式，默认值 row nowrap
- align-content（容器属性） 定义了多根轴线的对齐方式，如果项目只有一根轴线，该属性不起作用
- flex属性是flex-grow, flex-shrink, flex-basis的简写，默认为 0 1 auto。后两个属性可选，该属性有3个快捷值：
auto（1 1 auto 根据内容自然大小进行初始布局，然后再根据容器的剩余空间进行调整的情况）
1（1 1 0% 项目可以在容器中平等地分享可用空间，完全依赖容器的剩余空间进行布局的情况）
none（0 0 auto） - align-self（项目属性）允许单个项目与其他项目有不一样的对齐方式，可覆盖align-items属性，默认值为auto，表示继承父元素的align-items属性。可取值（auto flex-start flex-end center baseline stretch）
3.定位
- 相对定位占据正常的文档流，而绝对定位脱离文档流
- 绝对定位的元素相对于它的包含元素来定位，如果所有的包含元素都没有定义position属性，默认都为static，则绝对定位元素会被放在html元素的外面，并且根据浏览器视口来定位，如果它的包含元素开启了定位，则相对包含元素定位
- 固定定位相对于浏览器视口来定位
- 粘性定位：相当于是相对定位和固定定位的混合体，定位的元素随页面滚动到某个阈值时固定在某个位置
4.水平居中对齐
水平居中
1.文本
.container {
text-align: center;
}
2.块级元素
.container .item {
width: 500px;
margin: auto;
}
3.定位元素
.container {
position: relative;
height: 100px;
}
.container .item {
width: 300px;
height: 100px;
position: absolute;
left: 50%;
margin-left: -150px;
}
垂直居中
1.文本
.container {
text-align: center;
line-height: 200px;
height: 200px;
}
2.块级元素
.container {
position: relative;
}
.container .item {
width: 300px;
height: 100px;
position: absolute;
left: 50%;
margin-left: -150px;
top: 50%;
margin-top: -50px;
}
.container {
position: relative;
}
.container .item {
width: 200px;
height: 80px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%)
}
.container {
position: relative;
}
.container .item {
width: 100px;
height: 50px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
