W3C标准盒子和ie盒子区别

W3C模型中:

      CSS中的宽(width)=内容(content)的宽

      CSS中的高(height)=内容(content)的高

eg:

<div style="width:50px;height:50px;padding:2px;border:1px solid blue;margin:3px;">
    W3C模型
</div>

则此div的实际大小:

        div高=height+(padding+border+margin)2=50+(2+1+3)2=62px;

        div宽=width+(padding+border+margin)2=50+(2+1+3)2=62px; div内容占大小:

        div高=height=50px;

        div宽=width=50px;

IE盒子模型:

IE模型中:

      CSS中的宽(width)=内容(content)的宽+(border+padding)*2

      CSS中的高(height)=内容(content)的高+(border+padding)*2

eg:

 .div2{
          box-sizing: border-box;
}

<div class="div2" style="width:50px;height:50px;padding:2px;border:1px solid blue;margin:3px;">
    ie模型
</div>

则此div的实际大小:

        div高=height+margin2=50+32=56px;

        div宽=width+margin2=50+32=62px;

div内容占大小:

        div高=height-(border+padding)2=50-(1+2)2=44px;

        div宽=width-(border+padding)2=50-(1+2)2=44px;

盒子模型包含四个部分:内容(content)、内填充(padding)、边框(border)、外边距(margin);盒子模型又分为两种:IE盒子模型和W3C标准模型,IE的width,height含padding、border、 content部分,W3C的width hieight就是content的width height

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏申龙斌的程序人生

零基础学编程042:画函数图像

孩子马上就要参加高考了,我以前还能帮着辅导一下数学功课,现在就不行了,一来她很忙,晚上很晚才到家,二来高中的数学题太变态,琢磨一个小时可能也解不出一道。 前几天...

3039
来自专栏Coco的专栏

【CSS3进阶】酷炫的3D旋转透视

1464
来自专栏挖坑填坑

人工智能学习(python基础算法库pandas与可视化库Matplotlib )

第一课也是第一周学习的内容,学习使用jupyter notebooks。了解python常用的数据出来和数据可视化库。

962
来自专栏网络和编程

float类型加法精度损失问题(C++)

奇怪的就是:a依然是406682816,并没有加一。网上查了一些资料,这里分享一下原因。

45115
来自专栏木子昭的博客

机器学习三剑客之PandasPandas的两大核心数据结构Panda数据读取(以csv为例)数据处理Pandas的分组和聚合(重要)

Pandas是基于Numpy开发出的,专门用于数据分析的开源Python库 Pandas的两大核心数据结构 Series(一维数据) 允许索引重复...

2736
来自专栏一心无二用,本人只专注于基础图像算法的实现与优化。

任意半径局部直方图类算法在PC中快速实现的框架。

     在图像处理中,局部算法一般来说,在很大程度上会获得比全局算法更为好的效果,因为他考虑到了图像领域像素的信息,而很多局部算法可以借助于直方图获得加速。同...

1928
来自专栏codelang

用kotlin来实现一个饼图

742
来自专栏数据小魔方

条件格式的特殊用法——创意百分比构成图

今天继续跟大家分享条件格式的特殊用法——创意百分比构成图。 ▽▼▽ 上一篇推送已经跟大家介绍过如何通过设置条件格式来完成特殊的单元格字体、填充效果。今天趁热打铁...

3816
来自专栏小红豆的数据分析

小蛇学python(9)matplotlib的基本使用

matplotlib作为python中可视化最经典的库,是个不得不学习的东西。尽管长江后浪推前浪,涌现出了很多更好的可视化库,比如Plotly。不过,它们几乎全...

1263
来自专栏take time, save time

你所能用到的BMP格式介绍(一)

这些说明是我担任学校多媒体技术助教自己编写的实验说明,呕心沥血结合C++详细介绍BMP格式。  原理篇: 一、编码的意义。        让我们从一个简单的问题...

2827

扫码关注云+社区