html盒子模型外边距

，里面放文字啊图片啊，那部分就叫内容区域。
宽度和高度怎么控制？就靠width和height属性。
记住，这俩只管内容本身，不包括里面填充啊、边框啊、外面空白啊什么的。

内边距（Padding）： 内容跟边框之间那空白叫内边距。
比如你给文字周围留了1 0px的内边距，那就要用padding:1 0px来设置。
可以一下子设四个方向都一样，也可以分别指定上右下左。
比如padding:5 px 1 0px;就是上5 px，左右1 0px。

边框（Border）： 包围着内容跟内边距的线叫边框。
用border属性来控制，有多粗啊、什么样式啊（实线啊、虚线啊）、什么颜色啊。
同样，可以统一设，也可以分方向设。
比如border:1 px solid red;就是1 px粗的实红线。

外边距（Margin）： 边框跟旁边元素之间的空白叫外边距。
这就是控制元素之间距离的。
用margin属性设。
规则跟内边距类似。
比如margin:2 0px;就是四周都是2 0px空白。
这玩意儿能防止元素堆在一起。

盒模型怎么算大小啊？有两种模式：
标准盒模型（content-box）： 这是默认的。
元素的总宽度和高度，只算内容区域的。
内边距和边框会额外加。
比如你设width:1 00px，padding:1 0px，border:2 px，那实际占位宽度是1 2 4 px（1 00+1 02 +2 2 ）。
这要注意，容易算错。

IE盒模型（border-box）： 这种模式下，元素的宽度和高度，是包含内容、内边距和边框的。
比如你设width:1 00px，那这1 00px是内容+内边距+边框的总和。
内边距或边框一加，内容区域就会变小。
怎么切换？用box-sizing属性。
content-box就是标准模式，border-box就是IE那种模式。

盒模型的作用主要有：
精确控制元素尺寸： 这很重要，避免因为内边距或边框导致布局乱套。
你算尺寸的时候，得把所有加的都考虑进去。

优化视觉层次： 通过调整外边距和内边距，可以控制元素之间的距离，让页面看着更舒服。

响应式设计支持： 可以用百分比或者视口单位来设尺寸，这样布局能适应不同屏幕大小。

就这些，说白了，盒模型就是通过内容、内边距、边框、外边距这几个部分，给元素定个空间框架。
搞懂它，是做CSS布局的基础。

什么是网页盒模型

说白了，盒模型就是网页布局的"积木规则"，把每个元素都当成带皮的红薯——内容是瓤，内边距是皮，边框是更厚的那层皮，外边距是红薯外面的泥土。
这玩意儿搞懂了，元素大小怎么算心里就有数了。

先说最重要的内边距和边框的叠加问题。
去年我们跑那个电商项目，一个按钮设计时没算好padding，结果边框加进去后按钮实际显示宽度比设计稿少1 0px，用户反馈点不动。
用行话说叫雪崩效应，其实就是前面一个小延迟把后面全拖垮了。
另外一点是两种盒模型的切换，去年年底有个活动页面，设计师用2 00px宽的容器，结果加了2 0px边框后整个布局崩了——原来浏览器默认是IE盒模型，直接把2 00px算进总宽。
后来发现不对劲，赶紧加了个border-sizing:content-box才救回来。

等等，还有个事得提。
做移动端适配时，外边距的塌陷问题特别烦人。
去年那个APP项目，两个元素并排时，下边距居然把下面的文字都挤到一块儿了——后来发现是外边距相吸导致的，改用margin-bottom负值才解决。
这个点很多人没注意，说实话挺坑的。

建议项目刚开始就统一用标准盒模型，别等出了问题再返工。
不过我觉得值得试试用border-box做某些特殊效果，比如把整个元素当背景图用，内容区域透明，外边距留白，这样设计自由度会高不少。

w3c盒子模型

W3 C盒子模型描述元素布局，实际大小是内容+内边距+边框+外边距之和。
2 01 0年，某网站布局出错，因未考虑边框和内边距影响。
这就是坑，别只设置宽度高度。