块级盒子的内外边距：如何使用box-sizing重新定义盒子模式？
外边距 margin
margin 属性为给定元素设置所有四个（上下左右）方向的外边距属性。也就是 margin-top，margin-right，margin-bottom，和 margin-left 四个外边距属性设置的简写。
外边距margin，控制的是元素外部扩出的空间。相反，padding 操作元素内部空出的空间。
子样式属性：
margin-top
margin-right
margin-bottom
margin-left
示例：
margin-top: 1 px
margin-right : 2 px
margin-bottom : 2 px
margin-left : 1 px
简写示例：
margin :3px 5px 7px 4px;
margin :3px 5px;
margin :3px 5px 7px;
margin :8px;
margin 属性接受 1~4 个值。每个值可以是数值，或百分比，或 auto：
- 当只指定一个值时，该值会统一应用到全部四个边的外边距上。
- 指定两个值时，第一个值会应用于上边和下边的外边距，第二个值应用于左边和右边。
- 指定三个值时，第一个值应用于上边，第二个值应用于右边和左边，第三个则应用于下边的外边距。
- 指定四个值时，依次（顺时针方向）作为上边，右边，下边，和左边的外边距。
外边距的作用：使块级元素居中？
在现代浏览器中实现水平居中，可以使用
代码语言：javascript复制 display: flex; justify-content: center;。不过在 IE8-9 这样的不支持弹性盒布局的旧式浏览器中，上述代码并不会生效。此时要实现在父元素中居中，可使用 margin: 0 auto;。
示例：
代码语言：javascript复制 <h1>外边距的作用：块级元素居中</h1>
<style>
span {
width: 100px;
margin: 0 auto;
border: 1px solid red;
}
</style>
<div>
<span>我是span元素</span>
</div>网页居中对齐的必要条件
- 块级元素 dislay
- 固定宽度 width
问题：能否上中居中？如何上下居中？
代码：
代码语言：javascript复制 <h1>外边距的作用：块级元素居中2</h1>
<style>
.span32 {
width: 100px;
margin: auto auto;
border: 1px solid red;
}
</style>
<div style="height: 200px;width:300px">
<span class="span32">我是span元素2</span>
</divauto的含义是什么？
代码语言：javascript复制margin: auto; /* 上边和下边：无外边距 */
/* 水平方向居中 */内边距padding
padding-left
padding-right
padding-top
padding-bottom
padding
示例
padding-left:10px;
padding-right: 5px;
padding-top: 20px;
padding-bottom:8px;
简写示例：
padding:20px 5px 8px 10px ;
padding:10px 5px;
padding:30px 8px 10px ;
padding:10px;
盒子模型的尺寸：如何查看盒子尺寸？
代码：
代码语言：javascript复制 <title>盒模型尺寸</title>
<style>
div{
width: 88px;
height: 88px;
padding: 5px;
margin: 10px;
border: 1px solid #000000;
}
</style>在Web开发者工具中查看盒子模型尺寸：
使用box-sizing重定义盒子模式
box-sizing 属性定义了浏览器应该如何计算一个元素的总宽度和总高度。
有效值：
- content-box 是谷歌浏览器默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
width = content，谷歌浏览器等标签盒子计算方法
示例：
代码语言：javascript复制box-sizing: content-box;
width: 100%;
- border-box 告诉浏览器：你想要设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px，那么这100px会包含它的border和padding，内容区的实际宽度是width减去(border padding)的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。
width = content border padding，IE盒子计算方法
示例：
代码语言：javascript复制box-sizing: content-box;
width: 100%;
border: solid #5B6DCD 10px;
padding: 10px;
9月30日
【关于作者】
李艺，笔名“石桥码农，腾讯云最具价值专家（TVP），腾讯课堂启明星俱乐部成员，日行一课联合创始人兼 CTO，前 VIPKID 资深技术专家。国内早期闪客之一，具有 15 年以上互联网软件研发经验。
参与研发的音视频直播产品曾在腾讯 QQ 上线，为数千万人使用。从 0 到 1 创建课件标准，被团队誉为课件之父，官方评定为 Adobe 中国 15 位社区管理员之一。著有《小程序从0到1：微信全栈工程师一本通》等计算机图书，是极客时间视频畅销课《微信小程序全栈开发实战》的作者，知乎 Live 讲师，在行互联网技术专家。欢迎到“在行”找我一对一约聊。
