盒模型初步理解

盒模型

一、什么是盒模型

CSS假定所有的HTML文档元素都生成一个描述该元素在HTML文档布局中所占空间的矩形元素框，可以形象地将其看作是一个盒子。 最常见的标准盒模型就是，div标签添加内容(content)、内边距(padding)、边框(border)、外边距(margin)之后的样子。 如图所示：

二、盒模型在浏览器真实占据的宽、高

（1）在常见div的状态，一个未加边框（border）、外边距（margin）的盒子

注：【灰色区域是内填充（padding），白色区域是内容】

（2）在加入边框（border）之后，就发现如下原本的灰色区域外围多了一圈紫色，这圈紫色就是边框

（3）加入外边距（margin）之后就会发现，在灰色区域的紫色边框外围，与黑色方块产生了一些缝隙，这些缝隙就是margin

根据上面的图片和文字，你会逐渐发觉一个盒子的内容（content）、内填充（padding）、边框（border）、外边距（margin）位于哪里

大概也知道如何计算一个盒子的宽高，以及盒子在浏览器所占的真实空间

盒子的高=内容高+上、下内填充+上、下边框+上、下外边距
盒子的宽=内容的宽+左、右内填充+左、右边框+左、右外边距
真实空间：内容+padding+border+margin

三、有关内边距（padding）你所需要了解的

（1）作用:

			 a:控制子元素在父元素中的位置

（2）常见问题：
在实际的运用padding中，你常会发现自己使用padding来改变，自己本身有宽高的子元素的位置时,
子元素所在的父元素的宽高会跟着子元素的padding变化而变化，
破坏原有父元素的真实宽高，致使原有页面不和谐

（3）为什么会出现问题：

从上面的内容我们知晓了，盒子的宽高计算方式

盒子的高=内容高+上、下内填充+上、下边框+上、下外边距
盒子的宽=内容的宽+左、右内填充+左、右边框+左、右外边距

从公式看，盒子是把padding放入盒子计算范围中的
那么子元素就等同于父元素盒子中的内容，子元素使用padding改变自己的在父元素中的位置，就致使padding值的增加，由此导致了子元素增加padding值父元素跟着变大的现象出现。

（4）如何解决

只要将padding值对应在子元素的宽高中减去，父元素将不会再被撑大，子元素所想改变的位置依然会改变

注：上下都加了padding，就要在子元素的高中减去上下padding值
	左右都加了padding，就要在子元素的宽中减去左右padding值

四、有关外边距（margin）你所需要了解的

（1）作用：

	改变同级元素之间的间距

（2）margin合并bug

	当在同一个父元素内的同级子元素，垂直方向排列，两个子元素都设置了上下外边距，你会发现两个子元素的上下margin值合并了，
	且哪个子元素的margin值大，就最终显示哪个子元素的margin值

（3）如何解决

	A:用父元素padding替代
	B:子元素使用绝对定位
	C:子元素使用透明边框