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

一、区别

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

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

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

如图:

标准盒模型


怪异盒模型

二、box-sizing的使用场景

box-sizing语法:

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

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

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

目前自己遇到的需要用到非默认模式(即怪异盒模型)的情况:

当两个块级元素并排排在一起刚好等于父级元素区域时,再添加内边距或边框,就需要用到怪异盒模型,不然就出现把另一个元素“挤下去”的情况。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,696评论 1 92
  • 盒模型一共有两种模式:W3C标准模式和IE怪异模式大多数浏览器采用W3C标准模式,IE采用自己的标准当用编辑器新建...
    宁小姐的慢时光阅读 11,200评论 1 2
  • CSS中Box model分类 CSS中Box model是分为两种:: W3C标准 和 IE标准盒子模型。 大多...
    xf0128阅读 3,493评论 0 1
  • 连着下了几天的雨,在今天终于见到了久违的太阳,窗台上的植物们也终于不在蔫蔫的、耷拉着,心情也就自然的畅快起来。心说...
    一只藕阅读 1,319评论 0 0
  • 才收暑气似回春,遍处难寻梦里人。 西陆怕闻屋后雨,淅淅沥沥过黄昏。
    何处拾珠阅读 1,400评论 0 2

友情链接更多精彩内容