作为web前端程序猿，虽然应该重点关注js，但基本的css应该也要“彻底”弄清楚，我们都知道盒子模型有两种：ie盒子和w3c标准盒子
要说明一下的是：ie并不是不支持w3c标准的盒子，只要在网页顶部去掉doctype的声明，ie会采用ie盒子； 反之则采用w3c盒子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<head>
<style>
	.limitOuter{
		width:100px;
		height:100px;
		border:5px solid green;
		padding:10px;
		margin:10px;
		background-color: red;
	}
	.limitContent{
		background-color: blue;
	}
</style>
</head>
<body>
	<div class="limitOuter">
		<div class="limitContent"></div>
	</div>
</body>
<script>
	console.log(document.querySelector('.limitOuter').offsetWidth);	//chrome中130，		ie中100
	console.log(document.querySelector('.limitContent').offsetWidth);	//chrome中100，		ie中70
</script>
</html>

可以看出ie设置width,包括了border和padding； w3c中width则只是content的width，整个元素的offsetWidth还包括了border和padding；

这个在排版的时候很重要，比如两个li排成一列，最好设定li宽度50%； 之后为了让内部元素不撑开外部元素，应该使用内部元素的margin来形成间距； 而不是直接在li上设定padding

##延伸
css3中出现了新的盒子模型：弹性盒子模型，在很多地方我们会看到display:flex, box, flexbox三种方式

display: box - This was the first flexible box model that was accepted as the newest model around the year 2009. Don’t use it.

display: flexbox - This flexible box model came in the year 2011 which was still in its development. Don’t use it.

display: flex - This is the newest flexible box model that currently finds its place as the latest box standard. This might further undergo some changes but this is preferred to the other two standards.

其实都是盒子模型，不过是不同的时期的不同模型
flex对应如下属性：
flex-direction:
flex-wrap:
flex-flow: flex-direction,flex-wrap的简写
justify-content:
align-items:
align-content:
flex属性简介

与之对应box有如下属性：
box-orient:
box-direction:
box-lines:
box-align:
box-pack:
box-orient 属性指定一个box子元素是否应按水平或垂直排列。
Tip: 水平方向的box里的子元素是由左到右显示，垂直方向的box显示从上到下排列。然而，box-direction方向可由 box-ordinal-group属性改变这个顺序。