标准文档流
标准文档流的特性
(1)空白折叠现象:
无论多少个空格,换行,tab都会折叠为一个空格
(2)高矮不齐,底边对齐
(3)自动换行,一行写不满,换行写
行内元素和块级元素
从HTML的角度来讲,标签分为:
文本级标签:p,span,a,b,i, u,em
容器级标签:div,h系列,li,dt,dd
从CSS角度来讲,
行内元素:除了p之外,所有的文本级标签,都是行内元素,p是个文本级,但是是个块级元素
块级元素:所有的容器标签都是块级元素,还有p标签
行内元素和块级元素的相互转换
借助display属性将块级元素和行内元素进行相互转换。
块级元素转行内元素
display: inline; (给一个块级元素比如div设置)
那么这个标签将立即变为行内元素,此时它和一个span无异,inline就是行内,也就是话说,这个div不能设置宽度高度,但可以和别人并排了
行内元素转块级元素
给一个行内元素比如span设置
display: block;
它此时变成一个块级元素,也就是说,这个span可以设置宽度和高度,这个span必须霸占一行,别人无法和它并排,如果不设置宽度将撑满父亲
标准流里面的限制非常多,导致很多页面效果无法实现,如果我们现在就要并排,并且就要设置宽高,那该怎么办呢,办法是:移民!脱离标准流
css中有三种手段使一个元素脱离标准文档流
(1)浮动
(2)绝对定位
(3)固定定位
浮动的性质
现在有两个div,分别设置宽高
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width: 200px;
height: 300px;
background-color: yellowgreen;
}
.box2{
width: 300px;
height: 300px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
此时,如果给这两个div增加一个浮动属性,比如float:left
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
float: left;
width: 200px;
height: 300px;
background-color: yellowgreen;
}
.box2{
float: left;
width: 300px;
height: 300px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
此时两个元素并排了,并且两个元素都能够设置宽度和高度了
性质1:浮动的元素脱标
脱标即脱离标准
证明1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
float: left;
width: 200px;
height: 300px;
background-color: yellowgreen;
}
.box2{
width: 300px;
height: 300px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
上图中,在默认情况下,两个div标签是上下进行排列的。现在由于float属性让第一个div标签出现了浮动,于是这个标签在另一个层面进行排列,而第二个div孩子自己的层面遵从标准来进行排列
证明2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span{
float: left;
width: 200px;
height: 200px;
background-color: yellowgreen;
}
</style>
</head>
<body>
<span>我爱学习</span>
</body>
</html>
代码中,span标签在标签流中,是不能设置宽高的(行内元素),但是,一旦设置为浮动之后,即使不转变成块级元素,也能设置宽高了
so
所有标签,浮动之后,已经不区分行内,块级了
性质2:浮动的元素相互贴靠
不会做动漫效果,可以找个视频看看
性质3:浮动的元素有“字围”效果
我们让div浮动,p不浮动
代码实现一下,就可以在浏览器中发现,div挡在了p,但是不会挡在p中的文字,形成
“字围”效果
so
标准流中的文字不会被浮动的盒子挡住
性质4:收缩
收缩:一个浮动的元素,如果没有设置width,那么将自动收缩为内容的宽度(比较像行内元素)
浮动的清除
这里的清除是清除浮动与浮动之间的影响
方法1:给浮动元素的祖先元素加高度
如果一个元素要浮动,那么它的祖先元素一定要有高度
有高度的盒子才能关住浮动
只要浮动在一个有高度的盒子中,那么这个浮动就不会影响后面的浮动元素,所以就清除了浮动带来的影响了。
方法2:clear:both
clear就是清除,both指的是左浮动,右浮动都有清除。所以clear:both的意思就是不允许左侧和右侧有浮动对象
但是非常严重的一点是,它所在的标签,margin属性都失效了
方法3:隔墙法
在两个div中间加一个新的div隔开
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0px;
}
li{
float:left;
width: 150px;
height: 30px;
background-color: pink;
}
.cl{
clear:both;
}
.h16{
height: 16px;
}
</style>
</head>
<body>
<div class="box1">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div class="cl h16"></div>
<div class="box2">
<ul>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</div>
</body>
</html>
内墙法:
公式:两个p都浮动,所以父亲div不能被撑出去,如果在家修一堵墙,就能够让div被儿子撑出高度,即:此时div可以自适应内容
<div>
<p></p>
<p></p>
<div class="cl"></div>
</div>
一个父亲是不能被浮动的儿子撑出高度的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
background-color: green;
}
p{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>
(1)我们在一个div里放一个有宽高的p,代码如上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
background-color: green;
}
p{
float: left;
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>
(2)可如果在此基础上,给p设置浮动却发现父亲div没有高度了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
background-color: green;
}
p{
float:left;
width: 100px;
height: 100px;
background-color: red;
}
.cl{
clear:both;
}
</style>
</head>
<body>
<div>
<p></p>
<div class=".cl"></div>
</div>
</body>
</html>
(3)此时,我们可以在div里面放一个div(作为内墙),就可以让父亲div恢复高度
内墙法的优势在于:内墙法可以给它所在的家撑出宽度(让box1有高),即:box1可以自适应内容。
方法4:overflow:hidden
意思为所有溢出边框的内容,都要隐藏掉
但是可以给父亲加上overflow:hidden,那么父亲就能被儿子撑出高了,这是一个偏方
学习笔记,参考github大佬的文章,链接在主页文章。