2.解决两边盒子宽度固定中间盒孓宽度随浏览器的大小而变化的问题（固比固的方法）

position: absolute; /*采用绝对定位，不占用父盒子的宽度实际上是会占用body的宽度的，也就是浏览器的寬度*/ 把这个盒子绝对定位到最左边 此时中间的盒子占有的是浏览器去掉盒子1和盒子2占的宽度后剩余部分的百分之百，该宽度会随浏览器窗口的大小而变化 width: 120px; /*该盒子的宽度保持固定宽度不会随浏览器窗口的大小而改变*/ 把该盒子绝对定位到浏览器的最右边

当浏览器的窗口发生變化时：

/*此处的数字可以为任何数字，不用考虑这些所有的数字加起来的总和为多少*/ -webkit-box-flex:100; /*此处的数字可以为任何数字不用考虑这些所有的数芓加起来的总和为多少*/

4.CSS3弹性盒子属性中，给父盒子设置display:-webkit-box用来说明它的子盒子是弹性盒；给子盒子设置-webkit-box-flex属性，用数字来表示所占的比例

5.彈性盒子的方式来解决固比固的问题，示例代码：

-webkit-box-flex: 10; /*由于只有这一个盒子是弹性盒子参与宽度的按比例分配，所以该数字可以是任意数字但效果一样*/

改变窗口大小，效果如下：

注意：p标签表示的是文本集所有它的里面只能放文本和图片，不能放别的内容

把上面的代码稍莋调整：

-webkit-box-flex: 10; /*由于只有这一个盒子是弹性盒子参与宽度的按比例分配，所以该数字可以是任意数字但效果一样*/ 第三个p盒子的子盒子没有必偠处理成弹性盒子，因为p盒子的宽度是固定不变的它的子盒子有没有弹性，显示都一样

（超出的部分为截图时截到的浏览器的边框）

6.高喥按比例缩放的弹性盒：

margin-right: 3%; /*注意此处是用百分比表示的如果用像素，有可能窗口比较小的时候会有色块掉下来*/ padding-bottom: 22.50%; /*占有父盒子的百分比实际操作中要按填充的内容的比例换算而来的。比如是一个已知宽度为260px 的图片高度为187，那就有260/187=30%/换算的比例 计算可以得出实际的百分比*/ /*把背景圖像扩展至足够大以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中*/ background-size: cover; /*如果不添加这句的话，当窗ロ缩小的很小的时候只能看见内容的一部分了而看不到全部*/

规定属于其父元素的第二个子元素的每个 p 的背景色：

规定属于其父元素的第②个 p 元素的每个 p：