css盒子模型 - 初识CSS必会的盒子模型，非常详细的讲解，望帮助到初学者。

#初学CSS必须要会的盒子模型：
###首先，我先给你们介绍一下与盒子模型有关的CSS属性。
####1.margin：
该属性为外边框，包含四个值：margin-top、margin-right、margin-bottom、margin-left.
分别为上、右、下、左外边框。（要记住这个上右下左的顺序，其他属性也会用到。）
margin是可以直接写一个值(即上右下左四个边框都为40px)，例如：

css代码：

#simple{
	margin:40px;
}

等同于：

#simple{
	margin-top:40px;
	margin-right:40px;
	margin-left:40px;
	margin-bottom:40px;
}

同理，如果margin后面跟两个值（40px,100px），则代表上下边框为40px，左右边框为100px。

css代码：

#simple{
	margin:40px 100px;
}

如果是四个值（10px,20px,30px,40px），则代表上右下左边框分别为10px,20px,30px,40px。
margin-top、margin-right、margin-bottom、margin-left这四个属性可以单独出现，用于单独设置外边框属性的情况。
####2.padding：该属性为内边框，用法同于margin，学会使用margin就学会了padding。
####3.border：该属性为边框属性（也可以理解为边线，描边），与margin相同有四个值，同为上右下左顺序。不同的是它多了两个值，分别为border-style、border-color.
####4.还有一点就是内容。这指的不是属性，是你标签设置的宽度和高度（也可以说盒子的最大容量），而且你在标签中加入的东西（子标签）的宽度如果大于你的盒子（父标签）根据标签的属性可能会扩大你的父标签。这点先不用理解。

###这时候，我们引入盒子模型的概念，为什么要明白盒子模型？

我们用一个浏览器随意打开一个网页，然后右键选择“检查”或者“查看元素”。如下面两个图，不同浏览器盒子的样子也是不同的。
找到盒子

这里我用Firefox浏览器做示范。

火狐盒模型

我们能看到我随机选择的这个元素的内容部分大小是500*22。然后呢，这个盒模型上面，还有三个属性：分别是外边距（margin），边框（border），填充（padding）。

所以这个盒模型所占页面的宽度为：7（左外边距）+0（左边框）+0（左填充）+500（元素宽度）+0（右填充）+0（右边框）+0（右外边距）=507（默认单位为像素）。
学会宽度计算，这个盒模型所占页面的高度应该就会了吧？不妨自己动手动脑试试计算吧。（页面上的为28像素）
####这时候，大家一定有这样一个疑问，为什么要算这个值？
#####因为我们在前端开发的时候，一个页面是由若干个元素组成，你若想让他们整齐排列，或者说按照你的意愿排布，你就不得不有一个设计页面的过程，设计页面就免不了一个精确的计算完成页面效果（在做项目时，一般都是做效果图的人计算，然后拿给你，按照他给的尺寸做出来）

###现在，我们来讲几个例子。
####1.这是一个宽度、高度都为100像素的背景色为黑色的盒子。

<div id="div1" style="width:100px;height:100px;background-color:#000;"></div>

div1效果
####2.这是一个宽度、高度为100像素，外边距为50像素背景色为红色的盒子（div1）。

<div id="div2" style="width:100px;height:100px;background-color:#CC0000;margin:50px"></div>

div2效果

很明显，能看到这个盒子比上一个盒子距离浏览器的两边都远了，这时候，我们在红色盒子（div2）下面再加上div1。

div1、div2对比

两个盒子中间有距离，这是因为我们设置了margin:10px的属性，让红色盒子（div2）的四边外边距都等于50px，所以红色盒子整个的大小应该是宽高各200px。
（宽度=左外边距+右外边距+div宽度，同理高度也是这么得出来的）

这里写图片描述

##*问题：
###1.如果一个宽高各100px的盒子margin-top为20px，margin-right为30px，padding-left为33px，padding-right为28px，border为1px，那么这个盒子实际占页面的宽、高分别为多少？
（正确答案：宽：193px,高：122px）
如果你得到的值有1-2px的偏差说明你忘了加上border，而且无论高还是宽都不能忘了border的上右下左都为1px。
###2.一个盒子有如下属性：

#box
{
	width:50px;
	height:30px;
	padding:0 10 20 30;
	margin:1 5 5 10;
	border:3px solid #eee;
}

###那么它的所占宽、高是多少呢？
（正确答案：宽：111px，高：62px）

如果这个博客看到这里，上面两个问题可以做出来，或者是已经理解，说明你已经基本掌握了盒模型。
如果有什么问题，欢迎楼下提问。