zoukankan      html  css  js  c++  java
  • 盒模型之标准模型与怪异模型

    ㈠原理

    ⑴css 属性——Box Moel分为两种:W3C标准和IE标准盒子模型。

    ⑵大多数浏览器采用W3C标准模型,而IE中采用Microsoft自己的标准。

    ⑶怪异模式是“部分浏览器在支持W3C标准的同时还保留了原来的解析模式”,怪异模式主要表现在IE内核的浏览器。

    ⑷当不对Doctype进行定义时,会触发怪异模式。

     

    ㈡标准模型和怪异模型的区别:

    ⑴在标准模式下,一个块的总宽度=width+margin(左右)+padding(左右)+border(左右)

    ⑵在怪异模式下,一个块的总宽度=width+margin(左右)(既width已经包含了padding和border值)

    ⑶具体看下面的模型图:

    标准模型:

     怪异模型:

     

    ㈢总长度的差别

    那么,到底这两个公式里提到的总宽度是什么意思呢?两种模式最终效果有什么差别呢?

    ⒈标准模式的代码如下图所示:

    效果如下图所示:

    ★标准模式,我们设置#box的宽高为400px,其对应的content(内容区)宽高为400px

     

     2.怪异模式的代码如下图所示:

     效果图图下图所示:

     ★标准模式,我们设置#box的宽高为400px,在怪异模型中,其对应的content(内容区)宽高却是width-上下padding-上下border,结果为350px;

    我们很明显的看到怪异模型下的宽度变小了。

           希望有所帮助。

  • 相关阅读:
    Salesforce的Developer Console简介
    Apex的对象共享
    GBDT
    熵、条件熵、相对熵、交叉熵
    如何理解最小二乘法?
    SENet
    C++ to_string()
    Gradient Harmonized Single-stage Detector
    如何只反向传播部分样本loss
    Focal Loss和OHEM如何应用到Faster R-CNN
  • 原文地址:https://www.cnblogs.com/shihaiying/p/11329595.html
Copyright © 2011-2022 走看看