你的位置:首页 > 软件开发 > 网页设计 > 从一篇外文谈谈盒模型

从一篇外文谈谈盒模型

发布时间:2016-05-09 23:00:06
从一篇外文谈谈盒模型 声明:作为初涉前端的老菜鸟,在对知识的理解上肯定会出现些许偏差,在此先向各位看官提个醒,呵呵。我认为,理解盒子模型是学好整个CSS的关键之关键基础。本文借鉴http://www.chinaz.com/design/2010/1229/151993.sht ...

从一篇外文谈谈盒模型

从一篇外文谈谈盒模型

 

声明:作为初涉前端的老菜鸟,在对知识的理解上肯定会出现些许偏差,在此先向各位看官提个醒,呵呵。我认为,理解盒子模型是学好整个CSS的关键之关键基础。本文借鉴http://www.chinaz.com/design/2010/1229/151993.shtml(翻译篇)的基础上,重新翻译了http://www.sitepoint.com/web-foundations/css-box-model/(纯英文)这篇文章,再加上自己的理解,谈一谈盒模型。

翻译外文:

对盒子模型(box model)概念的理解,以及盒子模型如何决定某个元素最终尺寸,将有助于你理解一个元素如何在网页中进行定位。盒子模型主要适用于块级元素。顺便提一个与此相关的概念:行内布局模型(inline layout model)——定义了行内元素是如何定位的,在行内元素格式(Inline Formatting)中有具体说明。

计算盒子尺寸

在CSS2.1中,块级元素都是以矩形显示。我们计算一个块级元素的整体尺寸,需要包括内容区域(the content area)的宽高,以及这个元素被赋予的所有外边距(margin)、内边距(padding)和边框(border)。

我们可以通过声明和定义一个元素的宽度和高度属性来定义这个元素的内容的宽度。如果不给出声明,这个元素宽度和高度的缺省属性就是浏览器默认的。

对于静态元素(没有定位的)和设置相对定位的元素,他们的宽度是默认的,即这一元素的宽度是其包含块(即最近的父元素)的宽度减去所有横向的外边距、内边距和边框以及滚动条。也就是说,这一元素的宽度就是其包含块的宽度减去自身横向上所有外边距、内边距、边框和滚动条(如果有的话)所剩余的宽度。

包含块的尺寸和定位是其子元素尺寸和定位的参考。尽管元素的定位依照他们的包含块,但是又不完全依照包含块,这些元素也可以溢出他们的包含块。大多数情况下,对于子盒子来说,generated boxes扮演包含块的角色。关于包含块的更多细节请参照Containing Block.

 专栏:浮动元素和他们的宽度

起先,在CSS2中,没有声明宽度的浮动元素不会收缩至紧紧包裹其内容,而是与他们的父元素保持一样的宽度。在CSS2.1中,这种情况发生了改变,没有声明宽度的浮动元素将会紧紧包裹其内容。然而,在IE6和更早的版本中,一个没有声明宽度的浮动元素将默认紧紧包裹其内容,除非他的一个子元素设置了布局,在这种情况下,浮动元素的宽度会延伸至充满整个可用内容区域。另外有一种情况需要说明,当一个没有设置宽度的浮动元素包含一个右浮动的子元素时,该浮动元素的宽将与其父元素保持一致。这种浮动的情况在之前的IE浏览器,包括IE7中都是存在的(之前的Firefox,包括2.0版本中也存在,其实这是一个bug。但是这个问题在Firefox3.0 Alpha 6 版本中已经得到了解决)。

因此,为避免出现上述bug,尽量给浮动元素设置一个明确的宽度,在网页布局时总是会安全一些。然而,只要你注意上述问题,你会发现,无宽度的浮动元素在某些特定情况下总是有用的,比如在横向流式布局菜单中(fluid-width horizontal menus).

 

对于宽度为auto的浮动或者绝对定位的元素(包含设置固定定位),他们会使generated box在尺寸上收缩至紧紧包含内容。 

如果没有设置高度或者最小高度和最大高度,无论内容区域如何设置定位,它的高度将和内容的高度保持一致。

因此,为弄清一个元素在网页中需要的总体空间,需要将内容区域的内边距、边框和外边距都加上。当然,一个元素可能没有设置任何的内边距、边框和外边距,这种情况下,它的尺寸将有自身的内容支撑。

如果一个元素仅包含浮动或者绝对定位的元素,它将没有任何内容,它的高度将为0。这一问题我们将在Floating and Clearing这篇文章中阐述。

盒模型的实现

Total width = left margin +left border + left padding + width + right padding + right border + right margin

Total height = top margin + top border + top padding + height + bottom padding + bottom border + bottom margin


原标题:从一篇外文谈谈盒模型

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录