前提声明：所有内容均为之前学习过程中的笔记和个人总结，（无法避免雷同，敬请谅解，如有侵权，私信删除）。如有错误之处请各位大佬不吝赐教。
（笔记内容将包括 HTML(5)/CSS(3)/JS/bootstrap/less/jQuery/ajax/ES6/promise/axios/Vue2/vue3/npm 以及如何搭建一个java springboot后端服务器与前端进行交互）
下篇预告：display/visibility/overflow的区别 以及文档流和浮动认识
一、什么是盒子模型
CSS处理网页时，它认为每个元素都包含在一个不可见的盒子里面。
因为如果把所有的元素都想象成盒子，那么我们对网页的布局就相当于摆放盒子。
我们只需要将相应的盒子摆放在网页中相应的位置即可完成网页的布局。
如上图所示： 我们想象盒子模型就是一个具有内衬泡沫棉的盒子：
外边距(margin):就是边框之外和其它盒子之间的距离。
边框（border）:就是盒子外壳。
内边距（padding）:就是泡沫棉的厚度
内容区（element）:就是盒子内部事件能够放东西的空间大小。
而我们平时设置元素的width和heigth就是内容区的大小。
1、边框border:
要给盒子设置边框： border-width： 宽度 border-color：颜色 border-style: 样式 缺一不可
但可以只写边框样式，因为 颜色和宽度都有默认值
设置边框之后整个盒子会变大。内容区尺寸+边框尺寸 例如： 100*100的内容区 10的边框 变为120*120
如果我们给border-width设置了4个值， 执行顺序则是 上 右 下 左。
如果我们给border-width设置了3个值， 执行顺序则是 上 左右 下。
如果我们给border-width设置了2个值， 执行顺序则是 上下 左右 。
如果我们给border-width设置了1个值， 执行顺序则是 上下 左右。
适用于边框其他的属性 比如 border-color:也适用上边规则
border-style:也适用上边规则
边框简写：border: 颜色 宽度 样式 没有顺序可言。
border-方向：设置单个边样式。
2、内边距padding
不能设置颜色
一共有四个方向的内边距。
padding-方向：来设置四个方向的样式。
设置padding尺寸会影响整个盒子可见区域的大小。
内容区设置的背景会延时到内边距里面，但是内容区的大小不会变。
padding： 简写也适用于上边的执行顺序规则。
3、外边距margin
外边距也不能设置距颜色
设置margin不会影响盒子可见区域的大小，而会影响盒子的位置。
设置左上宽度影响自己的位置。设置右下影响别的盒子位置。
margin-方向：设置宽度
简写margin: 也适用于上面的规则。
如果给下面 外边距设置负值，则会让下边其他盒子 覆盖上来重叠起来。
如果给上边外边距设置设置宽度则会把自己位置向下移把下边的盒子挤下去。
margin-left：auto margin-right:auto 则会让盒子在父级元素左右中居中。
注意：这里有一个垂直外边距重叠问题：
在网页中垂直（上下）方向的相邻外边距会发生外边距重叠。会取相邻元素外边距的最大值，而不是求和。
如果父子元素也满足外边距垂直切相邻重叠条件下， 子元素的外边距就会传递给父元素。
简陋解决办法：加一个元素 或者设置border或者设置padding 将相邻重叠外边距隔开，解决上边的问题。
设置padding的方式会修改可见框的大小，为了保持元素整体尺寸不变，需要从内容框的尺寸中减去。
开发中常用的解决办法：使用：before伪类在元素前边加一个display：table将相邻的外边距隔开
div:before{
content:""
display:table
}
这里总结四种在屏幕中上下左右居中的方式：前提是元素开启绝对定位。
/*第一种方法 四周自动适应， 四个方向设置任意相同值都可时位置居中*/
margin: auto;
top: 1px;
left: 1px;
right: 1px;
bottom: 1px;
这种方式能够水平垂直居中的原因 是因为绝对定位盒模型的特性
如下公式：margin的宽度为自动，W H为已知宽高。所以只要把别的定义相等，
那么margin就会自适应到 容器一样宽高。
/*第二种方式 元素未知宽高或者已知宽高都可以使用这个方法是将元素沿 X Y平移如 推荐使用*/
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
/*!*第三个方法：已知宽高将元素直接移动上下左右的50%，这个时候中心点在左上角.如果没有边框宽度则只需要移动元素一半位置，如果有边框宽度就要加上边框宽度*/
left: 50%;
top: 50%;
transform: translate(-元素自身一半宽px,-元素自身一半高px);
最后简单说两句 内联元素：
内联元素无法设置宽高，内容占多少位置，就占多大范围。
支持内边距设置：但是垂直方向（top/bottom）的设置不影响页面布局
支持边框设置：但是垂直方向边框不影响页面布局
支持外边距设置：不支持垂直外边距。
