人与人间的信任，就像是纸片，一旦破损，就不会再回到原来的样子，开玩笑我要粘回去！！！
div特点
默认的宽，自动將盒子的宽拉伸到最大宽度
默认高为0，单个盒子不给高是没有任何效果 ==> 可以由子元素把父元素高度撑起来起来，因为始终都会包裹子元素
和p元素类似 前后的元素都会被换行
在做练习测试的时候通常情况下会给宽高度和背景颜色来发掘这灵石
<!--CSS部分-->
<style>
* { margin: 0; padding: 0;
}
.box { width: 150px; height: 150px; background-color: red; /*margin: 50px;*/
/*padding: 50px;*/
}</style><!-- html --><div class="box"></div>PS：p元素不能装块经过测试浏览器解析的时候会断义自动补全~
什么是块级元素
前后的元素都会被换行的元素称为块级元素
例如：/ h / p / ul.ol.dl / li(list-item)列表项 / form / div / body / html / 等等等 除开H5的语义化标签因为也很多在此就不做过多介绍了
外边距
html是从什么方向开始显示元素的呢
从上到下 从左到右既然是块元素，默认占据一行怎么会有右边距
除自适应元素以外(没有给宽度的块级元素), 右边不能放元素
占据一行其实可以通过右键 检查或检查元素 可以发现 系统自动填充的是右边的外边距所以给了宽度之后系统给会自动添加右外边距还是让块级元素保持在一行，且不能更改所以设置是不会有效果
有宽度就没有右边距，没有宽度就有右边距。
图为浏览器中F12中显示出来的效果
margin-left And margin-right
| CSS | DESC |
|---|---|
| margin-top | 该元素距离顶部的距离，允许为负值 |
| margin-right | 该元素距离右边的距离，允许为负值 |
| margin-bottom | 该元素距离底部的距离，允许为负值 |
| margin-left | 该元素距离左边的距离，允许为负值 |
| margin | 上 右 下 左； 允许为负值 |
margin两个参数的时候 margin: 上下外边距的值 左右外边距的值; 三个参数 margin: 上 水平方向 下; 参数为像素单位px margin: 5px 10px 20px 30px;当为0的时候可以不用写px单位除此之外
margin-left: auto; margin-right: auto; 可以使固定的块级元素居中 自适应则不行，因为已经默认占一行 没有空余间隙来挪到中间，内边距是没有auto的
块级元素没有宽度让它自适应的话才有右边距，有给宽度，就没有右边距，右边距会自动填满不允许更改
内边距
假如我想让一个盒子里面的内容 都让他距离盒子的左边有段距离
给盒子里面套一个标签，然后使用
margin-left在外边的大盒子直接给上内边距，把盒子里面的内容左边挤一点距离出来
总结：
每个元素都有内边距，包括内联元素br换行标签不做考虑除外
特点：
撑大体积，填充东西(内补白)
不会改变固定的蓝色内容区域
| CSS | DESC |
|---|---|
| padding | 垂直 水平； 上 右 下 左； 上 水平 下； |
| 没有padding内边距居中auto |
方式和margin外边距一样，除了两个功能不一样之外呢，padding也没有auto，且也不能为负值.
以上的内容很多，一定要下去练习记忆，多用F12浏览器自带的检查去观察元素边距的变化
边框
| CSS | DESC |
|---|---|
| border-width | 边框宽度 |
| border-color | 边框颜色 |
| border-style | 边框风格 |
| border-top | 上边框 |
| border-right | 右边框 |
| border-bottom | 下边框 |
| border-left | 左边框 |
| border | 边框简写方式 |
| BORDER-STYLE | DESC |
|---|---|
| dotted | 点状 |
| dashed | 虚线 |
| solid | 实现 |
| double | 双线 |
边框会增大体积，不允许负值，填写负值浏览器不识别
外边距重合
一个块级元素的下外边距，和下面一个块级元素的上外边距，只会应用一个外边距（相邻的元素谁的外边距大，就用谁的外边距），只针对块级元素的上下外边距重合
边距重合例子一
<!--===== HTML =====--><div class="box1"></div><div class="box2"></div>
/* CSS */.box1,.box2 { width: 150px; height: 150px; background: skyblue;
}.box1 { margin-bottom: 20px;
}.box2 { background: pink; margin-top: 60px;
}两个元素之间相距80px，no no no 此时就发生了边距重合
请点击单独
<div class="box" style="overflow: hidden;"> <div class="box1"></div> </div> <div class="box2"></div>
边距重合例子二
<!--===== HTML =====--> <div class="box"> <div class="box1"></div> </div>
/* CSS */.box { width: 300px; height: 300px; background: pink;
}.box1 { width: 150px; height: 150px; background: skyblue; margin-top: 50px;
}这时候会发生重合现象，父元素跟着子元素下来了。
子元素把父元素顶下来了
解决方法：
在父元素添加
border: 1px solid transparent;或者在父元素添加
overflow: hidden; or overflow: auto; or padding: 1px;
以上几种方法都是可行的