CSS（一）：盒子模型详解
盒子模型概述：
一个个页面其实就是一个个盒子，前端工程师需要了解盒子架构、并进行合理的规划才能得到一个优雅的页面，可以根据自己的需求快速的改动页面。
盒子模型，英文即box model，盒子模型分为两个标准：
- 标准盒模型（W3C盒子）：内容宽度（content）= 定义的宽度（width）
不包含内边距（padding）、边框（border）、外边距（margin）
- IE盒模型（推荐使用IE盒模型）：内容宽度（content）= 内边距（padding）+边框（border）
不包含外边距（margin）
如果html文件在开头定义了<!DOCTYPE html>，采用的就是W3C盒子
<!DOCTYPE html>
<html>
<head>
<title>检测是否是盒子模型</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var strTmp = "您打开的页面是：";
if ($.support.boxModel) { //是W3C盒子模型
strTmp += "W3C盒子模型";
}
else { //是IE盒子模型
strTmp += "IE盒子模型";
}
$(".content").html(strTmp);
});
</script>
</head>
<body>
<div id="divtest">
<div class="title">
<span class="fl">检测是否是盒子模型</span>
</div>
<div class="content"></div>
</div>
</body>
</html>
盒子属性：
一个盒子中主要的属性就5个：width、height、padding、border、margin。
从直观上而言，倘若将盒子模型比作展览馆里展出的一幅幅画，
那么content就是画面本身，padding就是画面与画框之间的留白，border就是画框，而margin就是画与画之间的距离。
如下：
-
- width和height：内容的宽度、高度（不是盒子的宽度、高度），下图蓝色部分。
- padding：内边距，下图绿色部分。
- border：边框，下图黑色实线与绿色虚线之间。
- margin：外边距，下图最外层虚线与黑色实现之间。
- 盒子示意图（右图）：
浏览器默认html的 padding、margin为零,但是body的padding为零，margin：8px
错误的理解：
body标签有必要强调一下，很多人以为body标签占据的是整个页面的全部区域，其实是错误的。
正确的理解：
整个网页最大的盒子是html即document，即浏览器,而body是html的儿子。
浏览器给body默认的margin大小是8个像素，body的高度是由body内的元素撑起来的或者自定高度，从而占据了整个页面的一大部分区域，而不是全部区域。
如图：蓝色为html背景色，红色为body的背景色
计算盒子的总宽高
盒子总宽度 = 左border + 左padding + content + 右padding + 右border
即 width = border （宽）+ padding（宽） + content（设置的width）
盒子总高度 = 上border + 下padding + content + 上padding + 下border
即 width = border（高） + padding （高）+ content（设置的width）
.box1{
width: 100px;
height: 100px;
padding: 100px;
border: 1px solid red;
}
.box2{
width: 250px;
height: 250px;
padding: 25px;
border: 1px solid red;
}
答案：上面两个盒子，盒子占有宽高，都是302*302：
如果想保持一个盒子的真实占有宽度不变，
那么加width的时候就要减padding，加padding的时候就要减width。
因为盒子变胖了是灾难性的，这会把别的盒子挤下去。
以上操作不用区分到底是哪个盒模型。
认识padding、margin
padding就是内边距，padding的区域有背景颜色
分属性写法
padding-top: 30px; padding-right: 20px; padding-bottom: 40px; padding-left: 100px;
综合属性写法;
padding:30px 20px 40px 100px;
如果写了四个值，则顺序为：上、右、下、左。
如果只写了三个值，则顺序为：上、右、下。左和右一样。
如果只写了两个值，比如说：
padding: 30px 40px;
则顺序等价于：30px 40px 30px 40px;
要懂得，用小属性层叠大属性。比如：
padding: 20px;
padding-left: 30px;
上面的padding对应盒子模型为：
下面的写法：
padding-left: 30px;
padding: 20px;
第一行的小属性无效，因为被第二行的大属性层叠掉了。
padding与margin同理
会做以下题型说明你了解盒模型——盒模型题库
一些元素，默认带有padding
所以，我们做站的时候，为了便于控制，总是喜欢清除这个默认的padding。
可以使用*进行清除
*{ margin: 0; padding: 0; }
但是，*的效率不高，所以我们使用并集选择器，罗列所有的标签（不用背，有专业的清除默认样式的样式表）：
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td
{ margin:0; padding:0; }
认识border
border就是边框。边框有三个要素：像素（粗细）、线型、颜色。
颜色如果不写，默认是黑色。另外两个属性不写，要命了，显示不出来边框。
border的所有的线型如下：
比如border:10px ridge red;这个属性，在chrome和firefox、IE中有细微差别：（因为可以显示出效果，因此并不是兼容性问题，只是有细微差别而已）
如果公司里面的设计师是处女座的，追求极高的页面还原度，那么不能使用css来制作边框。就要用到图片，就要切图了。
所以，比较稳定的border-style就几个：solid、dashed、dotted。
border是一个大综合属性。比如说：
border:1px solid red;
就是把4个边框，都设置为1px宽度、线型实线、red颜色。
border属性是能够被拆开的，有两大种拆开的方式：
- （1）按三要素拆开：border-width、border-style、border-color。（2）按方向拆开：border-top、border-right、border-bottom、border-left。
- （一个border属性是由三个小属性综合而成的）
现在我们明白了：一个border属性，是由三个小属性综合而成的。如果某一个小属性后面是空格隔开的多个值，那么就是上右下左的顺序。举例如下：
border-width:10px 20px; border-style:solid dashed dotted; border-color:red green blue yellow;
效果如下：
（1）按三要素拆：
border-width:10px; //边框宽度 border-style:solid; //线型 border-color:red; //颜色。
等价于：
border:10px solid red;
(2)按方向来拆：
border-top:10px solid red; border-right:10px solid red; border-bottom:10px solid red; border-left:10px solid red;
等价于：
border:10px solid red;
（3）按三要素和方向来拆：(就是把每个方向的，每个要素拆开。3*4 = 12)
border-top-width:10px; border-top-style:solid; border-top-color:red; border-right-width:10px; border-right-style:solid; border-right-color:red; border-bottom-width:10px; border-bottom-style:solid; border-bottom-color:red; border-left-width:10px; border-left-style:solid; border-left-color:red;
等价于：
border:10px solid red;
工作中到底用什么？很简答：什么简单用什么。但要懂得，用小属性层叠大属性。举例如下：
为了实现上方效果，写法如下：
border:10px solid red;
border-right-color:blue;
为了实现上方效果，写法如下：
border:10px solid red;
border-style:solid dashed;
border可以没有：border:none;
可以某一条边没有：border-left: none;
也可以调整左边边框的宽度为0：border-left-width: 0;
