盒子模型 主要有两种，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盒模型浏览器兼容性

理解标准盒模型和怪异模式&box-sizing属性的更多相关文章

  1. padding标准盒模型和怪异盒子模型

    我们都知道padding是为块级元素设置内边距 但是在使用过程中,我们却会遇到一些问题.padding的标准盒模型和怪异盒模型 padding盒子模型 我们通过demo来讲这个问题,用文字干讲第一没意 ...

  2. 标准盒模型、怪异盒模型（box-sizing）

    CSS中Box model是分为两种: W3C标准(标准盒模型) 和 IE标准盒子模型(怪异盒模型).大多数浏览器采用W3C标准模型,而IE中则采用Microsoft自己的标准. 重要的一个属性是bo ...

  3. div的标准盒模型和怪异盒模型

    (1)标准盒模型 标准盒模型宽高不会被padding和margin撑开 (2)怪异盒模型 怪异盒模型宽高会被padding和margin撑开

  4. CSS3标准盒模型还是IE怪异模型box-sizing属性的应用设置

    在一个文档中,每个元素都被表示为一个矩形的盒子.盒子模型具有4个属性['外边距(margin)','边框(border)','内边距(padding)','内容(content)']. 我们要设置某个 ...

  5. 怪异盒模型和标准盒模型--CSS

    一,原理 css 属性:Box Moel分为两种:W3C标准和IE标准盒子模型. 大多数浏览器采用W3C标准模型,而IE中采用Microsoft自己的标准. 怪异模式是“部分浏览器在支持W3C标准的同 ...

  6. IE盒模型和标准盒模型

    标准盒模型和ie盒模型(怪异盒模型) w3c标准盒模型 width和height不包括padding和border ie盒模型 width和height包含padding和border ie8以上都是 ...

  7. w3c标准盒模型与IE传统模型的区别

    一.盒子模型(box model) 在HTML文档中的每个元素被描绘为矩形盒子.确定其大小,属性——比如颜色.背景.边框,及其位置是渲染引擎的目标. CSS下这些矩形盒子由标准盒模型描述.这个模型描述 ...

  8. boxsizing属性 IE盒模型和标准盒模型

    CSS3有一个非常有用但应用不广泛的属性: box-sizing: content-box | border-box | inherit content-box,默认属性,遵从标准盒模型. borde ...

  9. 标准盒模型与IE盒模型之间的转换

    首先上图,这两张很明显可以看出IE盒模型和标准盒模型之间的差别. 当然今天不是去细细追究两种模型具体是怎么去计算布局的,那个很多文章已经已经有过了,不再重复.以前刚开始学习盒模型的时候,就学到的是IE ...

随机推荐

  1. 平板电脑安装Ubuntu教程

    平板电脑安装Ubuntu教程-以V975w为例,Z3735系列CPU通用 最近尝试在昂达V975w平板电脑和intel stick中安装ubuntu,经过分析,发现存在一个非常大的坑.但因为这个坑,此 ...

  2. Spring Boot 中配置文件application.properties使用

    一.配置文档配置项的调用(application.properties可放在resources,或者resources下的config文件夹里) package com.my.study.contro ...

  3. [20170705]diff比较执行结果的内容.txt

    [20170705]diff比较执行结果的内容.txt --//有时候需要比较2个命令输出的结果进行比较,比较笨的方法如下,例子: $  lsnrctl status LISTENER_SCAN2 & ...

  4. Android 接收系统广播(动态和静态)

    1.标准广播:是一种完全异步执行的广播,在广播发出之后,所有的广播接收器几乎会在同一时刻接收到这条广播信息,它们之间没有先后顺序.效率高.无法被截断. 2.有序广播:是一种同步执行的广播,在广播发出后 ...

  5. OpenCV 的颜色空间转换

    # coding: utf-8 ''' 第13章主要介绍:颜色空间转换 ''' import cv2 import numpy as np ''' 经常用到的颜色空间转换是: BGR<-> ...

  6. [Demo_03] MapReduce 实现多类型输出

    0. 说明 MapReduce 实现将最高气温统计数据输出为文本格式和 SequenceFile 格式 在最高气温统计的基础上进行操作 1. 核心代码 // 多输出格式设置 MultipleOutpu ...

  7. 1.2 Spyder的基本使用

    [TOC] 1.0 Spyder的基本使用 1.Spyder的主题与文字修改: 2.Spyder的使用技巧: (一)安装Anaconda: 官网下载:https://www.anaconda.com/ ...

  8. Appium1.9.1 之 Desired Capabilities 释疑

    服务关键字 Desired Capabilities在启动session的时候是必须提供的. Desired Capabilities本质上是以key value字典的方式存放,客户端将这些键值对发给 ...

  9. Arcgis10.3在添加XY数据时出现问题

    准备通过excel表格(xls格式)中的经纬度生成点数据,但是选择数据的时候报错:连接到数据库失败,常规功能故障,外部表不是预期的格式.如下图所示: 解决方法: 将xls格式的表格另存为csv格式,重 ...

  10. 从零上手Python关键代码

    来源 https://www.kesci.com/home/project/59e4331c4663f7655c499bc3