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