在页面顶部设置 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. Java-----SSM(SpringMVC+Spring+mybaties)框架整合

    在进行整合之前,首先了解这个框架的作用 Mybaties: 丰富的标签库,可写动态sql,并统一的在.XML文件中编写,方便统一管理,解耦 SpringMVC: 标准的MVC思想(mode,view, ...

  2. mac os x 触摸板点击无效

    macbook默认轻击触摸板无效,这样是为了防止误点击.可是习惯了windows笔记本的我对这一设置非常不习惯. 能够在"system preference"的"Trac ...

  3. Android Root原理初探

    Root Linux:Root == Windows:Adminstrator Android是Linux系统吗? 操作系统 = 系统内核 + 文件系统 Linux发行版:Linux内核 + 文件系统 ...

  4. 18、Cocos2dx 3.0游戏开发找小三之cocos2d-x,请问你是怎么调度的咩

    重开发人员的劳动成果,转载的时候请务必注明出处:http://blog.csdn.net/haomengzhu/article/details/30478251 Cocos2d 的一大特色就是提供了事 ...

  5. mac brew install nginx遇到的坑

    默认使用 brew install nginx 出现了一下的错误: p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: ...

  6. select的限制以及poll的使用

    1.先说select在多路IO中的限制:1)linux中每个程序能够打开的最多文件描述符是有限制的.默认是1024.可以通过ulimit -n进行查看和修改: xcy@xcy-virtual-mach ...

  7. HBase shell 命令介绍

    HBase shell是HBase的一套命令行工具,类似传统数据中的sql概念,可以使用shell命令来查询HBase中数据的详细情况.安装完HBase之后,如果配置了HBase的环境变量,只要在sh ...

  8. 虚拟机修改静态ip

    1.设置虚拟机的网络选择方式,使用NAT模式,选择这个模式后网段与主机的网段不是一个网段,一般选择桥接模式 2.选择VMnet8, 去掉 使用本地DHCP服务将ip分配给虚拟机 这个选项,不然设置ip ...

  9. C# 委托与事件详解(二)

    什么是事件?EVENT?点击事件?加载事件?一连串的模糊的概念冲击着我们弱小的脑袋 那我们首先来看一下比较正统的感念吧: 事件是类在发生其关注的事情时用来提供通知的一种方式. 事件的发生一般都牵扯2个 ...

  10. Platt SMO 和遗传算法优化 SVM

    机器学习算法实践:Platt SMO 和遗传算法优化 SVM 之前实现了简单的SMO算法来优化SVM的对偶问题,其中在选取α的时候使用的是两重循环通过完全随机的方式选取,具体的实现参考<机器学习 ...