一. 什么是标准文档流
文本流其实就是文档的读取和输出顺序，也就是我们通常看到的由左到右、由上而下的读取和输出形式，在网页中每个元素都是按照这个顺序进行排序和显示的，而float和position两个属性可以将元素从文本流脱离出来显示。
标准文档流的围观现象有3种:
1.空白折叠现象:多个空格或者换行会被折叠成一个.
2.高矮不齐,底边对齐.
3.自动换行,一行写不完,自动换行.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标准文档流</title>
<style type="text/css">
span{
font-size: 50px;
}
</style> </head>
<body>
<!-- 文档流指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。 -->
<!-- 标准文档流的微观现象?
1.空白折叠现象:多个空格或者换行会被折叠成一个.
2.高矮不齐,底边对齐.
3.自动换行,一行写不完,自动换行. -->
<div>
你好 你好 你好
</div>
<div>
你好好你好好你好好<span>姚明</span>好你好好你好好你好好你好好
</div>
</body>
</html>
3种微观现象
二. 元素间转换
使用display:block,inline,inline-block
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>块级元素和行内元素转换</title>
<style type="text/css">
/*块状元素转换成行内元素*/
.box1{
display: inline;
width: 200px;
height: 30px;
border: 3px solid red;
}
.box2{
width: 200px;
height: 30px;
font-size: 30px;
border: 3px solid green;
margin-top: 10px;
}
/*行内元素转换成块级元素*/
span{
background-color: green;
width:50px;
margin-top:10px;
display: block;
/*隐藏标签,彻底的隐藏标签,原来标签的位置会被后面的内容覆盖掉,不占用原来的位置*/
/*display: none;*/
/*只隐藏标签内容,保留标签的区域大小,占用原来的位置.*/
visibility: hidden;
}
/*块状元素转换成行内块元素*/
/*.box3{
display: inline-block;
margin-top: 10px;
width: 200px;
height: 30px;
border: 3px solid red;
}*/
</style>
</head>
<body>
<div class="box1">内容1</div>
<div class="box1">内容1</div>
<div class="box2">内容2</div>
<div class="box3">内容3</div>
<div class="box3">内容3</div>
<div class="box3">内容3</div>
<span>中国</span>
<span>中国</span>
<img src="./1.png" alt="">
<img src="./1.png" alt="">
</body>
</html>
块级元素和行内元素转换
三. 浮动(float)
浮动是css布局中使用最多的属性!
定义:使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。
浮动的实际用途，可设置文字环绕或使元素宽度由内容填充（类似Inline-block)。使用浮动需要注意的是如果浮动的元素高度比父级容器还高，那么需要设置父级容器的overflow属性为auto,使其自动撑满。
浮动的4个特点:
1.浮动元素的脱标
2.浮动元素的互相贴靠
3.浮动元素的"字围"效果
4.紧凑效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动介绍</title>
<style type="text/css">
*{
border: 0;
margin: 0;
}
.box1{
width: 200px;
height: 200px;
background-color: red;
float: left;
margin-left: 100px;
}
.box2{
width: 200px;
height: 200px;
background-color: green;
float: right;
margin-right: 100px;
}
</style>
</head>
<body>
<!--浮动是布局中用的最多的一个属性.
浮动效果:两个元素并排了,且可以设置宽高.
浮动的三个特点:
1.浮动元素的脱标
2.浮动元素的互相贴靠
3.浮动元素的"字围"效果
4.紧凑效果
-->
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
浮动 小例子
-
浮动布局：
- float:left/right；
- 特点：
- 元素浮动之后不占据原来的位置（脱标）；
- 浮动的盒子在一行上显示；
- 行内元素浮动之后转换为行内块元素（不推荐使用，转行内块元素最好使用
display:inline-block）；
- 浮动的作用：
- 文本绕图（文字环绕图片）：文字和浮动元素没有层叠关系，文字不参与浮动；
- 制作导航；
- 网页布局；
清除浮动
- 清除浮动不是不使用浮动，而是清除浮动所产生的不良影响（当父盒子没有定义高度，嵌套的盒子浮动之后，下边的元素发生位置错误），清除浮动使用关键字
clear:left/right/both;,工作中使用的最多的是clear:both;； - 清除浮动方法：
- 额外标签法(内墙法)：在最后一个浮动元素后添加标签：
<div style="clear:both"></div>,但是工作中一般不使用这样的方法； - 给父级元素使用
overflow:hidden（bfc），有弊端：当内容出了盒子，就会被裁剪掉；详细介绍:W3C之overflow - 伪元素清除浮动，使用最多，最完美：
- 给父元素设置高度(一般不使用)
- 额外标签法(内墙法)：在最后一个浮动元素后添加标签：
清除浮动例子:其中overflow和after经常用.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内墙法</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
/*父盒子不设置高度.和父盒子统计的盒子会顶边显示.*/
div{
width: 400px;
/*给父盒子设置高度,即可解决一些浮动带来的问题.*/
/*height: 40px;*/
}
div ul li{
float: left;
height: 40px;
width: 100px;
background-color: green;
}
.box{
width: 500px;
height: 100px;
background-color: pink;
}
.clear{
clear: both;
}
</style>
</head>
<body>
<div>
<ul>
<li>python</li>
<li>web</li>
<li>linux</li>
<!-- 给浮动元素最后面添加一个空的div并且该div不浮动.然后设置css属性clear:both,就可以清除别的标签对本身的浮动影响.此方法又名 内墙法.
缺点:每个清除浮动的标签都要添加一个空的div,代码太冗余了. -->
<div class="clear"></div>
</ul> </div> <div class="box"> </div>
</body>
</html>
内墙法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>overflow方法</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
/*父盒子不设置高度.和父盒子统计的盒子会顶边显示.*/
.box{
width: 400px;
/*overflow:hidden方法*/
overflow: hidden;
/*给父盒子设置高度,即可解决一些浮动带来的问题.*/
/*height: 40px;*/
}
.box ul li{
float: left;
height: 40px;
width: 100px;
background-color: green;
}
.box2{
width: 500px;
height: 100px;
background-color: pink;
} </style>
</head>
<body>
<div class="box">
<ul>
<li>python</li>
<li>web</li>
<li>linux</li> </ul> </div> <div class="box2"> </div>
</body>
</html>
overflow方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪元素法</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
/*父盒子不设置高度.和父盒子统计的盒子会顶边显示.*/
div{
width: 400px;
}
div ul li{
float: left;
height: 40px;
width: 100px;
background-color: green;
}
.box{
width: 500px;
height: 100px;
background-color: pink;
}
.clearfix:after{
/*下面3句是after方法清除浮动必须写的*/
content: ".";
clear: both;
display: block;
/*content有内容"."时,也可以写成5句*/
height: 0;
visibility: hidden;
} </style>
</head>
<body>
<div class="clearfix">
<ul>
<li>python</li>
<li>web</li>
<li>linux</li> </ul> </div> <div class="box"> </div>
</body>
</html>
伪元素after清除法
四. margin塌陷
什么是margin塌陷?
当2个同级盒子,设置垂直方向上的margin,以较大的那个为准.这就称为塌陷.
注意:浮动的同级盒子不塌陷.
注意:同级盒子,左右不塌陷.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>margin的塌陷</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box1{
width: 300px;
height: 200px;
margin-bottom: 20px;
background-color: red;
}
/* box1和box2形成了塌陷,此时他俩的上下间距是50px */
.box2{
width: 400px;
height: 200px;
margin-top: 50px;
background-color: green;
}
span{
background-color: greenyellow;
}
span.a{
margin-right: 20px;
}
span.b{
margin-left: 20px;
}
</style>
</head>
<body>
<div class="father">
<!-- 当2个同级盒子,设置垂直方向上的margin,以较大的那个为准.这就称为塌陷.
注意:浮动的同级盒子不塌陷.
注意:同级盒子,左右不塌陷.
-->
<div class="box1"></div>
<div class="box2"></div> <span class="a">内容</span>
<span class="b">内容</span>
</div>
</body>
</html>
margin塌陷例子