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