本文已参与「新人创作礼」活动，一起开启掘金创作之路
一、文档流
网页是一个多层的结构,设置样式样式，也是一层一层的设置，最终我们看到的最上面的一层。
文档流是网页最底层
我们创建的元素默认情况下，都在文档流中
元素分为两种状态：在文档流中，脱离文档流
元素在文档流中的特点：
块元素
1:会独占一行
2:块元素的宽度默认是父元素的100%
3:块元素的高度默认是被内容撑开的
内联元素（行内元素）
1:不会独占一行
2:宽度高度默认都是被内容撑开的，不能自己定义宽
元素脱离文档流后，就不再区分块元素，行内元素了，也就不具有以上的特点了。
元素就更类似行内块元素，可设宽高，也不会独占一
元素脱离文档流的方法：
设置浮动，设置有关定位，开启弹性属性等等
二、盒子模型
1.盒子模型的基本内容：
内容区 content
内边距 padding
边框 border
外边距 margin
影响盒模型的大小：内容区、内边距、边框，与外边距无关。
1:内容区(content) 元素中所有的子元素和文本内容都在内容区中排列
width 设置内容的宽度
height 设置内容的高度
如何创建一个盒子：
<style>
#box{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="box">
</div>
</body>
展示效果：
![]( "点击并拖拽以移动")
编辑
2.盒子模型的外边距
2.边框（border）元素设置边框
边框属于盒子边缘，边框里面属于盒子内部，出了边框都是盒子的外部
设置边框必须指定三个样式 宽度 样式 颜色。
1:border-width 默认值一般是3px
使用border-width可以分别指定四个边框的宽度
4个值 上 右 下 左 border-width: 10px 20px 30px 40px;
3个值 上 左右 下 border-width: 10px 20px 30px;
2个值 上下 左右 border-width: 10px 40px;
1个值 上下左右 border-width: 10px ;
编辑
![]( "点击并拖拽以移动")
编辑
编辑
编辑
除了border-width，CSS中还提供了四个border-xxx-width
xxx的值可能是top right bottom left
专门用来设置指定边的宽度
2:border-color 设置边框的颜色 默认值是黑色
和宽度一样，color也提供四个方向的样式，可以分别指定颜色
border-xxx-color
3:border-style
* 设置边框的样式
* 可选值：
* none，默认值，没有边框
* solid 实线
double 双线
dashed [dæʃt] 虚线
* dotted ['dɔtid] 点状边框
* style也可以分别指定四个边的边框样式，规则和width一致，
* 同时它也提供border-xxx-style四个样式，来分别设置四个边
* border
* - 边框的简写样式，通过它可以同时设置四个边框的样式，宽度，颜色
* - 而且没有任何的顺序要求
* - border一指定就是同时指定四个边不能分别指定
*
* border-top border-right border-bottom border-left
* 可以单独设置四个边的样式，规则和border一样，只不过它只对一个边生效
例如：
<style>
#box {
width: 200px;
height: 200px;
background-color: red;
border-top: 10px green solid;
}
</style>
</head>
<body>
<div id="box">
</div>
</body>
</html>
![]( "点击并拖拽以移动")
编辑
一个盒子实线书写代码：
<style>
#box {
width: 200px;
height: 200px;
background-color: red;
border-color: green;
border-width: 10px;
border-style: solid;
}
</style>
</head>
<body>
<div id="box">
</div>
</body>
\
