CSS盒子模型就是在网页设计中经常用到的一种思维模型,是CSS布局的基石,主要规定了元素是如何显示元素间相互关系。

什么是盒模型？

概念：CSS盒子模型就是在网页设计中经常用到的一种思维模型，是CSS布局的基石，主要规定了元素是如何显示元素间相互关系。定义所有元素都可以有像盒子一样的平面空间和外形。包含内容区、填充、边框和外边距，这就是盒模型。

作用：网页元素是如何显示及元素间相互关系的。

盒模型的组成：content（内容区）+padding（填充区）+border（边框区）+margin（外边界区）

网页中经常用到以下四个属性：

1、Content：元素的宽和高，内容，也就是元素的width、height

2、Border ：盒子的边缘，盒子边缘或盒子边缘的厚度

3、Padding ：在盒子里面，盒子和内容之间，显示在盒子和内容之间的空白区，补白、内填充或叫内边距

4、Margin ： 外边距

特点1：加了padding值后，会把元素原本有的大小撑大，如果让元素原本的大小不变，需要在元素的宽高上减掉所加的padding值。

特点2：padding属性对背景图片不起作用的，也可以说背景图片的位置不受padding的影响。

特点3：背景色会延展到padding区域。

Padding设置内容到边框的距离：

使用方法：方法一：

padding-top:30px; 上填充

padding-right:30px; 右填充

padding-bottom:30px; 下填充

padding-left:30px; 左填充

方法二 ：

padding： 1 2 3 4 1、上 2、右 3、下 4、左

padding： 1 2 3 1、上 2、左和右 3、下

padding： 1 2 1、上和下 2、左和右

padding： 1 1、上 右 下 左

margin：

作用：控制同辈元素之间的位置关系。

特点： margin是现在是在元素边框以外的空白区。

margin设置两个元素之间的距离

使用方法：方法一：

margin-top:30px; 上外边距

margin-right:30px; 右外边距

margin-bottom:30px; 下外边距

margin-left:30px; 左外边距

方法二 ：

margin：1 2 3 4 1、上 2、右 3、下 4、左

margin：1 2 3 1、上 2、左和右 3、下

margin：1 2 1、上和下 2、左和右

margin：1 1、上 右 下 左

实现元素水平居中的方法：

margin：0 auto；

margin-left:auto; margin-right:auto;

注：margin 是可以写负值的，padding不可以写负值；

margin不会影响元素的实际宽高，但是也会曾加的他的所占区域；

先记住：margin就是用来控制同辈元素之间的位置关系；

padding就是用来控制父子元素之间的位置关系的。

标准盒模型 的所占位置的组成：宽高（content+padding+border+margin

元素宽度实际占有的位置大小： 宽+左右padding+左右border+左右margin

元素高度实际占有的位置大小： 高+上下padding+上下border+上下margin

标准盒模型的width为content的width，height为content的height

标准盒模型的计算方式：

Width+左右内边距+左右边框+左右外边距

怪异盒模型：比如提交按钮

元素的宽度：width（content+border+padding）+margin

属性：box-sizing: border-box（怪异盒模型）/content-box（标准盒模型）

空间宽度：width-padding（左右）-border（左右）

空间高度：width-padding（上下）-border（上下）

怪异盒模型的width包括padding和border

计算方式：

Width+margin-left+margin-right

总结：

标准盒模型：width+左右内边距+左右边框+左右外边距

怪异盒模型：width+左右外边距

Centent-box:标准盒模型

Border-box：怪异盒模型

CSS盒状模型以一个包含四个成分的有界限的盒子来描述网页中的每个元素:

元素内容(content)本身位于中心。

一个补丁(padding)封套位于内容周围。

边框(border)包围补丁，它为元素的可见区域划分界线。

边缘(margin)包围边框。

盒模型是CSS技术中使用的一种，可以比喻成平常生活中里的盒子，能够装入一些东西进去。

盒模型具有的属性如：内容(content)、填充(padding)、边框(border)、空白边(margin)

内容(content)就是它的中心，来显示盒模型的主要内容，填充(padding)是内容区域和边框之间的空间；边框(border)是围绕内容区域和填充的边界；空白边(margin)处于盒模型的最外围，是添加在边框外周围的空间。

一个盒子模型分成几部分：
- 内容区（content）
- 内边距（padding）
- 边框（border）
- 外边距（margin）

概念：CSS盒子模型就是在网页设计中经常用到的一种思维模型，是CSS布局的基石，主要规定了元素是如何显示元素间相互关系。定义所有元素都可以有像盒子一样的平面空间和外形。包含内容区、填充、边框和外边距，这就是盒模型。

作用：网页元素是如何显示及元素间相互关系的。

盒模型的组成：content（内容区）+padding（填充区）+border（边框区）+margin（外边界区）

网页中经常用到以下四个属性：

1、Content：元素的宽和高，内容，也就是元素的width、height

2、Border ：盒子的边缘，盒子边缘或盒子边缘的厚度

3、Padding ：在盒子里面，盒子和内容之间，显示在盒子和内容之间的空白区，补白、内填充或叫内边距

4、Margin ： 外边距

特点1：加了padding值后，会把元素原本有的大小撑大，如果让元素原本的大小不变，需要在元素的宽高上减掉所加的padding值。

特点2：padding属性对背景图片不起作用的，也可以说背景图片的位置不受padding的影响。

特点3：背景色会延展到padding区域。

Padding设置内容到边框的距离：

盒模型的组成：content(内容区)+padding(填充区)+border(边框区)+margin(外界区)。

不同部分的说明：

content(内容)：盒子的内容，显示文本和图像。

border(边框)：围绕在内边距和内容外的边框。

padding(内边距)：清除内容周围的区域，内边距是透明的。

margin(外边距)：清除边框外的区域，外边距是透明的。

扩展资料

内容区是盒子模型的中心，它呈现了盒子的主要信息内容，这些内容可以是文本、图片等多种类型。内容区有三个属性，width、height 和overflow。使用width和height属性可以指定盒子内容区的高度和宽度，当内容信息太多，超出内容区所占范围时，可以使用overflow 溢出属性来指定处理方法。

当overflow 属性值为hidden时，溢出部分将不可见；为visible时，溢出的内容信息可见，只是被呈现在盒子的外部；当为scroll时，滚动条将被自动添加到盒子中，用户可以通过拉动滚动条显示内容信息；当为auto时，将由浏览器决定如何处理溢出部分。

分为标准盒模型和怪异盒模型。
作用：控制元素与元素之间，或者元素和内容之间的位置关系的。盒模型主要是有四个属性构成的。

盒模型=center（内容区）+border（边框）+padding（填充区）+margin（外边界区）