理解标准盒模型和怪异模式&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属性的更多相关文章
- padding标准盒模型和怪异盒子模型
我们都知道padding是为块级元素设置内边距 但是在使用过程中,我们却会遇到一些问题.padding的标准盒模型和怪异盒模型 padding盒子模型 我们通过demo来讲这个问题,用文字干讲第一没意 ...
- 标准盒模型、怪异盒模型（box-sizing）
CSS中Box model是分为两种: W3C标准(标准盒模型) 和 IE标准盒子模型(怪异盒模型).大多数浏览器采用W3C标准模型,而IE中则采用Microsoft自己的标准. 重要的一个属性是bo ...
- div的标准盒模型和怪异盒模型
(1)标准盒模型 标准盒模型宽高不会被padding和margin撑开 (2)怪异盒模型 怪异盒模型宽高会被padding和margin撑开
- CSS3标准盒模型还是IE怪异模型box-sizing属性的应用设置
在一个文档中,每个元素都被表示为一个矩形的盒子.盒子模型具有4个属性['外边距(margin)','边框(border)','内边距(padding)','内容(content)']. 我们要设置某个 ...
- 怪异盒模型和标准盒模型--CSS
一,原理 css 属性:Box Moel分为两种:W3C标准和IE标准盒子模型. 大多数浏览器采用W3C标准模型,而IE中采用Microsoft自己的标准. 怪异模式是“部分浏览器在支持W3C标准的同 ...
- IE盒模型和标准盒模型
标准盒模型和ie盒模型(怪异盒模型) w3c标准盒模型 width和height不包括padding和border ie盒模型 width和height包含padding和border ie8以上都是 ...
- w3c标准盒模型与IE传统模型的区别
一.盒子模型(box model) 在HTML文档中的每个元素被描绘为矩形盒子.确定其大小,属性——比如颜色.背景.边框,及其位置是渲染引擎的目标. CSS下这些矩形盒子由标准盒模型描述.这个模型描述 ...
- boxsizing属性 IE盒模型和标准盒模型
CSS3有一个非常有用但应用不广泛的属性: box-sizing: content-box | border-box | inherit content-box,默认属性,遵从标准盒模型. borde ...
- 标准盒模型与IE盒模型之间的转换
首先上图,这两张很明显可以看出IE盒模型和标准盒模型之间的差别. 当然今天不是去细细追究两种模型具体是怎么去计算布局的,那个很多文章已经已经有过了,不再重复.以前刚开始学习盒模型的时候,就学到的是IE ...
随机推荐
- [IDEA] IntelliJ IDEA 安装教程
原文地址:https://www.cnblogs.com/memento/p/9147477.html 下载地址:https://www.jetbrains.com/idea/ 本文以 64 位的 U ...
- Java 中声明和语句
public class Example { int[] arr = new int[4]; // OK! 定义属性并初始化 arr[0] = 1; // 错误! 这是语句,必须写在方法体里 arr[ ...
- 3.3Python数据处理篇之Numpy系列(三)---数组的索引与切片
目录 (一)数组的索引与切片 1.说明: 2.实例: (二)多维数组的索引与切片 1.说明: 2.实例: 目录: 1.一维数组的索引与切片 2.多维数组的索引与切片 (一)数组的索引与切片 1.说明: ...
- do-while语句及for语句（初学者）
1.do-while语句的一般形式为: do 语句 while(表达式): 这个循环与while循环的不同在于:它先执行循环中的语句,然后再判断这个表达式是否为真,如果为真则继续循环:如果为假,则中止 ...
- 阿里八八β阶段Scrum（1/5）
今日进度 叶文滔: 修改了α阶段遗留的部分界面BUG,比如状态栏白底等 张岳: 修复用户模块信息修改返回失败的BUG 林炜鸿: 重构了添加事件的代码,增加可修改的特性 黄梅玲: 绘制了新的日程显示格界 ...
- java基础面试题（Servlet生命周期）
Servlet运行在Servlet容器中,其生命周期由容器来管理.Servlet的生命周期通过javax.servlet.Servlet接口中的init().service()和destroy()方法 ...
- MyBatis实现模糊查询的几种方式
在学习MyBatis过程中想实现模糊查询,可惜失败了.后来上百度上查了一下,算是解决了.记录一下MyBatis实现模糊查询的几种方式. 数据库表名为test_student,初始化了几条记录,如图: ...
- C#异步编程の----Threadpool( 线程池)
简介: 一个托管线程的创建需要数千个CPU周期,并且当发生线程切换时也会带来明显的开销.考虑线程的重用,避免不断重复创建新的线程是提高系统效率的一种方式. 线程池是一种提供效率的方式,它创建好一些线程 ...
- c++11の异步方法 及线程间通信
1. std::promise 可以用来在线程间提供数据传递. std::future = std::promise.get_future(). 线程中可以对promise赋值std::promise ...
- 洛谷 P2678 跳石头
题目背景 一年一度的"跳石头"比赛又要开始了! 题目描述 这项比赛将在一条笔直的河道中进行,河道中分布着一些巨大岩石.组委会已经选择好了两块岩石作为比赛起点和终点.在起点和终点之间 ...