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

html-css017

如何计算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的情况下，块的宽度是延伸自动填充满它的父元素的宽度区域

div的实际高度为margin+border+padding+height

也就是外边距+边框线+内边距+元素自身的高度。

例如:

div{margin: 10px padding: 10px border-width:10px height:50px }

那么  这个div实际占用页面的高度就是110px

首先行高百分比的书写，百分比是针对字体大小进行设置的，也就是说如果你的文字大小为20px，那么100%就是20px，这个和你的需求不符合

其次，CSS当中也不能写成height/2的样子

那么，两种方案能够解决这个问题

1 改变标签的默认显示样式，然后使用vertical-align属性进行控制

<style>

.box {

width: 800px

height: 400px

border: 10px solid red

}

.demo {

float: left

display: table

width: 33%

height: 50%

border: 1px solid black

}

.demo > p {

display: table-cell

vertical-align: middle

}

</style>

<div class="box">

<div class="demo">

<p>新手书籍推荐：《HTML5布局之路》</p>

</div>

</div>

显示效果：

2 使用JS进行动态的样式设置（即通过JS动态的获取这个标签的高度，然后再通过 元素.style.lineHeight的方法来设置具体的行高值，当然，这种设置比第一种要麻烦的多）