超简单的盒子模型

盒子模型

一、盒子模型是什么

盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：内容、内边距、边框、外边距。

二、标准盒子模型

1、概念

标准盒模型采用的W3C标准，盒子的content内容部分由width宽度和height高度决定，添加padding内边距或border外边框后，宽高都会进行相应增长；

2、标准的盒子模型图：

标准盒子模型.png

3、标准盒子模型的css相关属性

（1）content内容

在盒子模型中存放相关的内容，主要包括文本、图片、视频、音频等html元素。

（2）padding内边距

让内容和盒子的边框产生间距，相当于给盒子添加泡沫，即padding是长在盒子与内容之间的。（主要控制子元素在盒子内部的位置）

属性值	意义
padding:5px	一个值，代表上下左右
padding:5px 5px	两个值，第一个值代表上下，第二个值代表左右
padding:5px 5px 5px	三个值，第一个值代表上，第二个值代表左右，第三个值代表下
padding:5px 5px 5px 5px	四个值，分别代表上、右、下、左 (顺时针转)

注意：当给盒子内边距padding值时，盒子会被撑开，为了避免盒子被撑开，最好要给盒子设置box-sizing:border-box属性，内减盒子，防止盒子被内边距撑开

（3）border边框

border可以设置元素的边框。边框有三部分组成：边框宽度（粗细）边框样式 边框颜色

语法：

border:border-width,border-style,border-color

属性	作用
border-width	边框粗细，单位px
border-style	边框样式
border-color	边框颜色

边框样式

边框样式	作用
none	没有边框
solid	边框为单实线（最常用）
dashed	边框为虚线
dotted	边框为点线
double	边框为双实线

（4）margin外边距

margin属性用于设置外边距，即控制盒子和盒子之间的距离。

margin的简写方式代表的意义跟padding完全一致。

外边距可以让块级盒子水平居中，但是必须满足两个条件；

（1）盒子必须指定了宽度（width）。

（2）盒子左右的外边距都设置为auto。

清除内外边距

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素默认的内外边距。

<style>
    *{
        padding:0;/*清除内边距*/
        margin:0;/*清除外边距*/
    }
</style>