理解标准盒模型和怪异模式&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 条评论
登录 后参与评论

相关文章

来自专栏CDA数据分析师

【收藏】Excel中常用的十五招儿!

? 本文转自网络 1、快速填充公式 ? 2、最快求和 ? 3、对合并单元格求和 ? 4、设置列宽的3种方法 ? 5、以cm为单位设置行高列宽 ? 6、输入0开...

3426
来自专栏章鱼的慢慢技术路

使用Photoshop合成两张不完整的图片

1352
来自专栏LIN_ZONE

css 中 zoom和transform:scale的区别(转载)

还在几年前,zoom还只是IE浏览器自己私有的玩具,但是,现在,除了FireFox浏览器,其他,尤其Chrome和移动端浏览器已经很好支持zoom属性了:

623
来自专栏前端那些事

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

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

660
来自专栏一个小程序员的成长笔记

CSS深入理解学习笔记之border

1、border-width   border-width为何不支持百分比:语义和使用场景决定的,现实中各种边框本身的概念就不存在百分比的使用方法。   bor...

2979
来自专栏数据小魔方

动态图表12|滑块(函数+名称管理器)

今天要跟大家分享的是动态图表12—滑块(函数+名称管理器)! 今天要讲的这篇与前一篇的步骤基本一致,但是所用到的控件工具有所不同。 步骤: 插入滑块(设置数据...

3134
来自专栏一棹烟波

OpenCV3.0 HDR(高动态范围)示例代码以及用法

OpenCV 3.0以及以后版本集成了HDR算法,样例代码的路径为: .\sources\samples\cpp\tutorial_code\photo\hdr...

2396
来自专栏Java成神之路

Android基础_2 Activity线性布局和表格布局

在activity的布局中,线性布局和表格布局是最简单的,这次分别从线性布局,表格布局以及线性布局和表格混合布局做了实验,实验中只需要编写 相应的xml的代码,...

522
来自专栏来自地球男人的部落格

使用BibTex格式时缩小参考文献的字体

在使用BibTex写参考文献的时候,所有参考文献通常是写在一个后缀为.bib文件当中。例如:所有的参考文献按照bibtex格式写在references.b...

2089
来自专栏我的博客

关于html中map标签的看法和总结

先说前言吧,前些日子一直在做一个项目开发没空来写博客~~今天遇到一个很棘手的问题。就是一个相对于图片定位热区和div的问题 要求: 1、把一个图片分隔成很多矩形...

3045

扫码关注云+社区