携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第3天，点击查看活动详情 >
今天给大家梳理一下盒子模型
一.盒模型
盒模型又可以叫做盒子模型、框模型
-css将页面的所有元素都设置成了一个矩形的盒子
-嫁给你元素设置成矩形的盒子后，对页面的布局就变成了不同盒子摆放的位置
-每一个盒子都由以下几个部分组成：
内容区（content）
内边距（padding）
边框（border）
外边距（margin）
二.盒子模型边框
border-width：10px；
默认值：一般为三个像素
border-width可以用来指定四个方向的边框的宽度值的情况
四个值：上，右，下，左
三个值：上，左右，下
两个值：上下，左右
一个值：上下左右
除了border-width还有一组 border-xxx-width
xxx可以是top right bottom left
用来单独指定某一个边的宽度
border-style 指定边框的样式
solid 表示实线
dotted 表示点状虚线
dashed 虚线
double 双线
*/
/* border简写属性，通过属性可以同时设置边框所有的
相关样式，并且没有顺序要求*/
三.盒子模型内边距
内边距（paddin）
-内容区和边框之间的距离是内边距
-一共有四个方向的内边距：
padding-top
padding-right
padding-bottom
padding-left
-内边距的设置会影响到盒子的大小
-背景颜色会延申到内边距上
四.盒子模型外边距
-外边距不会影响盒子可见框的大小
-但是外边距会影响盒子的位置
-一共有四个方向的外边距：
margin-top
-上外边距，设置一个正值，元素会向下移动
margin-right
默认情况下不会产生效果
margin-bottom
-下外边距，设置一个正值，其下边元素会向下移动
margin-left
-左外边距，设置一个正值，元素会向右移动
-margin也可以设置负值，如果是负值元素会向相反的方向移动
-元素在页面中是按照自左向右的顺序排列的
所以默认情况下如果我们设置的左和上外边距则会移动
而设置下和右边距则会移动其他元素
-margin的简写属性
margin 可以同时设置四个方向的外边距
五.水平方向布局
元素的水平方向的布局：
元素在其父元素中水平方向的位置由几个属性共同决定
margin-left
border-left
padding-left
width
padding-right
border-right
margin-right
一个元素在其父元素中，水平布局必须满足以下等式
margin-left+ border-left +padding-left
+width+padding-right
+border-right
+ margin-right
=其父元素内容区的宽度（=width的值）
0 + 0 + 0 + 200 + 0 + 0 + 0 = 800
以上等式如果不满足则等式会自动调整
-如果这七个值没有为 auto 的情况，则浏览器会自动调整margin-right的值
如果某个值为 auto 则会自动
六.垂直方向布局
可选值
visible 默认值，子元素会从父元素中溢出，在父元素外部的位置显示
hidden 溢出内容将会被裁减不会显示
scroll 生成两个滚动条通过滚动条来查看完整的内容
auto 根据需要生成滚动条
overflow-x 只显示x轴
overflow-y 只显示y轴
七.外边距的折叠
垂直外边距的折叠
-相邻的垂直方向外边距会发生折叠现象
-兄弟元素
-兄弟元素之间的相邻垂直外边距现象会取两者之间的最大值（两者正值）
-特殊情况
如果相邻的外边距一正一负，则取两者之和
如果相邻的外边距都是负值，则取绝对值较大值
兄弟元素之间的外边距重叠对开发是有利的，所以不需要处理
八.总结
盒子模型本人就粗略的总结了以上的几点，欢迎各位兄弟积极指出以及在评论区讨论！
