css盒子模型高度 |css2.1规范

height: 200px;

上面的代码表示元素的高度为200像素。需要注意，元素的高度并不是真实的高度。如果没有设置border和padding，那么元素的高度就是指content的高度。但是当设置border和padding的时候，元素的高度就会增加。例如：

div {
width: 200px;
border: 10px solid #000;
padding: 20px;
height: 150px;
}

上面的代码表示一个div元素，它的宽度为200像素，边框为10像素，内边距为20像素，高度是150像素。由于元素的高度包含了border和padding的高度，实际上content的高度只有100像素。

如果希望设置元素的高度为content的高度，可以使用box-sizing属性：

div {
width: 200px;
border: 10px solid #000;
padding: 20px;
height: 150px;
box-sizing: border-box;
}

上面的代码中，box-sizing设置为border-box，表示元素的高度包含了border和padding的高度。

除了使用具体的数值设置高度外，还可以使用百分比和auto。使用百分比可以让元素的高度随着父元素的高度变化而变化，而auto可以让浏览器自动计算元素的高度。例如：

div {
height: 50%;
}
img {
height: auto;
}

上面的代码中，div的高度设置为50%，表示它的高度是父元素高度的50%。而img元素的高度设置为auto，表示浏览器会自动计算图片的高度。

总之，盒子模型的高度属性在前端开发中非常重要。知道如何设置和使用高度，可以让大家更好地控制元素的布局和排版。