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

相关文章

来自专栏图形学与OpenGL

6.5编程实例-立方体透视投影

GLint winWidth = 600, winHeight = 600; //设置初始化窗口大小

1561
来自专栏一“技”之长

iOS界面布局之四——使用第三方库Masonry进行autolayout布局

        在前面博客,我们讨论了使用iOS原生的框架代码来进行autolayout布局。在使用中,我们会发现,无论是代码量还是结构的清晰度,都十分不能让我...

972
来自专栏非著名程序员

Android 自定义View高级特效,神奇的贝塞尔曲线

? (这就是贝塞尔曲线 ) 投稿作者:一口仨馍/csdn 原文链接: http://blog.csdn.net/qq_17250009/article/de...

4149
来自专栏SHERlocked93的前端小站

CSS 中重要的层叠概念

最近在项目的过程中遇到了一个问题,menu-bar希望始终显示在最上面,而在之后的元素都显示在它之下,当时设置了 z-index 也没有效果,不知道什么原因,因...

962
来自专栏儿童编程

Processing雁群实验(续)

(1)旋转复杂不规则图形; (2)运用二维数组定义图形; (3)鼠标左右移动控制物体沿 Y 轴旋转; (4)点击鼠标线条变色。

1132
来自专栏calmound

CSS继承特殊

继承 CSS的某些样式具有继承性。 继承是一种规则,它允许样式不仅作用于某个特定html标签元素,而且应用于其后代    如:在p中的所有字体都为红色     ...

2615
来自专栏练小习的专栏

渲染放大的图片image-rendering笔记

image-rendering: pixelated,控制浏览器如何渲染放大的图片,比如图像的自然尺寸为100×100像素,但网页指定其尺寸不为100*100像...

2106
来自专栏前端说吧

CSS3的transition动画功能

3056
来自专栏柠檬先生

css3 RGBA 红色R+绿色G+蓝色B+Alpha通道

语法:   R:红色值。正整数 | 百分数   G:绿色值。正整数 | 百分数   B:蓝色值。正整数| 百分数   A:透明度。取值0~1之间...

19010
来自专栏落影的专栏

iOS坐标系探究

APP 在渲染视图时,需要在坐标系中指定绘制区域。这个概念看似乎简单,事实并非如此。

4593

扫码关注云+社区