盒子在浏览器中所占空间-width\height\padding\border\margin

一、正常文档流中块级元素的css属性
大家都知道，一个正常的盒子由里向外都是由内容、padding、border、margin组成。
1. 平常设置的width:200px; //指的是内容的宽度
width:200px;
height: 150px;
padding:10px;
border:2px dotted #000;
margin:20px;

2. 浏览器中显示的盒子的宽度=内容width+2*padding+2*border,高度=内容height+2*padding+2*border。 实际占有的空间kuan为显示宽度+2*margin, gao为显示高度+2*margin。
3. 添加一个同样的盒子后：盒子是以上一个盒子的下边框为起点开始占位的，而非margin。

二、使用float属性后的占空分析
1. 盒子两列布局后的占空分析
当父元素的总宽度大于等于两个子元素实际所占总空间宽度之和时，左侧盒子以父元素左边为参考点，右侧盒子以父元素右边为参考点。

若是想保证父元素恰好能包裹子元素，那么需要设置父元素的宽度=两个子元素实际所占总空间宽度之和。
当父元素宽度小于此临界点宽度时，右侧盒子将会被挤下来。

顺便提一句float:浮动—-浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。float:right;//找右边框
float:left;//找左边框