Web前端开发，什么是盒子模型？盒子模型有哪些属性

在body中的每一个HTML标签实际上都被包围在一个看不见的矩形中，这个矩形就叫做“盒”。

盒子模型

首先介绍下HTML中标签的分类

一、HTML的标签分为两种：块标签和内敛标签

1、块标签：占据了容器的整个宽度，容器指的是 body 标签，每个块标签所在的盒都尽可能的占据页面的整个宽度，就是要占用浏览器一整行的位置。

块标签：包含p、div、ul、ol、li、h1~h6等；块标签独自占据一行、自带换行的效果；除了div以外，一般块级标签都会有内外边距，宽度和高度。

2、内联标签：不会占据容器的一整行，它会和它周围的内容在一起，在一行内自然的从左到右依次显示，内容的多少决定了内联标签的宽度。

内联标签：包含 span，a，img，input，label等

浏览器怎么会知道盒子与盒子之间的距离应该是多少？就会用到盒模式

二、盒模式

盒模式是描述标签的边框和间距的一种方式

1、盒模式由4部分组成

1）内容区域 content area

内容区域中包含的是盒子中真正的内容（文本，图片等）

2）补白或内边距 padding

padding包围在内容区域的边缘，分为上，右，下，左四个区域

3）边框 border

border包围在padding的边缘，也分为上，右，下，左四个区域

4）边距 margin

margin包围在border的上、右、下、左四个边缘

盒模式

2、如何设置盒模式的属性？

1）每次设置padding属性的一个值

h1 {

padding-top: 6px;

padding-right: 3px;

padding-bottom: 0;

padding-left: 0;

}

padding属性

或者按照顺时针方向一次性设置：上，右，下，左

h1 {

padding: 6px 3px 0 0;

}

padding属性

2）设置三个关于border的属性

h1 {

border-width: 6px;

border-style: solid;

border-color: #ffff00;

}

border属性

或者使用简写的形式

h1 {

border: 6px solid #ffff00;

}

border属性

也可以只设置其中一侧的边框

h1 {

border-bottom: 6px solid #ffff00;

}

border属性

4）添加margin的方式和padding是一样的，如：

h1 {

margin-top: 6px;

margin-right: 0;

margin-bottom: 6px;

margin-left: 0;

}

margin属性

或者按顺时针方向一次性设置

h1 {

margin: 6px 0 6px 0;

}

margin属性

当上下和左右参数一致的时候，也可以这样设置，如下：

h1 {

margin: 6px 0;

}

margin属性

3、计算盒子的尺寸

在所有标签中都有padding，border，margin一层层的包围在内容区域的外面，四个部分被设置后，整个盒子的尺寸计算方法如下：

整个盒子的宽度=内容区域的宽度+左padding+右padding+左border+右border+左margin+右margin

整个盒子的高度=内容区域的高度+上padding+下padding+上border+下border+上margin+下margin

4、默认浏览器的样式

当你没有为网页定义样式的时候，浏览器会使用默认的样式，把下面的这段代码加入到你的CSS开始部分覆盖浏览器的默认样式，代码包含我们前面介绍过的标签，这样我们就可以根据自己需求自由控制网页了，这个过程称之为CSS的初始化，在实际的项目中，初始化是必不可少的部分。

html, body, h1, h2, h3, p, ol, ul, li, a {

padding: 0;

border: 0;

margin: 0

}

设置浏览器默认样式

总结：

每个标签都填充在一个看不见的盒子中

块标签所在的盒会占据浏览器一整行的位置

使用padding可以设置边框到内容区域的距离

使用margin可以设置边框之外的距离