十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
今天就跟大家聊聊有关如何理解CSS编程中的怪异模式,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
成都创新互联是专业的巴宜网站建设公司,巴宜接单;提供网站建设、成都网站制作,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行巴宜网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!怪异模式盒模型
今天学习了一下css3的box-sizing属性,顺便又温习了一下css的盒模型,最后觉得有必要对盒模型做一个全面整理。
先不考虑css3的情况,盒模型一共有两种模式,一种是标准模式,另一种就是怪异模式。
当你用编辑器新建一个html页面的时候你一定会发现最顶上都会有一个DOCTYPE标签,例如:
以上几种DOCTYPE都是标准的文档类型,无论使用哪种模式完整定义DOCTYPE,都会触发标准模式,而如果DOCTYPE缺失则在ie6,ie7,ie8下将会触发怪异模式(quirks 模式)。
首先定义一个div块用来演示标准模式和怪异模式的区别,以下是Css样式
.box {
width: 200px;
height: 200px;
border: 20px solid black;
padding: 50px;
margin: 50px;
}
在标准模式下的盒模型如下图所示,盒子总宽度/高度=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时,将采用怪异模式解析计算;
目前使用此属性需要前缀如下:
-webkit-box-sizing: content-box;
-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编程中的怪异模式有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注创新互联行业资讯频道,感谢大家的支持。