CSS盒模型完整详解，网页布局的核心计算逻辑
一、盒模型的本质与五大核心
盒模型是DIV+CSS布局的核心灵魂，是所有布局计算、尺寸控制、位置排版的基础，所有网页中的DIV标签，在浏览器中都会被解析成一个矩形的盒子，所有布局规则、尺寸计算、边距控制，全部基于盒模型原理，不懂盒模型，就永远无法真正掌握网页布局。
标准CSS盒模型由五大核心部分组成，从内到外依次为：内容区域content、内边距padding、边框border、外边距margin、宽度width与高度height。其中width和height设置的是内容区域的尺寸，padding是内容到边框之间的距离，border是盒子的边框，margin是当前盒子和其他盒子之间的距离，五个部分共同决定了一个DIV盒子在页面中占据的总空间大小。
新手最容易陷入的误区，就是认为设置width宽度就是DIV的总宽度，这是完全错误的。标准盒模型下，DIV盒子的总宽度 = 左右width宽度 + 左右padding内边距 + 左右border边框宽度，总高度同理，外边距margin不计算在盒子自身尺寸内，只控制盒子和其他元素之间的距离。这个计算公式是所有布局的基础，必须牢牢记住。
width和height是设置DIV盒子内容区域尺寸的属性，也是布局中最基础的尺寸控制属性，有两种常用的属性值，分别是固定像素值和百分比宽度，适用场景完全不同。
固定像素值，直接使用数字加px单位，比如width: 1000px; height: 200px; 表示DIV内容区域宽度固定为1000像素，高度固定为200像素，无论浏览器窗口怎么缩放，DIV尺寸都不会改变，适合设置网页版心、固定模块、导航栏、按钮等固定尺寸的区域，是常规布局最常用的写法
百分比宽度，使用数字加%单位，比如width: 100%; 表示DIV宽度占父级容器宽度的100%，也就是和父级DIV宽度完全一致，百分比宽度会跟随父级容器尺寸变化而变化，适合设置全屏头部、通栏banner、自适应布局模块，高度一般不建议设置百分比，容易出现高度塌陷问题，常规布局优先使用固定像素高度。
需要注意，块级DIV标签默认宽度就是父级容器的100%，也就是默认通栏显示，不需要单独设置width:100%，只有需要调整宽度时，才需要设置width属性。同时如果不设置height属性，DIV高度会默认由内部内容撑开，内容越多，DIV高度越高，这是自适应高度的常用写法，适合内容长度不固定的文章区域、新闻
二、内边距padding
padding是内边距属性，作用是设置内容区域到边框之间的距离，也就是给盒子内部增加空白间距，让内容不会紧贴边框，提升页面美观度。padding有四个方向，分别是上、右、下、左，顺时针排序，有五种常用的书写方式，新手可以根据需求灵活选择。
第一种是统写方式，padding: 10px; 表示四个方向的内边距全部为10像素，写法最简单，适合四个方向内边距相同的场景。第二种是上下、左右分开写，padding: 10px 20px; 表示上下内边距10像素，左右内边距20像素。第三种是上、左右、下分开写，padding: 10px 20px 30px; 表示上10像素，左右20像素，下30像素。第四种是四个方向分别写，padding: 10px 20px 30px 40px; 顺时针对应上、右、下、左。第五种是单独方向设置，padding-top、padding-right、padding-bottom、padding-left，单独控制某一个方向的内边距，
核心注意点，padding会撑大DIV盒子的总尺寸，比如一个DIV设置width:200px，padding-left:20px，那么这个DIV的总宽度就变成220像素，布局计算时必须把padding计算在内，避免页面宽度超出、模块换行问题。同时padding不能设置负值，只能使用0或正数值，这是和margin的核心区别。
三、边框border
border是边框属性，作用是给DIV盒子设置边框线条，同时border也会撑大DIV盒子的总尺寸，和padding规则一致。border是复合属性，同时设置三个参数，分别是边框宽度、边框样式、边框颜色，三个参数顺序可以调换，缺一不可，标准简写格式为border: 1px solid #ccc;。
第一个参数是边框宽度，单位px，比如1px、2px，数值越大边框越粗。第二个参数是边框样式，solid表示实线，是最常用的样式，dashed表示虚线，dotted表示点状线，常规布局99%的场景都使用solid实线。第三个参数是边框颜色，支持十六进制颜色值、rgb颜色值、颜色
border也可以单独设置某一个方向的边框，分别是border-top、border-right、border-bottom、border-left，比如只给DIV设置底部边框，就可以使用border-bottom: 1px solid #eee;，适合导航栏分割线、列表项底部边框、模块底部装饰线等场景。如果需要取消边框，直接设置border:none;即可。
四、外边距margin
margin是外边距属性，作用是设置当前DIV盒子和其他元素之间的距离，控制模块之间的间距，不会撑大盒子自身尺寸，这是和padding、border的核心区别。margin的书写方式、方向规则和padding完全一致，支持统写、分开写、单独方向设置，唯一的区别是margin可以设置负值，实现盒子位置偏移、重叠效果。
margin最核心、最常用的功能，就是实现块级DIV盒子的水平居中，这是网页布局中版心居中、模块居中的标准写法，格式为margin: 0 auto;。这个样式的含义是，上下外边距为0，左右外边距由浏览器自动分配，实现水平居中。需要注意，这个居中写法必须满足两个前提，第一是当前DIV必须设置固定的width宽度，第二是当前DIV是块级元素，两个条件缺一不可，否则居中效果不会
margin使用时需要注意两个常见问题，第一个是外边距合并问题，上下排列的两个DIV，上面的DIV设置margin-bottom，下面的DIV设置margin-top，两个外边距不会叠加，会取最大的那个值生效，这是浏览器默认规则，布局时只需要给其中一个DIV设置外边距即可。第二个是外边距塌陷问题，父级DIV没有设置边框和内边距时，子级DIV的margin-top会传递给父级DIV，导致父级一起下移，解决方法是给父级DIV设置边框或者内边距，即可解决塌陷问题。
