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{
background-color: red;
width: 100px;
}
.box2{
background-color:saddlebrown;
width: 100px;
}
span{
background-color: seagreen;
}
</style>
</head>
<body>
<!-- 文档流
网页是一个多层的结构，一层摞着一层，通过css可以为每一层设置样式
用户智能看到最上一层
这些曾中，最下面一层是文档流，文档流是网页的基础 我们所创建的元素都是在文档流
中进行排列
元素只有两个状态：在文档流中\不在文档流中
元素在文档流中有什么特点：
块元素（无论宽度总会独占一行，默认宽度是父元素的全部-body则是整行，默认高度被内容撑开）
行内元素在页面中从左向右排列，如果一行中不能容纳，则会换到第二行自左向右排列，行内元素的默认高度和宽度都是被内容撑开
-->
<div class="box1">div1</div>
<div class="box2">div2</div>
<span>我是span</span>
<span>我是span</span>
<span>我是span</span>
<span>我是span</span>
<span>我是span</span>
<span>我是span</span>
<span>我是span</span>
<span>我是span</span>
<span>我是span</span>
<span>我是span</span>
</body>
</html>
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>
.box1{
/* width和height用来设置内容区（content）的宽度和高度 */
width: 300px;
height: 200px;
background-color: rgb(121, 177, 145);
/* 边框（border）里面属于盒子边缘，里面属于内部，外面属于外部，也会影响盒子的大小
设置边框至少要设置三个样式
border-width边框宽度 上下左右都有边框，只填一个就是默认四个都是该值，写四个是顺时针
写四个：上 右 下 左
写三个：上 左右 下
写两个：上下 左右
写一个：上下左右
当然，你可以这样写：border-xxx-width用来单独指定某一个边，如border-top-width
border-color边框颜色 四个边的颜色，规则和宽度一样
border-style边框样式
solid实线
dotted点状虚线
dashed虚线
double双线
我们往往可以使用border简写属性 如： border solid 10px orange
也可以border-xxx指定如border-top
*/
border-width: 10px 20px 30px 40px;
border-color:orange red yellow green;
border-style: solid;
}
</style>
</head>
<body>
<!-- 盒子模型：CSS将页面中所有的元素都设置为了一个矩形的盒子
将元素设置为矩形盒子后，对页面的布局就变成了把不同的盒子放到不同的位置
每一个盒子都有几个部分组成
盒子由里到外：
内容区（content）
内边距(padding) 盒子里面的东西不会塞满盒子，要有一些空隙（泡沫纸）
边框（border）
外边距（margin）决定盒子的位置
-->
<div class="box1"></div>
</body>
</html>
