1、文档流
内联元素从左往右流动；块级元素从上往下流动，每个块级元素另起一行。
块级元素的高度由其内部的文档流元素的高度总和决定
2、套路
1.中文两端对齐（text-align: justify;）
<div>
<span>姓名</span><br>
<span>联系方式</span>
</div>
<style>
span{
display:inline-block;
4em;
text-align: justify;
overflow: hidden;
height:20px;
}
span::after{
content:'';
display: inline-block;
100%;
}
</style>
2、打断单词换行（word-break:break-all;）
3、float横向布局
<div class="clearfix parent">
<span class="child">你是</span>
<span class="child">谁</span>
</div>
<style>
.clearfix::after{
content='';
display: block;
clear: both;
}
.child{
float:left;
}
</style>
4、文字溢出
/*一行文本溢出省略号显示*/
<div>
1 2 3 4 5 6 7 8 9 0
1 2 3 4 5 6 7 8 9 0
1 2 3 4 5 6 7 8 9 0
1 2 3 4 5 6 7 8 9 0
1 2 3 4 5 6 7 8 9 0
1 2 3 4 5 6 7 8 9 0
</div>
<style>
div{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
/*多行文本溢出省略号显示*/
<div>
1 2 3 4 5 6 7 8 9 0
1 2 3 4 5 6 7 8 9 0
1 2 3 4 5 6 7 8 9 0
1 2 3 4 5 6 7 8 9 0
1 2 3 4 5 6 7 8 9 0
1 2 3 4 5 6 7 8 9 0
</div>
<style>
div{
display:-webkit-box;
-webkit-line-clamp: 2; /*设置多行显示*/
-webkit-box-orient:vertical;
overflow: hidden;
}
</style>
5、文字居中
<div>
1 2 3 4 5 6 7 8 9 0
1 2 3 4 5 6 7 8 9 0
1 2 3 4 5 6 7 8 9 0
1 2 3 4 5 6 7 8 9 0
1 2 3 4 5 6 7 8 9 0
1 2 3 4 5 6 7 8 9 0
</div>
<style>
div{
padding:10px 110px; /*上下相同padding——垂直居中，左右相同水平居中*/
text-align: center; /*文本水平居中*/
line-height:20px; /*设置行高，配置需要的高度*/
}
</style>
6、去除margin相关Bug（在父元素上加boder或者padding）
7、全屏居中
<div class="dad">
<div class="son">
1 2 3 4 5 6 7 8 9 0
1 2 3 4 5 6 7 8 9 0
1 2 3 4 5 6 7 8 9 0
1 2 3 4 5 6 7 8 9 0
1 2 3 4 5 6 7 8 9 0
</div>
</div>
<style>
.son{
margin:0 auto;
padding:0;
140px;
}
.dad{
height:100vh;
box-sizing:border-box;
display: flex;
justify-content:center;
align-items:center;
}
</style>
8、padding-top:100%;设置长宽相等