什么叫盒模型

日期:2019-07-29 15:27作者:北大青鸟西安华清校区

摘要:对一个网页来说,基本上页面上所有的元素对象,其实际的呈现形式都是一个盒子形状的抽象。如下图, 从图中可以看出,这个所谓的盒子其实就一个长方形(或者正方形)的抽象。从
关键词: 北大青鸟web前端

对一个网页来说,基本上页面上所有的元素对象,其实际的呈现形式都是一个盒子形状的抽象。如下图,

从图中可以看出,这个所谓的盒子其实就一个长方形(或者正方形)的抽象。从外到内,他由4层东西组成,分别是margin(间距)border(边框)padding(填充)content(内容)。他们的结构特征是一层包裹着一层。

另外一点就是,有点css基础的朋友应该都知道,css盒模型是区分方向的。请记住上右下左这个顺序。css中一些具有四项取值的属性(比如marginpadding等)都是按照这个顺序进行赋值的。

盒模型的两个核心问题

每当我们谈论css盒模型的时候,往往会涉及到盒模型延伸出来的两个问题,

  • W3C标准盒模型和IE盒模型
  • 盒模型在几种情况下的不同表现

两种不兼容的盒模型

业界的前端工程师们往往都不怎么青睐IE系的浏览器,甚至对比嫌弃无比。哈,我们这里不讨论这些历史遗留原因,只讨论W3C标准盒模型IE盒模型各自的原理。

对于盒子,我们最关心莫过于盒子的尺寸:这家伙要占多大地皮?

W3C标准盒模型

这里仍然拿上一节中的图片来说,

假设我们这个盒子的css属性如下,

.box {
    width: 200px;
    height: 180px;
    border: 5px solid #666;
    margin: 10px;
    padding: 10px;
}

那么,这个盒子需要占据的尺寸为,

宽度 = margin.left + border.left + padding.left + content.width + padding.right + border.right + margin.right
    = 10 + 5 + 10 + 200 + 10 + 5 + 10
    = 300
高度 = margin.top + border.top + padding.top + content.height + padding.bottom + border.bottom + margin.bottom
    = 10 + 5 + 10 + 180 + 10 + 5 + 10
    = 280

而盒子的实际大小为,

宽度 = border.left + padding.left + content.width + padding.right + border.right
    = 5 + 10 + 200 + 10 + 5
    = 280
高度 = border.top + padding.top + content.height + padding.bottom + border.bottom
    = 5 + 10 + 180 + 10 + 5
    = 260

简单的概括就是,盒子在页面占据的大小包括了marginborderpadding以及content。而盒子的实际大小(这里的实际大小,通过调试工具inspect可以看出来)包括borderpadding以及内容区域content,但是不包括margin

另一点需要说明的是,我们通过JavaScript代码获取某一个元素的大小时,所得到的widthheight其实是盒子模型中的content的大小。

IE盒模型

IE家的盒模型跟W3C标准有点不同,如下图所示

从图中可以看出,IE盒模型也包含marginborderpadding以及content这几部分。(图中的offset指的是元素的位置偏移,后面会说到这个问题。)

IE盒模型与标准盒模型的核心差异是:IE盒模型的content部分包含了borderpadding

同样的,假设我们这个盒子的css属性如下,

 

.box {
    width: 200px;
    height: 180;
    border: 5px solid #666
    margin: 10px
    padding: 10px;
}

那么,这个盒子需要占据的尺寸为,

 

宽度 = margin.left + content.width + margin.right
    = 10 + 200 + 10
    = 220
高度 = margin.top + content.height + margin.bottom
    = 10 + 180 + 10
    = 200

而盒子的实际大小为,

 

宽度 = content.width
    = 200
高度 = content.height
    = 180

ps:IE家的东西非要跟别人家的东西不一样,这是为什么呢?

盒模型在不同情况下的表现

块级元素盒模型的默认宽度

如果一个块级元素未声明明确的宽度,并且是static或者relative定位,那么他的宽度将会保持100%的宽度(这里的100%指的是其最近父层元素),同时盒子的paddingborder会向内推动而不是向外扩展。

但是,如果一旦明确设置了宽度为100%,那么padding将会向外延伸。如下图,

从图中可以看出,很明显前者没有明确设置宽度的情况下,padding将会向内推动,此时虽然黑底白字区域的宽度默认为100%,但是他的实际宽度是比其父层元素小的(没有300px)。

而后者明确设置了宽度为100%,此时padding将会向外延展,从而保证了元素的实际大小为100%(即300px),但是此时盒子的大小已经超过300px了。







转载请保留本文网址https://www.sxbdqn.cn
上一篇:北大青鸟WEB前端培训:web前端如何入门
下一篇:浅谈CSS中的伪元素和伪类
北大青鸟
校区简介
青鸟品牌
就业体系
就业学生
在线报名
热门课程
BCVE视频特效课程
BCUI全链路UI设计
BCSP软件开发专业
BCNT网络工程师
JAVA工程师
青鸟问答
男生学什么技术好
女生学什么专业好
北大青鸟师资
北大青鸟就业
北大青鸟学费