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

CSS3 box-sizing

小麻雀 2016-04-08 15:31:12 浏览517 评论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

版权声明:本文内容由互联网用户自发贡献,版权归作者所有,本社区不拥有所有权,也不承担相关法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:yqgroup@service.aliyun.com 进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。

用云栖社区APP,舒服~

【云栖快讯】中办国办印发《推进互联网协议第六版(IPv6)规模部署行动计划》加快推进基于 IPv6 的下一代互联网规模部署,计划指出2025年末中国 IPv6 规模要达到世界第一,阿里云也第一时间宣布了将全面提供IPv6服务,那么在全面部署 IPV6 前,你需要了解都在这儿  详情请点击

网友评论