CSS
CSS
盒模型
页面渲染时，DOM元素所采用的的布局模型。
content-box（W3C标准盒模型）
border-box（IE盒模型）
BFC（块级格式化上下文）
BFC就是页面上一个独立的容器，容器里面的子元素不会影响到外面的元素。
BFC触发方式
- 根元素，即HTML标签
- 浮动元素：float值为
left、right overflow值不为visible，为auto、scroll、hiddendisplay值为inline-block、table-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid- 定位元素：
position值为absolute、fixed
规则
- 内部的Box会在垂直方向上一个接一个的放置。
- 内部的Box垂直方向上的距离由margin决定。（属于同一个BFC的两个相邻Box的margin会发生重叠，不同BFC不会发生重叠。）
- 每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（说明BFC中子元素不会超出它的包含块，而position为absolute的元素可以超出它的包含块边界。）
- BFC的区域不会与float的元素区域重叠。
- 计算BFC的高度时，浮动子元素也参与计算。
应用
- 阻止元素被浮动元素覆盖
- 可以包含浮动元素-清除内部浮动
- 阻止相邻元素的margin重叠
创建BFC的新方式
display: flow-root
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BFC</title>
<style>
.wrapper {
display: flow-root;
}
.outer {
border: 5px dashed #a1a1a1;
padding: 10px;
width: 350px;
margin: 50px;
}
.float {
float: left;
width: 150px;
border: 4px solid yellow;
padding: 10px;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="outer">
<div class="float">I am a floated element.</div>
<div style="display: flow-root;">I am text inside the outer div.I am text inside the outer div.I am text inside the outer div.</div>
</div>
<div class="wrapper">
<div class="outer">
<div class="float">I am a floated element.</div>
I am text inside the outer div.I am text inside the outer div.I am text inside the outer div.
</div>
</div>
</body>
</html>
居中布局
水平居中
行内元素：
text-align: center块级元素：
margin: 0 autoabsolute + transformflex + justify-centent: center垂直居中
line-height: heightabsolute + transformflex + align-items: centertable水平垂直居中
absolute + transformflex + justify-content + align-items