css中的盒子模型

短命女 2022-07-15 22:26 196阅读 0赞

盒子模型是css中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型有两种，分别是 **ie 盒子模型**和标准 w3c 盒子模型。他们对盒子模型的解释各不相同，先来看看我们熟知的标准盒子模型：

![标准盒子模型][SouthEast]

从上图可以看到标准 **W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。**

![IE盒子模型][IE]

**　从上图可以看到 IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。**

网页中的盒子模型；我们常常要控制盒子模型的宽度width:

w3c中的盒子模型的宽:包括margin+border+padding+width;

width:margin\*2+border\*2+padding\*2+width;

height:margin\*2+border\*2+padding\*2+height;

iE中的盒子模型的width:也包括margin+border+padding+width;

上面的两个宽度相加的属性是一样的。不过在ie中content的宽度包括padding和border这两个属性；

例如一个盒子模型如下：margin:20px,border:10px,padding:10px;width:200px;height:50px;

如果用w3c盒子模型解释，那么这个盒子模型占用的

宽度为：20\*2+10\*2+10\*2+200=280px;

高度：20\*2+10\*2+20\*2+50=130px;

盒子的实际宽度大小为:10\*2+10\*2+200=240px;

实际高度：10\*2+10\*2+50=90px;

用ie的盒子模型解释 ：盒子在网页中占据的大小为20\*2+200=240px; 高：20\*2+50=90px;

盒子的实际大小为：宽度:200px, 高度:50px;

我们常常理解的盒子模型是w3c这样的盒子模型

[SouthEast]: /images/20220716/60e2a2496484461db0db7c46d9eea258.png
[IE]: /images/20220716/0d426b6cc81349a0bd521094a82bc8dc.png

发表评论取消回复

表情：

评论列表（有 0 条评论，196人围观）

还没有评论，来说两句吧...

相关阅读

相关 css盒子模型

浏览器中的元素都是一个个的盒子，每一个盒子都有特定的结构。块级元素和行级元素块级元素（block element）块级元素会独占一行，默认其宽度自动填满其

绝地灬酷狼/ 2022年09月21日 11:56/ 0 赞/ 21 阅读

相关 css盒子模型

1.盒子模型所有的html元素都可以看做盒子。 ![这里写图片描述][20160615161131029] 总元素的宽度=宽度+左填充+右填充+左边框+右边框+左

叁歲伎倆/ 2022年09月21日 04:57/ 0 赞/ 11 阅读

相关【CSS】——盒子模型

前提　　在跟着牛腩老师学习前台制作的时候，觉的和在C/S制作的时候有很大的不同，因为之前的界面都是可视化的，都是通过拖拽创建的，而进入B/S阶段所有的控件都是通过代码来

客官°小女子只卖身不卖艺/ 2022年07月28日 01:04/ 0 赞/ 263 阅读

相关 css中的盒子模型

盒子模型是css中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型有两种，分别是 ie 盒子模型和标准 w3c 盒子模型。他们对盒子模型的解释各不相同，先来看看我们熟

短命女/ 2022年07月15日 22:26/ 0 赞/ 197 阅读

相关 css盒子模型

一般称IE8及其以上为w3c盒子模型，W3C 盒子模型的范围包括 `margin、border、padding、content`，并且 `content` 部分不包含其他部分。

不念不忘少年蓝@/ 2022年07月15日 08:48/ 0 赞/ 226 阅读

相关 css盒子模型

CSS盒子模型 ![Center][] 一个区块元素所占的空间总大小： X轴：margin-left + border-left + padding-left + w

今天药忘吃喽~/ 2022年06月11日 00:51/ 0 赞/ 302 阅读

相关 css_盒子模型

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式。元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了

「爱情、让人受尽委屈。」/ 2022年05月25日 05:05/ 0 赞/ 280 阅读

相关【CSS】盒子模型

CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，

以你之姓@/ 2022年04月01日 02:40/ 0 赞/ 374 阅读

相关 css盒子模型

盒模型的概念盒子模型（box model）。网页中，每一个元素都占有一定的空间，无论是div、h1~h6、还是p，都可以看成是盒子。盒子模型的概念可以结合我们

喜欢ヅ旅行/ 2022年01月22日 07:51/ 0 赞/ 491 阅读

相关 css 盒子模型

span标签(行内标签)：为了设置单独的样式 div标签(块级标签): 用来布局,会将其中的子元素内容作为一个独立的整体而存在

客官°小女子只卖身不卖艺/ 2021年07月24日 14:14/ 0 赞/ 553 阅读