前端笔记——什么是盒模型？

前端基础必备的基础知识——盒模型

盒模型是前端css布局的基石，它规定了网页元素如何显示以及元素间相互关系。之所以被称为盒模型，从文字的字面上就可以理解，肯定跟盒子有关，css定义所有的元素都可以拥有像盒子一样的外形和平面空间。

盒模型的组成：内容区（盒子内的物品）、补白/填充（物品跟盒壁的间距）、边框（盒字的厚度）、边界/外边距（盒子外面的空间）。

盒模型里面主要有两大属性，分别是padding跟margin，这两个属性主要用来设置跟改变内容跟盒子的位置关系。下面我们分别看看他们各自的属性。
padding的属性如下：

padding 简写属性在一个声明中设置所有填充属性。该属性可以有1到4个值。

实例:
四个属性：

 padding:1px 2px 3px 4px;/* 上填充是 1px；右填充是 2px；下填充是 3px；左填充是 4px */

三个属性：

 padding: 1px 2px 3px;/* 上填充和下填充是 1px；右填充和左填充是 2px */

padding:1px 2px;（上填充和下填充是 1px；右填充和左填充是 2px）

两个属性：

padding: 1px 2px;/* 上下填充为1px；左右填充为2px */

一个属性：

padding: 1px ；/* 所有四个填充都是 1px */

注意： padding的值不能为负数！

margin属性如下：

实例:
四个属性：

  margin: 1px 2px 3px 4px;/* 上边距是 1px；右边距是 2px；下边距是 3px；左边距是 4px。填充的顺序为：上右下左  顺时针 */

三个属性：

 margin:1px 2px 3px;/* 上边距是 1px；右边距和左边距是 2px；下边距是 3px */

两个属性：

	 margin:1px 2px;/* 上边距和下边距是 1px；右边距和左边距是 2px */

一个属性：

margin:1px;/* 所有四个边距都是 1px */

注意： margin是允许负值的！

border属性：
border（边框）：,网页中很多修饰性线条都是由边框来实现的。他的常见属性有：
边框宽度：border-width:
边框颜色：border-color:
边框样式：border-style:solid(实线)/dashed(虚线)dotted(点划线)double(双线)
border: 边框大小 边框风格 边框颜色;

实例：

border: 2px solid red;/* 代表边框宽度为2个像素  实线型 颜色为red的边框。 */

标准盒模型的大小计算：

计算的公式为：
盒子模型的实际宽度:
盒子模型的实际长度:
宽度 =width+padding+border
其中
padding包括padding-left跟padding-right
border包括border-left跟border-right

高度 =width+padding+上下border
同理：
padding包括padding-top跟padding-bottom
border包括border-top跟border-bottom