文档流：文档内元素的流动方向
-
内联元素从左往右
-
块级元素从上往下
block，inline，inline-block 元素的区别：
div高度
div高度由其内部文档流的高度总和决定
- 仅一行 内联元素
<style>
div{
border:1px solid red;
font-size:20px;
}
</style>
<div>
1
</div>
设置字体高度为20px，使用默认字体时，div高度为28.67
设置
font-family:Arial； div高度为24.67
设置
line-height:20px；font-size:60px; div高度为22
- 多行
<div>
<span>1</span><br>
<span>2</span><br>
<span>3</span>
</div>
使用默认字体：
设置
font-family:Arial;
-
inline-block
<div class="box">
<span class="inner">welcome,welcome,welcome</span>
<span class="inner">welcome,welcome,welcome</span>
<span class="inner">welcome,welcome,welcome</span>
</div>
<style>
.box{
border:1px solid green;
text-align:center;
}
.inner{
display:inline-block;
border:1px solid red;
width:220px;
padding:10px;
margin-bottom:10px;
}
</style>
消除缝隙
- 两标签并排
<div class="box">
<span class="inner">welcome,welcome,welcome</span><span class="inner">welcome,welcome,welcome</span>
<span class="inner">welcome,welcome,welcome</span>
</div>
- 使用font-size:0(父元素设置0，子元素自定义）
.box{
border:1px solid green;
text-align:center;
font-size:0;
}
.inner{
display:inline-block;
border:1px solid red;
width:220px;
padding:10px;
margin-bottom:10px;
font-size:16px;
}
- 使用float:left
<style>
.inner{
float:left;
}
.clearfix::after{
content:'';
display:block;
clear:both;
}
</style>
<div class="box clearfix">
-
word-break
<style>
div{
border:1px solid red;
//word-break:break-all;
}
</style>
<div>
aa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
cc
dd
</div>
先要明确一点，不加word-break的时候，就是浏览器默认的时候，如果有一个单词很长，导致一行中剩下的空间已经放不下它时，则浏览器会把这个单词挪到下一行去：
在没有单词内断句的情况，单词太长会溢出了包裹它的容器
使用break-all强制断句
word-break与word-wrap区别
-
Test：实现文字两端对齐
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div{
border: 1px solid red;
font-size: 20px;
}
span{
border: 1px solid green;
display: inline-block;
width: 5em;
text-align: justify;
line-height: 20px;
overflow: hidden;
height: 20px;
}
span::after{
content: '';
display: inline-block;
width: 100%;
border: 1px solid blue;
}
</style>
</head>
<body>
<div>
<span>姓名</span> <br>
<span>联系方式</span>
</div>
</body>
</html>
-
文字垂直居中
实现行高为130px
Tips: 四行每行行高为30px， 30*4 = 120 + 5*2 = 130
-
文字溢出
1. 单行文字溢出
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
//完整css代码
<style>
div{
border:1px solid red;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
</style>
2. 多行溢出
//完整代码
<style>
div{
border:1px solid red;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
</style>
3. margin合并
<div class="dad">
<div class="son">
text
</div>
</div>
<style>
.dad{
outline:1px solid red;
}
.son{
border:1px solid green;
padding:10px;
margin:10px;
}
</style>
解决办法：
- 设置border
.dad{
outline:1px solid green;
border-top:10px solid red;
border-bottom:10px solid black;
}
通过对父元素设置上下border实现对子元素的遮挡，margin正常显示
- 设置padding
.dad{
outline:1px solid red;
padding:1px;
}
- overflow:hidden
.dad{
outline:1px solid red;
overflow:hidden;
}
-
Test：实现div水平垂直居中(不定宽高）
vh/vw
vh: 相对于视窗的高度, 视窗被均分为100单位的vh;
vw: 相对于视窗的宽度, 视窗被均分为100单位的vw;
<style>
body{
margin: 0;
}
.son{
border: 5px solid red;
padding:10px;
}
.dad{
height:100vh;
display: flex;
justify-content: center;
align-items: center;
}
</style>
<div class=dad>
<div class=son>
block block block
</div>
</div>
-
Test：实现一比一的 div
<style>
div{
padding-top:100%;
border:1px solid red;
}
</style>
