<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box1{
background-color: #BBFFAA;
padding-left: 200px;
}
.box2{
width: 6.25rem;
height: 6.25rem;
background-color: #FF0000;
}
span{
background-color: yellowgreen;
}
.box3{
height: 500px;
}
</style>
</head>
<body>
<!--
文档流
文档流处在网页最底层，表示的是一个页面中的位置
我们所创建的元素都默认处在文档流中
元素在文档流中特点
块元素
- 在文档流中独占一行，自上向下排列
- 块元素在文档流中默认宽度是父元素的100%
- 块元素在文档流中的高度默认被内容撑开
内联元素
- 在文档流中只占自身大小，从左向右排列
如果一个不足以容纳所有内联元素，则换到下一行
继续自左向右
- 内联元素的宽高在文档流中默认都被内容撑开
-->
<!--
当元素的高度或宽度为auto时，此时指定内边距不会影响可见框的大小
而是会自动修稿宽高，以适应内边距
-->
<div class="box1">
a
<div class="box3"></div>
</div>
<div class="box2"></div>
<span>我是span</span>
<span>我是span</span>
<span>我是span</span>
</body>
</html>
元素在文档流中特点
块元素
文档流中独占一行，自上向下排列
块元素在文档流中默认宽度是父元素100%
块元素在文档流中的高度默认被内容撑开
内联元素
在文档流中只占自身大小，从左向右排列
如果一行不足以容纳所有内联元素，则换到下一行几句自左向右排列
内联元素的宽高在文档流中默认都被内容撑开