HTML&CSS基础-文档流
作者：尹正杰
版权声明：原创作品，谢绝转载！否则将追究法律责任。
一.HTML源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文档流</title>
</head>
<body> <!--
文档:
指定的就是网页，每一个页面都是一个文档。 文档流:
文档流处在网页的最底层，它表示的是一个页面中的位置，我们所创建的元素默认都处在文档流中。
元素在文档流中的特点:
块元素：
1>.块元素在文档流中会独占一行，块元素会自上向下排列;
2>.块元素在文档流中默认宽度是父元素的100%,宽度值是auto,当元素的宽度值为auto时，此时指定内边距不会影响可见框的大小，而是会自动修改宽度，以适应内边距;
3>.块元素在文档流中高度默认被内容撑开;
内联元素:
1>.内联元素在文档流中只占自身的大小，会默认从左向右排列，如果一行中不足以容纳所有的内联元素，则换到下一行，继续自左向右;
2>.内联元素的高度和宽度默认都被内容撑开;
-->
<style type="text/css">
.box1{
background-color: red;
padding-left: 500px;
font-size: 100px;
} .box2{
width: 100px;
height: 100px;
background-color: yellow;
} span{
background-color: deeppink;
font-size: 32px;
} </style>
</body>
<div class="box1">我是box1的div元素</div>
<div class="box2"></div>
<span>我是一个span标签</span>
<span>我是一个span标签</span>
<span>我是一个span标签</span>
<span>我是一个span标签</span>
<span>我是一个span标签</span>
</html>
二.浏览器打开以上代码渲染结果
