20180821面试题_1(CSS盒子模型 )

CSS盒子模型
一个盒子中主要的属性就5个：width、height、padding、border、margin。如下：
width和height：内容的宽度、高度（不是盒子的宽度、高度）。
padding：内边距。
border：边框。
margin：外边距。

TODO
经典盒子模型
https://blog.csdn.net/zwkkkk1/article/details/79678177
CSS3中几个新增加的盒模型属性使用教程
https://www.jb51.net/css/435232.html
box-flex主要让子容器针对父容器的宽度按一定规则进行划分
深入理解 CSS3 弹性盒布局模型
https://www.cnblogs.com/wyaocn/p/5813477.html

如果想要切换盒模型也很简单，这里需要借助css3的box-sizing属性
  box-sizing: content-box 是W3C盒子模型 （width指content部分的宽度）
  box-sizing: border-box 是IE盒子模型 （width表示content+padding+border这三个部分的宽度）
box-sizing的默认属性是content-box