这是我参与「第四届青训营 」笔记创作活动的第3天
上节讲到了CSS的一些基础知识，今天我们来进一步的讲解一下CSS的其他内容
一.文档流
文档流（normal flow）
-网页是一个多层结构，一层裸着一层
-通过css可以分别为每一层来设置样式
-作为用户来讲只能看到最顶上的一层
-这些层中，最底下的一层称为文档流，文档流是网页的基础
我们所创建的元素默认都是在文档流中进行排列
-对于我们来说元素主要有两个状态
在文档流中
不再文档流中（脱离文档流）
-元素在文档流中有什么特点：
-块元素
-块元素在页面中独占一行只占本身的大小
-行内元素在页面中左向右水平排列，如果一行之中不能容纳
则元素会换到第二行继续自左向右排列
-行内元素的默认宽度和高度都是被内容撑开
二.盒模型
1.盒模型又叫盒子模型或者框模型
-css将页面的所有元素都设置成了一个矩形的盒子
-在给你元素设置成矩形的盒子后，对页面的布局就变成了不同盒子摆放的位置
-每一个盒子都由以下几个部分组成：
内容区（content）
内边距（padding）
边框（border）
外边距（margin）
2.内容区
元素中所有的子元素和文本内容都在内容区中排列
内容区的大小由width和height两个属性来设置
background-color: #bfa;
width: 200px;
height: 200px;
3.边框
①边框的宽度：border-width
②边框的颜色：border-color
③边框的样式：border-style
border-width：10px；
默认值：一般为三个像素
1.1 border-width可以用来指定四个方向的边框的宽度值的情况
四个值：上，右，下，左
三个值：上，左右，下
两个值：上下，左右
一个值：上下左右
注：除了border-width还有一组 border-xxx-width
xxx可以是 top right bottom、 left
用来单独指定某一个边的宽度
1.2 border-style 指定边框的样式
solid 表示实线
dotted 表示点状虚线
dashed 虚线
double 双线
注：border简写属性，通过属性可以同时设置边框所有的相关样式，并且没有顺序要求
3.内边距（padding）
定义：内容区和边框之间的距离是内边距
一共有四个方向的内边距：
padding-top
padding-right
padding-bottom
padding-left
内边距的设置会影响到盒子的大小
背景颜色会延伸到内边距上
输入：
.box1
{
width: 200px;
height: 200px;
background-color: #bfa;
border: red 10px double;
margin: 0 auto;
padding-top: 100px;
padding-left: 100px;
padding-top: 100px;
padding-bottom: 100px;
}
.inner{
width: 100%;
height: 100%;
background-color: rgb(233, 233, 31);
}
输出：
四.总结
今天主要学习了CSS中的进阶内容盒子模型以及它的一些结构，这也对以后我们写静态网页起着很大的帮助，学习是一个日积月累的过程，相信在自己不断地努力中，自己的能力也会慢慢提升
