• Doctype作用?标准模式与兼容模式各有什么区别?


    位置:<!DOCTYPE>声明位于位于HTML文档中的第一行,处于 <html> 标签之前。
    作用:告知浏览器的解析器用什么文档标准解析这个文档。
               DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
    语法:
          HTML 顶级元素 可用性 "注册//组织//类型 标签//定义 语言""URL";

    举个列子:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> 
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
    其中,DTD的是W3C所发布的一个文档类型定义,简单的说,就是告诉浏览器你的这个HTML
    ,是根据那个标准写的,解析的时候用哪个标准解析。

    DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现


    Q:标准模式与兼容模式(怪异模式)各有什么区别?

    A:标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。
    在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
    简单的说,就是尽可能的显示能显示的东西给用户看。

    具体的说:
    1.width不同
    在严格模式中 :width是内容宽度 ,元素真正的宽度 = margin-left + border-left-width + padding-left + width + padding-right + border-right- width +  margin-right;
    在兼容模式中 :width则是元素的实际宽度 ,内容宽度 = width - ( padding-left + padding-right + border-left-width + border-right-width)

    2.兼容模式下可设置百分比的高度和行内元素的高宽
        在Standards模式下,给span等行内元素设置wdith和height都不会生效,而在兼容模式下,则会生效。
        在standards模式下,一个元素的高度是由其包含的内容来决定的,如果父元素没有设置高度,子元素设置一个百分比的高度是无效的。

    3.用margin:0 auto设置水平居中在IE下会失效
        使用margin:0 auto在standards模式下可以使元素水平居中,但在兼容模式下却会失效(用text-align属性解决)
        body{text-align:center};#content{text-align:left}

    4.兼容模式下Table中的字体属性不能继承上层的设置,white-space:pre会失效,设置图片的padding会失效

  • 相关阅读:
    String(Java版本)
    前端工程化开发之yeoman、bower、grunt
    前端自动化开发之grunt
    前端模块化开发之seaJs
    浅谈图片蒙版效果-webkit-mask
    div模拟textarea实现高度自增长
    预加载显示图片的艺术
    轻松实现localStorage本地存储
    利用Navigation Timing测量页面加载时间
    利用jstree插件轻松构建树应用
  • 原文地址:https://www.cnblogs.com/king18181753985/p/6508435.html
Copyright © 2020-2023  润新知