A-A+

图文解析:什么是CSS的盒子模型?(css box model)

2018年09月21日 css 暂无评论

虽然重复了千百遍,但是图表解释什么是CSS盒子模型的文章还是挺少的,这对初学者并不是很友好。
最简单的回答就是:

(1)有两种, IE 盒子模型、W3C 盒子模型;
(2)盒模型: 内容(content)、填充(padding)、边界(margin)、 边框(border);
(3)区 别: IE的content部分把 border 和 padding计算了进去;

但实际上,这样的回答,未必能让面试官满意。本文就再重复一下。
网页设计中的每个元素都是一个矩形框。简单粗暴的理解就是这样的。
如何精确计算盒子的大小?这是一个图表:

我们在Firebug中,或者chrome的开发者工具中,可能都能看到这样的图表,这可以很好地向您显示影响页面上任何框的数字:

请注意,在这两个示例中,边距都是白色的。边距的独特之处在于它本身不会影响盒子本身的大小,但它会影响与盒子交互的其他内容,因此是CSS盒子模型的重要部分。

宽度 width + padding-left + padding-right + border-left + border-right
高度 高度+填充顶部+填充底部+边框顶部+边框底部

如果这些值未声明,该怎么办?

如果填充padding或边框border未声明,则它们为0,或浏览器默认值(可能为零,尤其是对于通常未重置的表单元素)。
如果边框的宽度未声明(并且盒子是块级元素),则事情会变得更加怪异。

块级别框的默认宽度

如果没有声明宽度,并且盒子具有静态或相对定位,则宽度将保持100%的宽度,并且padding和border将向内推而不是向外。但是,如果您明确将框的宽度设置为100%,则填充将正常向外推动框。
 

这里的教训是,盒子的默认宽度不是真正的100%,而是一个不太明显的“剩下的东西”。这一点特别有价值,因为在很多情况下,设置不设置宽度都非常有用。
此外还需要注意如textarea的元素,它们非常需要设置宽度,以重置“cols”属性。因此,我们常需要将textarea明确设置为100%。

绝对定位的未设置宽度的盒子

没有设置宽度的绝对定位的盒子表现得有些奇怪。它们的宽度只与它内部的内容所需的宽度一致。盒子中只有一个字,那就是一个字的宽度,有两个字,就是两个字的宽度。
 

这会一直增加,直到盒子的宽度达到父级宽度的100%(具有相对定位的最近父级或浏览器窗口),然后开始换行。盒子垂直扩展以容纳内容感觉自然而且正常,但是当水平发生时它会感觉很奇怪。这种奇怪的感觉是有道理的,因为不同的浏览器如何处理这个问题有很多怪癖,更不用说文本在不同平台上呈现不同的事实。

没有宽度的浮动盒子

对于没有宽度的浮动元素,可以看到相同的确切行为。该盒子的宽度只能容纳内容,最大可达其父元素(尽管不需要相对定位)。由于这些无宽度框的脆弱性, 需要做的是是在关键任务场景中不依赖它们,例如整体页面布局。如果浮动一列用作侧边栏并依靠内部的某个元素(如图像)来负责保持其宽度,那么您就会遇到麻烦。

内联元素也是盒子

我们一直专注于将盒子作为块级元素。很容易将块级元素视为盒子,但内联元素也是盒子。把它们想象成真正的长而瘦的矩形,恰好包裹在每一条线上。他们可以像任何其他盒子一样有边距,填充,边框。
 

 
 

给我留言

Copyright © 前端面试题 保留所有权利.   Theme  Ality 桂ICP备17012235号-1

用户登录