html盒子模型元素占位高度,CSS 盒子模型尺寸如何计算?

CSS 盒子模型尺寸如何计算?

盒子模型是 CSS 中一个重要概念, 就是在网页设计中经常用到的 CSS 技术所使用的一种思维模型. 盒子模型指在一个网页文档中, 每个元素都被呈现为一个矩形的盒子, 描述了元素所占空间的内容.

盒子模型 (Box Modle) 可以用来对元素进行布局, 包括实际内容 (content), 内边距(padding), 边框(border) 与外边距 (margin) 这几个部分.

盒子模型分为两种: IE 盒子模型 (怪异盒模型) 和标准 w3c 盒模型.

1, 标准盒子的尺寸计算

盒子自身的尺寸: 内容的宽高 + 两侧内边距 + 两侧边框

盒子在页面中占位的尺寸: 内容的宽高 + 两侧内边距 + 两侧边框 + 两侧外边距

盒子自身尺寸

div.box1{

width:200px;

height:200px;

padding:20px;

border:5pxred solid;

}

/* 盒子自身的宽度: 200px + 20px*2 + 5px*2 = 250px*/

/* 盒子自身的高度: 200px + 20px*2 + 5px*2 = 250px*/

div.box2{

width:200px;

height:200px;

padding:20px;

border:5pxred solid;

margin:50px100px;

margin-left:-100px;/* 当左侧外边距变为负值: 盒子的占位宽度: 200px + 20px*2 + 5px*2 + (-100px) + 100px= 250px*/

}

/* 盒子占位的宽度: 200px + 20px*2 + 5px*2 + 100px*2= 450px*/

/* 盒子占位的高度: 200px + 20px*2 + 5px*2 + 50*2 = 350px*/

/* 当盒子的外边距为负值时, 盒子占位的尺寸有可能小于盒子自身的尺寸 */

box2 前面的文字

box2 后面的文字

2, 怪异盒子的尺寸计算

直接将宽 / 高属性设定为盒子自身的整体尺寸, 如果带有内边距或边框, 则通过缩小内容区域来实现

更多前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!

来源: http://www.css88.com/qa/css3/16014.html