1.通读了下w3cschool上的简介：css3 box-sizing 属性_w3cschool。
2.看简介理解的不够深刻，偶属于刚看完转眼就能忘记的人。出于对自己的不放心，还是老老实实把例子拿到线下看看：
这个 p 占据了左边的一半。.
这个 p 占据了右边的一半。
用火狐浏览器的firebug看看布局，更改box-sizing的属性为content-box（或者说去掉box-sizing，默认box-sizing:content-box）后，如下图所示。
对比后发现：
当类名为.container的父元素的box-sizing没有设置，即为默认值content-box时或者box-sizing:border-box时，分以下两种情况：
立即学习“前端免费学习笔记（深入）”；
（最外层的父元素）
1）当两个子元素的box-sizing:border-box时，width为208px，算上设置的border-left-width与border-right-width（都是16px）才是240px，即为父元素width的一半，如下图所示（左边为布局图，右边为页面实际效果）：（即为父元素width+border-left-width+border-right-width的一半）
本文档主要讲述的是UML 类图详解；在UML的静态机制中类图是一个重点，它不但是设计人员关心的核心，更是实现人员关注的核心。建模工具也主要根据类图来产生代码。类图在UML的9个图中占据了一个相当重要的地位。希望本文档会给有需要的朋友带来帮助；感兴趣的朋友可以过来看看
2）当两个子元素的box-sizing:content-box时，width为240px，padding与margin均被排除在外，如下图所示（左边为布局图，右边为页面实际效果）：
3.当给一个元素设置box-sizing:border-box时，实际就是令其 width = padding-left + padding-right + border-left-width + border-right-width，但是不包含margin-left与margin-right。
好了，总算明白些了。
