CSS3 box-sizing

CSS Box model

分两种:

  1. W3C标准模型

  2. IE的传统模型(IE5.x以及Quirks模式的IE 6、7)

box-model-layout


bos-sizing与盒模型的关系

  1. 三种取值:

    • box-sizing: content-box;  W3C标准box model

    • box-sizing: border-box;  IE传统box model

    • box-sizing: inherit;

  2. Demo

  3. 优点

    有时候临时加上border和padding会把布局打乱。

  4. 浏览器兼容性

    box-sizing兼容浏览器时需要加上各自的前缀。

    box-sizing-browers

  5. 对于Quirks model 的IE 6、7不支持box-sizing

    采用CSS hack: *

    参考链接:http://www.w3cplus.com/content/css3-box-sizing

麻凯倩

微信:makaiqian