CSS盒模型全面讲解,怪异模式盒模型

当你用编辑器新建一个html页面的时候你一定会发现最顶上都会有一个DOCTYPE标签,例如:

<!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 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>

以上几种DOCTYPE都是标准的文档类型,无论使用哪种模式完整定义DOCTYPE,都会触发标准模式,而如果DOCTYPE缺失则在ie6,ie7,ie8下将会触发怪异模式(quirks 模式)

首先定义一个div块用来演示标准模式和怪异模式的区别,以下是Css样式

.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;

怪异模式盒模型

看到这里你应该对盒模型的两种模式有了清晰的认识,下面在此基础上介绍一下css3属性box-sizing;

box-sizing有两个值一个是content-box,另一个是border-box。

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

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

目前使用此属性需要前缀如下:

-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
时间: 2024-11-08 19:13:29

CSS盒模型全面讲解,怪异模式盒模型的相关文章

(转)标准模式与怪异模式

标准模式与怪异模式 由于历史的原因,各个浏览器在对页面的渲染上存在差异,甚至同一浏览器在不同版本中,对页面的渲染也不同.在W3C标准出台以前,浏览器在对页面的渲染上没有统一规范,产生了差异(Quirks mode或者称为Compatibility Mode):由于W3C标准的推出,浏览器渲染页面有了统一的标准(CSScompat或称为Strict mode也有叫做Standars mode),这就是二者最简单的区别. W3C标准推出以后,浏览器都开始采纳新标准,但存在一个问题就是如何保证旧的网页

标准模式与怪异模式

标准模式与怪异模式 由于历史的原因,各个浏览器在对页面的渲染上存在差异,甚至同一浏览器在不同版本中,对页面的渲染也不同.在W3C标准出台以前,浏览器在对页面的渲染上没有统一规范,产生了差异(Quirks mode或者称为Compatibility Mode):由于W3C标准的推出,浏览器渲染页面有了统一的标准(CSScompat或称为Strict mode也有叫做Standars mode),这就是二者最简单的区别. W3C标准推出以后,浏览器都开始采纳新标准,但存在一个问题就是如何保证旧的网页

CSS基础知识---浮动,定位和盒模型

转载请注明出处! 需要掌握的三个最重要的CSS概念是浮动,定位和盒模型. 盒模型概述: 页面上的每个元素都被看做一个矩形框(元素框or盒模型),这个框由元素内容,内边距,边框和外边距组成. 内边距出现在内容区域的周围,如果为元素添加背景,那么背景就会应用于由内容和内边距组成的区域.添加边框会在内边距的区域外边加一条线.在边框外边是外边距,外边距是透明的,一般用它来控制元素之间的间隔. 内边距,边框,和外边距是可选的,默认值为零.但是许多元素由用户代理样式表设置了外边距和内边距,我们可以将元素的m

浏览器标准模式与怪异模式的区别

两种模式的不同主要表现在盒模型和渲染模式的不同上 要想写出跨浏览器的CSS,必须知道浏览器解析CSS的两种模式:标准模式(strict mode)和怪异模式(quirks mode) 所谓的标准模式是指,浏览器按W3C标准解析执行代码:怪异模式则是使用浏览器自己的方式解析执行代码,因为不同浏览器解析执行的方式不一样,所以我们称之为怪异模式.浏览器解析时到底使用标准模式还是怪异模式,与你网页中的DTD声明直接相关,DTD声明定义了标准文档的类型(标准模式解析)文档类型,会使浏览器使用相应的方式加载

IE 怪异模式(Quirks Mode)对 HTML 页面的影响

本文主要描述 Quirks Mode 和 Standards Mode 这两种文档模式渲染页面时的差异由来,并且给出一些详细的例子说明差异所在.通过阅读本文,Web 开发工程师可以对浏览器工作原理有更为深刻的理解,避免自己所开发的 Web 应用在不同的浏览器上产生不同的效果. Quirks Mode 概述 定义 什么是 Quirks Mode? 简单来说,Quirks Mode 就是浏览器为了兼容很早之前针对旧版本浏览器设计.并未严格遵循 W3C 标准的网页而产生的一种页面渲染模式. 历史 由渲

怪异模式(Quirks Mode)对 HTML 页面的影响

Quirks Mode 概述 定义 什么是 Quirks Mode? 简单来说,Quirks Mode 就是浏览器为了兼容很早之前针对旧版本浏览器设计.并未严格遵循 W3C 标准的网页而产生的一种页面渲染模式. 历史 由渲染引擎产生的两种文档模式 谈到 Quirks modes 首先就要从浏览器渲染引擎说起.我们知道所有的浏览器都有自己的页面渲染引擎,渲染引擎主要包含两部分,一部分负责 HTML.CSS 代码的解析,另一部分负责脚本代码解析,这两部分合起来就可以绘制出完整的页面. 表 1 各浏览

关于HTML(二)---------浏览器的标准模式和怪异模式

标准模式和怪异模式的来由 在HTML与CSS的标准化未完成之前,各个浏览器对于HTML和CSS的解析有各自不同的实现,而有很多旧的网页都是按照这些非标准的实现去设计的.在HTML与CSS标准确定之后,浏览器一方面要按照标准去实现对HTML与CSS的支持,另一方面又要保证对非标准的旧网页设计的后向兼容性.因此,现代的浏览器一般都有两种渲染模式:标准模式和怪异模式.在标准模式下,浏览器按照HTML与CSS标准对文档进行解析和渲染:而在怪异模式下,浏览器则按照旧有的非标准的实现方式对文档进行解析和渲染

标准模式(严格模式)和怪异模式相关问题总结

标准模式和怪异模式的来由 在HTML与CSS的标准化未完成之前,各个浏览器对于HTML和CSS的解析有各自不同的实现,而有很多旧的网页都是按照这些非标准的实现去设计的. 在HTML与CSS标准确定之后,浏览器一方面要按照标准去实现对HTML与CSS的支持,另一方面又要保证对非标准的旧网页设计的后向兼容性. 因此,现代的浏览器一般都有两种渲染模式:标准模式和怪异模式. 在标准模式下,浏览器按照HTML与CSS标准对文档进行解析和渲染:而在怪异模式下,浏览器则按照旧有的非标准的实现方式对文档进行解析

网页上传到服务器后访问时出现怪异模式(Quirks mode)

1.更多内容请参考:http://blog.csdn.net/freshlover/article/details/11616563 http://blog.csdn.net/barebear/article/details/5100260 2.当使用jsp+tomcat+mysql开发时,将tomcat上传到服务器后,使用360浏览器通过ip访问网站时,本来很好的网站样式会变得混乱,导航栏,图片,特别是盒模型会有很大的变化.使用360的工具->开发人员工具.查看网页文档模式时,发现使用的是Qi