文档流(normal flow)
-网页是一个多层的结构,一层摞着一层
-通过css可以分别为每一层来设置样式
-作为用户来讲只能看到最顶上一层
-这些最底下的一层成为文档流-网页的基础
我们所创建的元素默认都是在文档流中进行排列的
对于我们来说元素主要有两个状态
-在文档流中
-不在文档流中(脱离文档流)
元素在文档流中的特点
-块元素
-块元素在页面中独占一行,自上向下垂直排列
-默认宽度为父元素的全部(会把父元素盛满),如果指定了长度就按指定的来
-默认高度会被内容撑开
-行内元素
-行内元素不回独占一行,只占自身的大小,自左向右水平排列
-如果一行中不能容纳所有的行内元素,则会换到第二行继续自左向右(如同书写习惯)
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
background-color: yellow;
width: 100px;
}
.box2{
background-color: yellow;
width: 100px;
}
</style>
</head>
<body>
<div class="box1">我是div1</div>
<div class="box2">我是div2</div>
<span>我是span1</span>
<span>我是span2</span>
<span>我是span3</span>
<span>我是span4</span>
<span>我是span5</span>
</body>
</html>
-行内元素的默认宽度和高度都是被内容撑开