CSS3 box-sizing

  1. 云栖社区>
  2. 博客列表>
  3. 正文

CSS3 box-sizing

小麻雀 2016-04-08 15:31:12 浏览736 评论0

摘要: CSS Box model 分两种: W3C标准模型 IE的传统模型(IE5.x以及Quirks模式的IE 6、7) bos-sizing与盒模型的关系 三种取值: box-sizing: content-box;  W3C标准box model box-sizing: border-box;  IE传统box model box-sizing: inherit; Demo http://codepen.io/makaiqian/pen/sqzxj 优点 有时候临时加上border和padding会把布局打乱。

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

用云栖社区APP,舒服~

【云栖快讯】诚邀你用自己的技术能力来用心回答每一个问题,通过回答传承技术知识、经验、心得,问答专家期待你加入!  详情请点击

网友评论