文档流
网页是一个多层的结构，设置样式也是一层一层的设置，最终我们看到的最上面的一层。
文档流是网页最底层
我们创建的元素默认情况下，都在文档流中
元素分为两种状态：在文档流中，脱离文档流
元素在文档流中的特点
块元素
1:会独占一行
2:块元素的宽度默认是父元素的100%
3:块元素的高度默认是被内容撑开的
内联元素（行内元素）
1:不会独占一行
2:宽度高度默认都是被内容撑开的，不能自己定义宽高
行内块元素
1、不会独占一行，可以设置宽高
一旦元素通过某种方式，例如浮动、绝对定位等等，脱离文档流，则原来在文档流中划分元素类型，特点都不复存在
盒模型
css盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框、边距、填充和实际内容。盒子模型允许我们在其他元素和周围元素边框之间的空间放置元素。
margin(外边距)-清除边框外的区域，外边距是透明的
Border(边框)-围绕在内边距和内容外的边框
padding(内边距)-清除内容周围的区域，内边距是透明的
Content(内容)-盒子的内容，显示文本和图像
影响盒子大小的因素：内容区，内边距，边框会影响盒子的大小，外边距不会影响
- 所谓盒子模型
- 就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器
- 盒子模型有元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成。
- 盒子里面的文字和图片的等元素是内容区域
- 盒子的厚度成为盒子的边框
- 盒子内容与边框的距离是内边距（类似单元格的cellpadding）
- 盒子与盒子之间的距离是外边距（类似单元格的cellspacing）
1、盒子边框（Box Boder）
语法：
border ： border-width || border-style || border-color
| 属性 | 作用 |
|---|---|
| border-width | 定义边框粗细，单位是px（与电脑分辨率相关） |
| border-style | 边框的样式 |
| bortder-color | 边框颜色 |
| 上边框 | 下边框 | 左边框 | 右边框 |
|---|---|---|---|
| borber-top-style:样式 | borber-bottom-style:样式 | borber-left-style:样式 | borber-right-style:样式 |
| borber-top-width:宽度 | borber-bottom-width:宽度 | borber-left-width:宽度 | borber-right-width:宽度 |
| borber-top-color:颜色 | borber-bottom-color:颜色 | borber-left-color:颜色 | borber-right-color:颜色 |
| borber-top:宽度,样式,颜色 | borber-bottom:宽度,样式,颜色 | borber-left:宽度,样式,颜色 | borber-right:宽度,样式,颜色 |
- 边框的样式
none：没有边框即忽略所有边框的宽度（默认值）
solid： 边框为单实线
dashed： 边框为虚线
dotted : 边框为点线
.box {
width: 200px;
height: 200px;
background-color: blueviolet;
/* 实线边框 */
/* border-style: solid; */
/* 虚线边框 */
/* border-style: dashed; */
/* 点线边框 */
/* border-style: dotted; */
/* 边框宽度 */
/* border-width: 10px; */
/* 边框颜色 */
/* border-color: black; */
/* 边框圆角 */
/* border-radius: 10px; */
/* 取消四个边框 */
/* border: none; */
/* 上边框 */
/* border-top: 10px solid red; */
/* 左边框 */
/* border-left: 10px solid red; */
/* 右边框 */
/* border-right: 10px solid red; */
/* 下边框 */
/* border-bottom: 10px solid red; */
/* 简单写法 */
/* border: 10px solid red; */
}
2、表格的细线边框
通过CSS属性：
table{border-collapse：collapse；}（表示相邻边框合并在一起）
3、内边距（padding）
| 属性 | 作用 |
|---|---|
| padding-left | 左内边距 |
| padding-right | 右内边距 |
| padding-top | 上内边距 |
| padding-bottom | 下内边距 |
注意
在改内边距时，盒子会变大
/* 上下左右都是20像素内边距 */
/* padding: 20px; */
/* 上下是10，左右是20的内边距 */
/* padding: 10px 20px; */
/* 上10，左右20，下30 */
/* padding: 10px 20px 30px; */
/* 顺时针 10 20 30 40 */
padding: 10px 20px 30px 40px;
4、内盒尺寸计算（元素实际大小）
盒子的实际大小=内容的宽度和高度+内边距+边框
/* 盒子的实际大小=内容的宽度和高度+内边距+边框 */
/* 内边距是一定要给的，只能改变内容宽度 让他减去多出来的内边距 */
特殊情况：如果没有给一个盒子指定宽度，此时给这个盒子指定padding，则不会撑开盒子。
5、外边距（margin）
块级盒子实现水平居中
- 盒子必须指定宽度
- 左右设置auto
写法：
/* 让块级盒子水平居中对齐 */
/* margin-left: auto;
margin-right: auto; */
/* margin: 0 auto; */
margin: auto;
/* 让块级盒子垂直居中对齐 */
/* margin-top: auto;
margin-bottom: auto; */
6、文字居中和盒子居中区别
1、文字水平居中是text-align：center，而且还可以让行内元素和行内块元素居中对齐
2、块级盒子水平居中 左右margin改为auto
text-align: center;
/* 文字 行内元素 行内块元素水平居中 */
margin: 10px auto;
/* 块级盒子水平居中 左右margin 改为auto 就可以了 上下margin都可以 */
7、插入图片和背景图片的区别
1、插入图片 应用于如产品展示类 ，移动位置只能靠盒模型padding margin
2、背景图片一般用于小图标背景 超大背景图片 只能通过background-position
img {
width: 80px;/*插入图片更改大小 width个height*/
height: 100px;
margin-top: none;/*插入图片更改位置 可以用margin 或padding 盒子模型*/
margin-left: none;/* 插入当图片也是一个模型*/
}
div {
width: 400px;
height: 400px;
border: 1px solid purple;
background: burlywood;
background-position: 30px 50px;/*背景图片更改位置*/
}
8、清除元素的默认内外边距
代码（以后写CSS第一句代码）：
* {
padding: 0;/*清除内边距*/
margin: 0;/*清除外边距*/
}
9、外边距合并
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并
-
相邻块元素垂直外边距合并
当上下相邻的两个块元素相遇时，如果哦上面的元素有下外边距margin-bottom
下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom和margin-top之和
取两个值得较大者这种现象被称相邻块元素垂直外边距的合并（也称外边距塌陷）
解决方案：尽量只给一个盒子添加margin值
-
嵌套块元素垂直外边距的合并（塌陷）
对于两个嵌套关系的块元素，如果父元素没有上内边距及边框
父元素的上外边距会与子元素的上外边距发生合并
合并后的外边距为两者中的较大者
解决方案：
1、可以为父元素定义上边框
2、可以为父元素定义上内边框
3、可以为父元素添加overflower：hidden
.fathere {
width: 500px;
height: 500px;
background-color: pink;
/* 嵌套关系 垂直外边距合并 解决方案 */
/* 1.父亲定义上边框 transparent 透明 */
/* border-top: 1px solid transparent; */
/* 2.可以给父亲指定一个上padding值 */
/* padding-top: 1px; */
/* 3.给父亲添加overflower：hidden */
overflow: hidden;
}
.son {
width: 200px;
height: 200px;
background-color: purple;
margin-top: 100px;
}
还有其他方法，如浮动，固定，绝对定位
10、盒子模型布局稳定性
根据稳定性来分，按照优先使用 宽度 其次使用内边距 再次使用 外边距
width>padding>margin
原因：
margin会有外边距合并还有le6下面margin 加倍的bug，所以最后使用
padding 会影响盒子大小，需要进行加减计算，其次使用
width没有问题，经常使用宽度剩余法 高度剩余法来做