zoukankan      html  css  js  c++  java
  • W3C vs IE盒模型

    今年4月份的一次面试,问到盒模型,是我第一次接触到盒模型,但当时不太明白,没有说清楚,后来查了下,但一知半解。

    下面分享下,我对盒模型的理解:

    盒模型,也就是box-sizing,分为content-box和border-box。

    而content-box : W3C标准盒模型

    border-box : IE盒模型

               

    在宽度方面,有内容宽度,盒子实际宽度,盒子总宽度(盒子实际占据的大小)

    内容宽度:

    content-box : width

    border-box : width+ padding-left + padding-right + border-left + border-right。

    盒子实际宽度:

    content-box : width + padding +border

    border-box : width(包含padding和border)

    比如:一个div宽度设置为500px,

          在content-box下:盒子实际的宽度=500px+padding+border(500为内容宽度);

          在border-box下:盒子的实际宽度=500px(包含border和padding)。

    盒子总宽度:

    content-box:width+padding+border+margin

    border-box:width+margin

  • 相关阅读:
    1600802101
    Android第二次作业
    android 第一次作业
    团队作业—项目答辩
    软件工程—团队作业2.2
    软件工程—团队作业2
    软件工程—团队作业1
    第一篇博客
    Android第四次作业
    作业3
  • 原文地址:https://www.cnblogs.com/WaTa/p/5817167.html
Copyright © 2011-2022 走看看