论浏览器与css下的标准与怪异模式

标准模式和怪异模式的来由

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

而如果DOCTYPE缺失则在ie6,ie7,ie8下将会触发怪异模式(quirks 模式)。

浏览器如何确定使用哪种渲染模式

知道了这两种渲染模式的来由,那剩下的问题就是浏览器如何能够确定应该使用哪种模式了。其实归根结底就是,浏览器如何能将旧网页与新网页区分开来。
平常编写网页的时候,一般都会见到HTML文档的头部会有文档类型声明:DOCTYPE。当浏览器遇到正确的文档声明时,浏览器就会启动标准模式,按照制定的文档类型标准解析和渲染文档。而对于旧有的网页,由于网页编写的当时标准还没有确定,所以一般是不会有文档类型声明的。所以,对于没有文档类型声明或者文档类型声明不正确的文档,浏览器就会认为它是一个旧的HTML文档,就会使用怪异模式解析和渲染该文档。

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

CSS Code复制内容到剪贴板

  1. .box {   
  2.     width: 200px;   
  3.     height: 200px;   
  4.     border: 20px solid black;   
  5.     padding: 50px;   
  6.     margin: 50px;   
  7. }  


在标准模式下的盒模型如下图所示,盒子总宽度/高度=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时,将采用怪异模式解析计算;

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

CSS Code复制内容到剪贴板

  1. -webkit-box-sizing: content-box;   
  2. -moz-box-sizing: content-box;  

CSS怪异模式和文档类型定义DTD

在标准模式中,浏览器根据规范表现页面;而怪异模式通常模拟老式浏览器(比如Microsoft IE4 和Netscape Navigator4)的行为以防止老站点无法工作.这两种模式的差异较大,比较典型的就是IE对盒模型的解析:在标准模式中,网页元素的宽度是由padding/border/width三者的宽度相加决定的;而在怪异模式中,widht本身就包括了padding和border的宽度.此外,标准模式下块级元素的经典的居中方法--设定width,然后margin-right:auto,margin-left:auto; 在怪异模式下也无法正常工作.

按照W3C的标准,我们需要在HTML的最开始声明文件的DTD类型.如果漏写DTD声明,Firefox仍然会按照标准模式来解析网页,但在IE中(包括IE6/7/8)就会触发怪异模式.为了避免怪异模式给我们带来不必要的麻烦,我们要养成书写DTD声明的好习惯。

©️2020 CSDN 皮肤主题: 深蓝海洋 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值