小李飞刀资源网

浅谈CSS编程中的怪异模式
网页制作 2024/12/25 佚名
3 2
小李飞刀资源网 Design By www.iooab.com

怪异模式盒模型

今天学习了一下css3的box-sizing属性，顺便又温习了一下css的盒模型，最后觉得有必要对盒模型做一个全面整理。

先不考虑css3的情况，盒模型一共有两种模式，一种是标准模式，另一种就是怪异模式。

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

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2.   
  3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
  4.   
  5. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  6.   
  7. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  8.   
  9. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  
  10.   
  11. <!DOCTYPE HTML>  

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

首先定义一个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
浅谈CSS编程中的怪异模式
标准模式盒模型

在怪异模式下的盒模型如下图所示，盒子的总宽度和高度是包含内边距padding和边框border宽度在内的，盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin;
浅谈CSS编程中的怪异模式
怪异模式盒模型

看到这里你应该对盒模型的两种模式有了清晰的认识，下面在此基础上介绍一下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;　在怪异模式下也无法正常工作．

同样的代码，为了确保向后兼容，浏览器厂商发明了标准模式和怪异模式这两种方法来解析网页．在怪异模式和标准模式下的表现很可能相差甚远．因为发明怪异模式的目的就是为了兼容老式浏览器下的代码，它的很多解析方式是不符合标准的．所以，一般情况下，我们应该避免触发怪异模式，应选用标准模式．

怪异模式是如何被触发的呢？与DTD有关．DTD全称Document Type Definition，即文档类型定义．DTD是一种保证HTML文档格式正确的有效方法，可以通过比较HTML文档和DTD文件来看文档是否符合规范，以及元素和标签使用是否正确．一个DTD文档包含元素的定义规则、元素间关系的定义规则、元素可使用的属性、可作用的实体或符号规则．

在网页中最常用的DTD类型包括4种：

（1）用于HTML4.01的严格型：strict

（2）用于HTML4.01的过渡型:Transitional

（3）用于XHTML1.0的严格型

（4）用于XHTML1.0的过渡型

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

标签：
CSS,怪异模式
小李飞刀资源网 Design By www.iooab.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
小李飞刀资源网 Design By www.iooab.com
www.iooab.com 小李飞刀资源网
139,976互联网资源
144,792高清电影
21,817无损音乐
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接