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 条评论
登录 后参与评论

相关文章

来自专栏深度学习与数据挖掘实战

干货|PyTorch实用代码段集锦

Facebook公司开源的深度学习框架PyTorch越来越火,PyTorch易于上手。本文节选github中PyTorch的常用实用代码片段,供大...

1097
来自专栏数据处理

图片RGB三维矩阵的表示

3841
来自专栏PPV课数据科学社区

撩图 | 数据科学最受欢迎的工具

编者按: 1)并不是所有工具都要学习,一般入门熟练掌握1个,进阶掌握2-3个即可; 2)下图是不是知识的学习顺序,而是从薪酬待遇进阶方面考虑的;你也不必要从第一...

3417
来自专栏知晓程序

在小程序里实现手势缩放,你可以这样做 | 实战教程

752
来自专栏Flutter入门

偶遇FFmpeg(一) —— 初了解

FFmpeg的介绍网上还是很多的。官网的wiki上面也有很多内容。围绕目标,主要是有两套实现的思路。早期,其实是想通过自己编写C代码,来完成整个流程的。但是无奈...

1262
来自专栏AI科技大本营的专栏

Dropbox如何使用机器学习从数十亿图片中自动提取文字

【导读】提到 Dropbox,大家可能都知道这是一个文件同步、备份、共享的云存储软件。其实 Dropbox 可以实现的功能远不止这些。今天就为大家介绍 Drop...

632
来自专栏iOSDevLog

建立您的第一个AR体验

此示例应用程序运行ARKit世界跟踪会话,其内容显示在SceneKit视图中。为了演示平面检测,应用程序只需放置一个SCNPlane对象来可视化每个检测到ARP...

682
来自专栏AI研习社

Github 项目推荐 | GAN 非平稳纹理合成

该库是论文「Non-stationary texture synthesis using adversarial expansions.」的官方代码。

813
来自专栏ATYUN订阅号

深度学习图像识别项目(下):如何将训练好的Kreas模型布置到手机中

今天,我们将这种经过训练的Keras模型部署到iPhone手机或者说iOS的APP中,在这里我们使用CoreML,这 是一种易于使用的Apple应用程序机器的学...

1303
来自专栏机器学习实践二三事

使用FCN做图像语义分割(实践篇)

FCN原理 原理我已经在上篇博客说过,大家可以参考FCN原理篇 代码 FCN有官方的代码,具体地址是FCN官方代码 不过我用的不是这个代码,我用的是别人修改...

3977

扫码关注云+社区