CSS属性之盒子模型（Box Model）

网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。
这些属性我们可以用日常生活中的常见事物——盒子(箱子)作一个比喻来理解，所以叫它盒子模式。
CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。
结构：
1、内容（content），指的就是装的东西。
2、填充（padding），指的是防止重要的东西损坏而添加的泡沫或者其它抗震的辅助材料。
3、边框（border），指的就是盒子本身。
4、边界（margin），指的盒子摆放的时候的不能全部堆在一起，要留一定空隙、空间保持通风，同时也为了方便取出。

在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的，填充只有宽度属性，每个HTML标记都可看作一个盒子。

---以上内容摘至于百度全科

一、盒子模式概念

1、生活中的盒子

2、盒子模式（Box Model）

在网页布局中，为了能够使纷繁复杂的各个部分合理地进行组织，通过研究，总结出了一套完整的、行之有效的原则和规范，这就是“盒子模型”的由来。

在CSS中，一个独立的盒子模型由内容(content)、边框(border)、填充(padding)和边界(margin)4个部分组成：

• 内容(content)：对应盒内物品。
• 边框(border)：对应包装盒的纸壳，具有厚度。
• 填充(padding)：位于边框内部，是内容与边框的距离，对应包装盒的填充部分。
• 边界(margin)：位于边框外部，是边框外面周围的间隙，对应纸壳外围间隙。

二、盒子模式属性

1、内容（content）

内容只有宽度、高度，分别是width、height。

2、填充（padding）

用于控制内容与边框之间的距离，会占据空间。

可设置盒子模型上、右、下、左4个方向的内边距值，padding属性的值可以为0，即无内边距。

书写格式如：

padding-top: 1px;

padding-right: 1px;

padding-bottom: 1px;

padding-left: 1px;

缩写格式：

padding: 1px 1px 1px 1px;

3、边框（border）

用于分隔不同元素，会占据空间，有4条边框、可无边框（设置为0）。

语法：border: border-width||border-style||border-color;

缩写：border: 2px solid red;

注：

border-style--边框的样式：

• solid--实线边框
• dashed--虚线边框
• double--双线边框
• groove--根据 border-color 的值画3D凹槽
  
• ridge--根据 border-color 的值画3D凸槽
  
• inset--根据 border-color 的值画3D凹边
  
• outset--根据 border-color 的值画3D凸边
  

 

4、边界

用于控制元素之间的距离，会占据空间。

可设置盒子模型上、右、下、左4个方向的外边距值；margin属性的值可以为0，即无外边距。

注：body本身是个盒子，默认情况下，有若干像素填充、边界。

由于不同浏览器的内外边距不同，所以统一使用body,div{padding: 0;margin: 0;}清除默认的内外边距。不建议使用*｛padding: 0;margin: 0;｝

5、盒子模式的总尺寸

盒子模式的总尺寸=margin+border-width+padding+content(宽度/高度)

元素的尺寸=border-width+padding+content(宽度/高度)

如下：

#div1 {
	    width: 100px;
		height: 100px;
		padding: 70px;
		border: 70px solid red;
		margin: 40px;
		background-color: blue;
		color: white;
		text-align: center;
	  }

div的尺寸=border-left + padding-left + content + padding-right + border-right

= 70 + 70 + 100 + 70 + 70 = 380px