CSS3 之 盒子模型

盒子模型说明

• 盒子模型由 四部分组成：内容，padding（内边距）、border（边框）、margin（外边距）
• 内容就是 盒子里的图片、文字等区域。

盒子模型的实际宽度

<style type="text/css">
    /* 实际看到 div 是 100px + 20px 的宽高*/
    div {
        width: 100px;
        height: 100px;
        background-color: tomato;
        padding: 20px;
    }
</style>
<div>大数据男孩</div>

所以在实际操作中，可能会看到 设置内边距后，div变大了的情况，所以设置内边距后，需要适当减小div内容的宽高。

如果没有指定盒子宽度，则 padding 就不会撑开盒子宽度。

边框 border

语法

以下语法没有顺序限制

border: border-width border-style border-color;

/* 例如 */
border: #00FFFF solid 1px;

边框写法总结

因为边框有 4个边框：top、bottom、left、right，所以可以单独设置某一边的边框。

单独设置小技巧

四边取消边框，只设置下边框。

input {
    boder: none;
    boder-bottom: #00FFFF solid 1px;
}

内边距 padding

内容 到 边框的距离

语法

/* 1个值：上下左右内边距 都为 1px */
padding: 1px;

/* 2个值：上下 1px 左右 2px */
padding: 1px 2px;

/* 3个值：上 1px 左右 2px  下 3px */
padding: 1px 2px 3px;

/* 4个值（顺时针）：上 1px 右 2px  下 3px 左 4px*/
padding: 1px 2px 3px 4px;

四边 单独写

/* 上边距 */
padding-top : 1px;

/* 右边距 */
padding-right : 1px;

/* 下边距 */
padding-bottom : 1px;

/* 左边距 */
padding-left : 1px;

外边距 margin

外边距是 盒子与盒子之间的距离

/* 1个值：上下左右内边距 都为 1px */
margin: 1px;

/* 2个值：上下 1px 左右 2px */
margin: 1px 2px;

/* 3个值：上 1px 左右 2px  下 3px */
margin: 1px 2px 3px;

/* 4个值（顺时针）：上 1px 右 2px  下 3px 左 4px*/
margin: 1px 2px 3px 4px;

四边 单独写

/* 上边距 */
margin-top : 1px;

/* 右边距 */
margin-right : 1px;

/* 下边距 */
margin-bottom : 1px;

/* 左边距 */
margin-left : 1px;

块级盒子水平居中

• 让一个块级盒子水平居中必须要:
  • 盒子必须指定宽度（width），以为块级元素不指定宽度，默认 100%(占满)。
  • 然后左右外边距设置为 auto。

常见写法：

div {
    width: 100px;
    margin: 0 auto;
}

其他写法：

div {
    width: 100px;
    margin-left: auto;
    margin-right: auto;
}

div {
    width: 100px;
    margin: auto;
}

行内元素、行内块元素 的居中使用 text-align: center;

清除标签默认内外边距

一般这就是以后 Css 的第一句话

* {
    margin：0px;
    padding: 0px;
}

注意：

• 行内元素为了兼容，尽量只设置左右外边距，不设置上下内外边距。