标准模式 怪异模式 盒模型 doctype
在页面顶部设置 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的更多相关文章
- 理解标准盒模型和怪异模式&box-sizing属性
盒子模型 主要有两种,w3c标准盒模型,IE下的怪异盒模型,其实还有就是弹性盒模型(上篇文章我们用他很好的解决了对齐问题) DTD规范 盒模型分为:标准w3c盒模型.IE盒模型.以及css中的伸缩盒模 ...
- doctype声明、浏览器的标准、怪异等模式
doctype 标准(严格)模式(Standards Mode).怪异(混杂)模式(Quirks Mode),如何触发,区分他们有何意义? 触发标准模式 1.加DOCTYPE声明,比如:<!DO ...
- 怪异盒模型和标准盒模型--CSS
一,原理 css 属性:Box Moel分为两种:W3C标准和IE标准盒子模型. 大多数浏览器采用W3C标准模型,而IE中采用Microsoft自己的标准. 怪异模式是“部分浏览器在支持W3C标准的同 ...
- 【HTML&CSS】 第二章:标准模式下的页面与怪异模式下的页面区别
盒模型 前面提到,盒模型(box mode)是浏览器 Quirks Mode 和 Standards Mode 的主要区别. 描述 对于“盒模型”一词并没有明确的文档定义,它是开发人员描述 CSS 中 ...
- 精通css 高级web标准解决方案——可视化格式模型-盒模型
1-盒模型的两种标准: IE :width 和 height属性 是包括padding和border在内的. w3c:width 和 height 属性,就是单纯的内容的宽高,padding 是内容之 ...
- HTML文档类型DTD与浏览器怪异模式
虽然在兼容IE6时候经常会注意到两个模式的区别,但是系统的理解起来,还没有认真总结过.看了一些网上的资料.结合自己的理解汇总了一下,放在这里备忘并分享给大家. 浏览器从服务端获取网页后会根据文档的DO ...
- IE盒模型和标准盒模型
标准盒模型和ie盒模型(怪异盒模型) w3c标准盒模型 width和height不包括padding和border ie盒模型 width和height包含padding和border ie8以上都是 ...
- CSS-标准盒模型 & 怪异盒模型
CSS中Box model分类 CSS中Box model是分为两种:: W3C标准 和 IE标准盒子模型. 大多数浏览器采用W3C标准模型,而IE中则采用Microsoft自己的标准. 怪异模式是“ ...
- 3.怪异盒模型box-sizing?弹性盒模型|盒布局?【HTML】
在标准模式下的盒模型:盒子总宽度/高度=width/height+padding+border+margin 在怪异模式下的盒模型下,盒子的总宽度和高度是包含内边距padding和边框border宽度 ...
随机推荐
- 程序员的自我救赎---3.2:SSO及应用案例
<前言> (一) Winner2.0 框架基础分析 (二)PLSQL报表系统 (三)SSO单点登录 (四) 短信中心与消息中心 (五)钱包系统 (六)GPU支付中心 (七)权限系统 (八) ...
- replace深入
var b = 0; var arr = []; str = str.replace(/J/g,function(){ var args = arguments; b++; arr.push(args ...
- 使用Dagger2做静态注入, 对比Guice.
Dagger 依赖注入的诉求, 这边就不重复描述了, 在上文Spring以及Guice的IOC文档中都有提及, 既然有了Guice, Google为啥还要搞个Dagger2出来重复造轮子呢? 因为使用 ...
- codevs1050
题目地址:http://codevs.cn/problem/1050/ 分析: 最開始想直接用状压做,发现怎么都想不出来.就和当年的多行多米诺骨牌(这道题至少最后还是把普通状压做法看懂了). 直到听到 ...
- 关于hash和ico的一些关联
最近測试提出一个bug.说某几个页面中的ico不显示,于是针对此问题排查原因. 首先,确保页面中的link已引入favicon.ico. 经查看,发现是js中的location.hash导致了ico不 ...
- WIN7下安装SVNserver端及client搭建协作环境
一.客户场景: 客户现场须要在虚拟机上封闭开发,所以须要搭建一个SVN协作开发环境.客户提供了一台全新的裸机安装的操作系统是WIN7旗舰版64位. 二.SVNserver搭建 1. SVNserver ...
- Maste Note for OCR / Vote disk Maintenance Operations (ADD/REMOVE/REPLACE/MOVE)
Doc ID 428681.1 Applies to: Oracle Database - Enterprise Edition - Version 10.2.0.1 to 11.2.0.1.0 [R ...
- 初装Ubuntu一般配置
1. 开启ssh远程 2.修改root密码 sudo passwd 输入两次密码. 3.授权普通用户root权限 修改 /etc/sudoers 文件,找到下面一行,在root下面添加一行,如下所示: ...
- .net WCF简单实例
最近看到网上招聘有许多都需要WCF技术的人员,我之前一直没接触过这个东西,以后工作中难免会遇到,所谓笨鸟先飞,于是我就一探究竟,便有了这边文章.由于是初学WCF没有深入研究其原理,只是写了一个demo ...
- 【CSS3】背景
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...