在页面顶部设置 doctype是为了统一标准

浏览器有标准模式和怪异模式

而这两种模式最大区别就是 盒模型的解析不同

==============================

图片摘自网络

==========================

比如IE width=100px padding=20px; 那ie的width在网页里面还是显示为:100px; padding的20px。是包含在100px里面。也就是说这时content 是80px;

而标准width=100px就是content=100px padding=20px。标准的padding把内容撑开了

换句话说,ie下宽度还是自身宽度,padding在这个宽度里面。展现还是自身的宽度

标准时padding把设置的宽度撑破了

IE6 盒子模型中,盒子的尺寸包含了 内容区,padding, border 和 margin 这四个部分,而 W3C 的盒子模型中,盒子的尺寸只包含内容区,padding,border 和 margin 被排除在盒子尺寸之外。

说来说去就是一句话:加上doctype声明,让浏览器使用标准模式

=====================

部分信息 参考网络资料

标准模式 怪异模式 盒模型 doctype的更多相关文章

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

    盒子模型 主要有两种,w3c标准盒模型,IE下的怪异盒模型,其实还有就是弹性盒模型(上篇文章我们用他很好的解决了对齐问题) DTD规范 盒模型分为:标准w3c盒模型.IE盒模型.以及css中的伸缩盒模 ...

  2. doctype声明、浏览器的标准、怪异等模式

    doctype 标准(严格)模式(Standards Mode).怪异(混杂)模式(Quirks Mode),如何触发,区分他们有何意义? 触发标准模式 1.加DOCTYPE声明,比如:<!DO ...

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

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

  4. 【HTML&CSS】 第二章:标准模式下的页面与怪异模式下的页面区别

    盒模型 前面提到,盒模型(box mode)是浏览器 Quirks Mode 和 Standards Mode 的主要区别. 描述 对于“盒模型”一词并没有明确的文档定义,它是开发人员描述 CSS 中 ...

  5. 精通css 高级web标准解决方案——可视化格式模型-盒模型

    1-盒模型的两种标准: IE :width 和 height属性 是包括padding和border在内的. w3c:width 和 height 属性,就是单纯的内容的宽高,padding 是内容之 ...

  6. HTML文档类型DTD与浏览器怪异模式

    虽然在兼容IE6时候经常会注意到两个模式的区别,但是系统的理解起来,还没有认真总结过.看了一些网上的资料.结合自己的理解汇总了一下,放在这里备忘并分享给大家. 浏览器从服务端获取网页后会根据文档的DO ...

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

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

  8. CSS-标准盒模型 & 怪异盒模型

    CSS中Box model分类 CSS中Box model是分为两种:: W3C标准 和 IE标准盒子模型. 大多数浏览器采用W3C标准模型,而IE中则采用Microsoft自己的标准. 怪异模式是“ ...

  9. 3.怪异盒模型box-sizing?弹性盒模型|盒布局?【HTML】

    在标准模式下的盒模型:盒子总宽度/高度=width/height+padding+border+margin 在怪异模式下的盒模型下,盒子的总宽度和高度是包含内边距padding和边框border宽度 ...

随机推荐

  1. 框架原理第一讲,熟悉常用的设计方式.(以MFC框架讲解)

    框架原理第一讲,熟悉常用的设计方式.(以MFC框架讲解) 一丶什么是框架,以及框架的作用 什么是框架? 框架,简而言之就是把东西封装好了,使用框架开发可以快速开发程序,例如MFC程序的双击写代码. 为 ...

  2. [C#]使用IFormattable接口来实现字符串格式化

    本文为原创文章.源代码为原创代码,如转载/复制,请在网页/代码处明显位置标明原文名称.作者及网址,谢谢! 开发工具:VS2017 语言:C# DotNet版本:.Net FrameWork 4.0及以 ...

  3. db2 调整连接数的优化

    The Version 9.5 default for the max_coordagents and max_connections parameters will be AUTOMATIC, wi ...

  4. 495A - Digital Counter

    A. Digital Counter time limit per test 1 second memory limit per test 256 megabytes input standard i ...

  5. Bootstrap全局CSS样式之排版

    Bootstrap能全然友好的支持html5的文本元素,这里不再赘述,详细可參考我还有一篇文章<html的文本元素总结>,这里主要针对Bootstrap封装好的CSS文本样式做一下汇总. ...

  6. inline-block解决

    一.现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距 二.方法之移除空格 元素间留白间距出现的原因就是标签段之间的空格,因此,去掉HTML中的空格,自 ...

  7. 自学Python4.2 迭代器、生成器

    迭代器.生成器一.迭代器 迭代器是访问集合元素的一种方式.迭代器对象从集合的第一个元素开始访问,直到所有的元素被访问完结束.迭代器只能往前不会后退,不过这也没什么, 因为人们很少在迭代途中往后退.另外 ...

  8. org.springframework.web.HttpMediaTypeNotAcceptableException: Could not find acceptable representation

    异常信息 org.springframework.web.HttpMediaTypeNotAcceptableException: Could not find acceptable represen ...

  9. Sphinx学习笔记2

    因为网站搜索的需要,启动了一个搜索引擎项目,其实也算不上完整的搜索引擎,需求很简单,如下:     1)搜索产品名.类别名.品牌名.副标题.关键字等字段     2)数据量目前为13000左右,未来可 ...

  10. 浅谈,html\css脱离标准文档流相关

    (个人知识有限,难免有误,请见谅) 标准文档流,顾名思义,是要按照一定规矩排列的,默认的就是元素会从左至右,从上至下排列,块级会独占一行,行内元素会和小伙伴们共享一行. 本来在标准文档流下,各个元素相 ...