4. css弹性盒子模型
备注 ：我们需要在不同设备的不同尺寸屏幕下去浏览网页，传统的网页布局方式很难满足响应式布局的需要。因此css3提出了一些全新的布局属性，包括： 弹性盒子模型 ， 多列属性 ， 响应式布局 等等。弹性盒子模型的最大特征在于动态修改子元素的宽度和高度，以满足在不同尺寸屏幕下的恰当布局。
说明 ：盒子模型的内容范围包括内容(content)、内边距(padding)、边框(border)和外边距(margin)。盒子模型就是通过div和css样式来设计一个可以添加逻辑的效果。
备注 ：内边距(padding)在 content 外，边框内。内边距有1个参数时，上下左右外边距都为该参数值；2个参数时，第一个参数为 上下 外边距值，第二个参数为 左右 外边距值；4个参数分别代表 上右下左 外边距值。
边框可以创造出效果出色的边框，并可以应用于任何元素。 基本的边框属性 ：
简化写法
备注： border: 1px solid red; 三个参数分别为边框的宽度、样式和颜色属性。
css3提供的边框属性
eg1 ：圆角边框的绘制
阴影属性(box-shadow)的4个参数分别代表：背景阴影 向右 移动10个像素，再 向下 移动20个像素；阴影 透明度 ；阴影 颜色 。
备注：围绕在内容边框的区域就是外边距(margin)，外边距默认是透明区域，外边距接受任何长度单位和百分数值。外边距和内边距的属性比较相似。margin的参数个数和对应代表大含义和padding一致。
盒子模型示例
说明：最外层的div为容器层，之后为边框、内边距和内容区域。
说明：外边距合并就是一个叠加的概念。外边距合并遵循边距大的一方，即元素1的外边距为10px，元素2的外边距为20px,则元素1和元素2间的距离为20px；元素1的外边距为10px，元素2的外边距为10px,则元素1和元素2间的距离为10px。
(1) 弹性容器属性
(2) 弹性子元素属性
eg1 ：
