CSS3完善和模式

CSS3改善了传统盒模型架构,增强盒子构成要素的功能,扩展了盒模型显示的方式,具体描述如下

  •   改善构造:除了传统的内容区域,边框区,补白区和边界区外,为盒子新增了轮廓区。

  •   增强功能:内容增强CSS自动添加内容功能,增强内容溢出、换行处理,匀速多重定义背景图,控制背景图显示方式等;增加背景图边框,多重边框,圆角边框,等功能;完善margin:auto;布局特性。

  •   扩展显示:完善传统的块显示特性,增强弹性,伸缩盒显示功能,丰富网页布局手段。

定义显示方式

  为了兼顾IE的怪异模式,CSS3对盒模式进行了改善,定义了box-sizing属性,该属性能够事先定义盒模式尺寸解析方式。box-sizing属性的基本语法如下

    box-sizing:content-box | border-box | inherit;

    box-sizing属性初始值为content-box,适合所有能够定义宽高的元素,取值说明:

      content-box:该属性将维持css2.1盒模式的组成模式,既元素,width/height=border+padding+content。

      border-box:该属性值将重新定义css2.1盒模式组成模式,既元素,width/height=content;

理解:

  如果这个CSS不写 默认就是content-box

    content-box :border和padding不算入width中。比如:一个100px的宽度的div,如果他的padding值为20px,border为5px,那么他的实际宽度就为100 + 20*2 + 5*2 = 150px

    border-box :border和padding算入width中。比如:一个100px的宽度的div,如果他的padding值为20px,border为5px,那么他的内容宽度就为100 - 40*2 - 5*2 = 10px。