CSS-标准盒模型 & 怪异盒模型

CSS中Box model分类

CSS中Box model是分为两种:: W3C标准 和 IE标准盒子模型。

大多数浏览器采用W3C标准模型,而IE中则采用Microsoft自己的标准。

怪异模式是“部分浏览器在支持W3C标准的同时还保留了原来的解析模式”,怪异模式主要表现在IE内核的浏览器。

当不对doctype进行定义时,会触发怪异模式。

在标准模式下,一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)

在怪异模式下,一个块的总宽度= width + margin(左右)(即width已经包含了padding和border值)

CSS3的box-sizing

box-sizing语法:

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

当设置为box-sizing:content-box时,将采用标准模式解析计算,也是默认模式;

当设置为box-sizing:border-box时,将采用怪异模式解析计算;

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 盒模型一共有两种模式:W3C标准模式和IE怪异模式大多数浏览器采用W3C标准模式,IE采用自己的标准当用编辑器新建...
    宁小姐的慢时光阅读 11,196评论 1 2
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,686评论 1 92
  • 1.行内元素和块级元素?img算什么?行内元素怎么转化为块级元素? 行内元素:和有他元素都在一行上,高度、行高及外...
    极乐君阅读 7,227评论 0 20
  • 就刚刚,去了趟身边的动物园。挺热闹的,只是这是我去过的最小的动物园了,动物也不是太多。 唐伯虎为之哭泣过的小强,也...
    知否读书阅读 2,713评论 0 0
  • 图片发自简书App 01 最近,随着北京房价连续上涨几次,不少新闻与文章都是关于买房。一类是现在这房价,买了就是房...
    喻立明阅读 5,803评论 49 44