如何计算CSS盒子模型的高度

html-css090

如何计算CSS盒子模型的高度,第1张

盒子的高度 = content的高度 + padding-top(内上边距)+ padding-bottom(内下边距) + border-top(上边框边框) + border-bottom(下边框)

深入理解CSS盒子模型(The CSS Box Model)

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

盒子的尺寸的计算(Calculating BoxDimensions)

在CSS2.1中,块级元素只能是矩形形状的。当计算一个块级元素的整体尺寸时,需要同时把内容区域(content area)[注释1]的长宽,连同此元素的外边距,内边距,以及边框都计算在内

可以通过声明宽和高来定义一个元素的内容(content)的宽度和高度。如果没有做任何的声明,宽度和高度的默认值将是自动(auto)

对于浮动(floated)和绝对定位(absolutelypositioned)元素(包括固定定位(fixed)元素)来说, 自动状态的宽度会使generated box收缩到紧贴它内容大小。

 

我们知道,当我们放置一个块级元素于页面上时,并且不设置它的定位属性(relative,absolute,fixed),即position:static,或者设置了position:relative的情况下,块的宽度是延伸自动填充满它的父元素的宽度区域

css监听元素高度如下。

1、页面渲染完成后(onReady函数里)去获取元素1在页面上距离顶部的高度fixedTop。

2、用监听页面滚动函数onPageScroll得到当前页面滚动高度,高度是页面在垂直防线已滚动的距离(单位px)。