盒模型是CSS的基石之一，它指定元素如何显示以及（在某种程度上）如何交互。页面上每一个元素都被看做一个矩形框，框由元素的内容，内边距 (padding)，边框 (border)和外边距 (margin)组成，如下图所示。
内边距出现在内容区域周围，若给元素上添加背景，背景将会应用于由内容和内边距组成的区域。添加边框，会在内边距的区域外加一条线，这些线有多种样式，后面会有所介绍。在边框外边是外边距，外边距是透明的，一般使用它控制元素之间的间隔。
CSS2.1还包含outline属性，绘制在元素框之上，不影响元素的大小或定位。大多数现代浏览器（包括IE8）都支持outline，但IE7和更低版本不支持。
内边距、边框、外边距都是可选的，默认值为零。但许多元素将由用户代理样式表设置外边距和内边距，所以将元素的margin和padding设置为零，对写整个样式有帮助，这项工作一般由全局reset进行。
IE的早期版本，包括IE6，在混杂模式中使用自己的非标准盒模型。浏览器的width属性不是内容的宽度，而是内容，内边距和边框的总和。添加的内边距越多，给内容预留的空间就越少。
在CSS3中，可通过box-sizing属性定义使用哪种盒模型，但除了一些非常特殊的场合很少使用该属性。
目前最好的解决方案是回避这个问题。也就是，不给元素添加指定宽度的内边距，而是尝试将内边距或外边距添加到父元素或子元素。
box-sizing属于CSS3内容，属性值包括：content-box, border-box, inherit。该属性用于更改预设的CSS盒模型宽度和高度的计算方式，可使用该属性模拟不正确支持CSS盒模型规范的浏览器行为。
浏览器支持：IE8及以上，Chrome 10.0以上，FireFox 29.0 以上，Safari 5.1以上，Opera 9.5以上。
示例：
div {
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Opera */
width:50%;
float:left;
}
margin属性用于设置外边距，下面我们将讲述margin一些比较有意思的知识点
在标准盒模型中，border-box部分，即包括border,padding,content的方框代表可视尺寸（clientWidth）。外边距加上可视尺寸则是“占据尺寸”（张鑫旭大神自命名）。
在一些前提下，通过设置margin属性可以改变可视尺寸和“占据尺寸“的大小。
? 1. margin改变可视尺寸
? 适用范围：
适用于没有设定width/height的普通block水平元素（float，absolute/fixed,inline水平，table cell元素。..）
只适用于水平方向尺寸
可利用该特性实现一侧定宽自适应布局和两端对齐布局效果。
? 2. margin改变”占据尺寸“
? 适用范围：
block/inline-block水平元素均适用
与有无设定width/height值无关
适用于水平方向和垂直方向
可利用该效果实现滚动容器上下留白及等高布局效果。
普通元素的百分比margin都是相对于容器（父级元素）的宽度计算。
绝对定位元素的百分比margin都是相对于第一个定义祖先元素(relative/absolute/fixed)的计算宽度
margin重叠，即外边距叠加，是一个比较简单的概念。但是，在实践中对网页进行布局时，它会造成很多混淆。简单地说，当两个或更多垂直外边距相遇时，它们将形成一个外边距。这个外边距的高度等于两个发生重叠的外边距的高度中的较大值。
margin重叠3种情境：
作用机制：自动填充元素占据空间的剩余空间，可利用其实现水平居中：
div{
width:300px;
margin:0 auto;
}
注意：margin实现居中，必须计算后的距离不能是负值。
margin 如何实现垂直布局？
.father{height:200px; width:100%; writing-mode:vertical-lr;}
.son {height:100px; width:500px; margin:auto;}
2.绝对元素的margin:auto居中(IE8+)
.father{ height:200px; position:relative;}
.son{ position:absolute; top:0; right: 0; bottom:0; left:0;
width:500px; height:100px; margin:auto;}
1.inline水平元素的垂直margin无效
前提：
2.margin重叠
3.display:table-cell与margin
margin可应用于所有元素，除了diplay为table相关类型（不包括table-caption,table以及inline-table）的所有。甚至可应用于::first-letter
4.绝对定位元素非定位方向的margin值“无效”
绝对定位元素的margin值一直有效，但由于设置了绝对定位，脱离了文档流，所以看不出效果。
5.鞭长莫及导致margin无效，一些情况下，如浮动时，margin无效可能是不够大。
6.内联特性导致margin无效，例如对于图片，使用margin的负值定位，不会出现在容器之外。
Chrome/FireFox目前支持该属性，IE不支持
margin-start
margin-end
盒子模型种，padding，margin都支持百分比，但是border，即边框宽度不支持百分比；来自张鑫旭大神的理解：border-width不支持百分比是由于其语义限制，因为可以看到平板和手机两个不同显示大小的边框大小并不根据元素长宽变化而变化。
solid （实线）
dashed （虚线）
在Chrome/FireFox中，虚线边框的宽高为3：1，IE为2：1。
dotted（点线）
在Chrome/FireFox中，点的形状为方形，IE为圆形。
double（双实线）
双线宽度相等，中间空白间隔$\pm$1
inset（内凹）
border-color默认继承自color，即未指定color时border-color与color一样。类似的还有box-shadow,text-shadow,outline。
当width auto或者box-sizing为border-box，但是padding大小超过宽高时，padding会影响元素尺寸。
对于block元素：
对于内联元素：
水平padding影响尺寸，垂直padding不影响尺寸。但会影响背景色。
padding不支持任何负值，padding的百分比相对于宽度计算。
inline元素的百分比值
空inline元素+padding高端也不等。是由于inline元素的垂直padding会让"幽灵空白节点"显现，也就是规范中的“strut”出现。这时通过设置font-size:0规避
span{padding:50%;font-size:0;}
button表单按钮设置padding:0，Chrome是ok的，但是在FireFox中左右依然会有padding，通过设置属性-moz-focus-inner规避;IE浏览器中，IE7文字越多左右padding逐渐变大，通过overflow属性设置规避。
button::-moz-focus-inner {
padding:0;
}
button{padding:0;overflow:visible;}
对于button，padding与高度计算不兼容，所以一般通过label标签实现button,而button通过绝对定位到页面之外或者z-index隐藏在页面下方。
<button id="btn"></button>
<label for="btn">按钮</label>
label{
display:inline-block;
line-height:20px;
padding:10px;
}
原文：https://www.cnblogs.com/rainbowly/p/12843543.html