10.9 块级盒子的内外边距：如何使用box-sizing重新定义盒子模式？

块级盒子的内外边距：如何使用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：

• 当只指定一个值时，该值会统一应用到全部四个边的外边距上。
• 指定两个值时，第一个值会应用于上边和下边的外边距，第二个值应用于左边和右边。
• 指定三个值时，第一个值应用于上边，第二个值应用于右边和左边，第三个则应用于下边的外边距。
• 指定四个值时，依次（顺时针方向）作为上边，右边，下边，和左边的外边距。

外边距的作用：使块级元素居中？

在现代浏览器中实现水平居中，可以使用

 display: flex; justify-content: center;。

不过在 IE8-9 这样的不支持弹性盒布局的旧式浏览器中，上述代码并不会生效。此时要实现在父元素中居中，可使用 margin: 0 auto;。

示例：

    <h1>外边距的作用：块级元素居中</h1>
    <style>
        span {
            width: 100px;
            margin: 0 auto;
            border: 1px solid red;
        }
</style>
    <div>
        <span>我是span元素</span>
    </div>

网页居中对齐的必要条件

• 块级元素 dislay
• 固定宽度 width

问题：能否上中居中？如何上下居中？

代码：

    <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>
    </div

auto的含义是什么？

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;

盒子模型的尺寸：如何查看盒子尺寸？

代码：

    <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，谷歌浏览器等标签盒子计算方法

示例：

box-sizing: content-box;
width: 100%;

• border-box 告诉浏览器：你想要设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px，那么这100px会包含它的border和padding，内容区的实际宽度是width减去(border + padding)的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。

width = content+border+padding，IE盒子计算方法

示例：

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 讲师，在行互联网技术专家。欢迎到“在行”找我一对一约聊。