一. 什么是标准文档流
文本流其实就是文档的读取和输出顺序，也就是我们通常看到的由左到右、由上而下的读取和输出形式，在网页中每个元素都是按照这个顺序进行排序和显示的，而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>
二. 元素间转换
使用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; 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>
<!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>
四. 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>