理解标准盒模型和怪异模式&box-sizing属性

盒子模型 主要有两种,w3c标准盒模型,IE下的怪异盒模型,其实还有就是弹性盒模型(上篇文章我们用他很好的解决了对齐问题)

DTD规范

盒模型分为:标准w3c盒模型、IE盒模型、以及css中的伸缩盒模型

当我们使用编辑器创建一个html页面时,我们一定会发现最顶上的DOCTYPE标签

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML>

这些doctype都是标准的文档类型,无论我们使用哪种模式都会触发标准模式,而如果doctype缺失,则在ie6、ie7、ie8将会触发怪异模式(quirks);

一旦为页面设置了恰当的DTD(文档定义类型),大多数浏览器都会按照标准盒模型来呈现内容,但是ie5和ie6的呈现却是不正确的.

根据w3c规范,元素内容占据空间是由width属性设置的,而内容周围的padding和border都是另外计算的。

不幸的是,IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度,而是内容、内边距和边框的宽度的总和。

举个栗子

我们用一个div块来演示标准模式和怪异模式的区别:

.box{
    width:200px;
    height:200px;
    border:20px solid black;
    padding:50px;
    margin:50px;
}

标准盒模型

在标准模式下的盒模型如下图所示,盒子总宽度/高度=width/height+padding+border+margin

怪异模式

在怪异模式下的盒模型如下图所示,盒子的总宽度和高度是包含内边距padding和边框border宽度在内的

盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin;

也即是说 width = 内容区宽度 + padding + border

CSS3的box-sizing属性

语法:

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

在css3中新增了box-sizing属性,具备了以上知识后,我们已经理解:

  • 当为content-box时,将采取标准模式进行解析计算
  • 当为border-box时,将采取怪异模式解析计算
  • 当为inherit时,将从父元素来继承box-sizing属性的值

参考

标准模式,怪异盒模型&box-sizing属性 w3c盒模型浏览器兼容性

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏walterlv - 吕毅的博客

WPF/UWP 的 Grid 布局竟然有 Bug,还不止一个!了解 Grid 中那些未定义的布局规则

发布于 2018-05-05 07:43 更新于 2018-08...

641
来自专栏知晓程序

如何用 1 张图说 100 次我爱你?这个小程序帮你搞定

本期,知晓程序推荐的「字云」小程序,就能帮你用文字一键生成「图文并茂」的个性图片。

1054
来自专栏数据小魔方

柱形趋势图

今天跟大家分享的是柱形趋势图! ▽▼▽ 这种图表在功能上很类似之前有几期分享的各种组图,不过柱形趋势图在表达周期性数据趋势方面,给读者的冲击力会更加明显一点儿。...

3686
来自专栏数据小魔方

创意玫瑰图2(Rose Chart)

今天跟大家分享另一种创意玫瑰图的制作方法! ▽ 本例所要讲的玫瑰图,制作方法稍微麻烦一点,主要是在数据组织环节比较繁琐,但是没有涉及到VBA的问题,所以只要动手...

2676
来自专栏Material Design组件

Human Interface Guidelines — Segmented Controls

1354
来自专栏数据小魔方

蝴蝶图(升级版)

今天跟大家分享的是另一种升级版的条形蝴蝶图! ▽▼▽ 之前曾出过一期关于蝴蝶图的教程,是一个关于Facebook、Twitter用户年龄分布的图表,今天之所以还...

3206
来自专栏阿凯的Excel

巧妙设置目标红线(Excel绘制图表系列课程)

应朋友要求,让我分享几期Excel的图表绘制,其实内心是拒绝的。 为啥尼,因为讲图表绘制的截图要很多很多,不过看在他说有好处的份上,我就无节操的分享几期。 ...

2904
来自专栏数据小魔方

图表案例——简约却不简单的图表制作技巧

我们通常看到的小而美的图表,一般都是经过图表制作者深层次加工过的成品。 而要想了解一个规范的商务图表制作过程,对图表的拆解与还原就显得非常重要。 今天的案例是关...

3669
来自专栏Android群英传

花式实现图片3D翻转效果

1641
来自专栏前端萌媛的成长之路

前端语义化

1734

扫码关注云+社区