盒子模型是 CSS 中一个重要概念, 就是在网页设计中经常用到的 CSS 技术所使用的一种思维模型. 盒子模型指在一个网页文档中, 每个元素都被呈现为一个矩形的盒子, 描述了元素所占空间的内容.
盒子模型 (Box Modle) 可以用来对元素进行布局, 包括实际内容 (content), 内边距(padding), 边框(border) 与外边距 (margin) 这几个部分.
盒子模型分为两种: IE 盒子模型 (怪异盒模型) 和标准 w3c 盒模型.
1, 标准盒子的尺寸计算
盒子自身的尺寸: 内容的宽高 + 两侧内边距 + 两侧边框
盒子在页面中占位的尺寸: 内容的宽高 + 两侧内边距 + 两侧边框 + 两侧外边距
- <!DOCTYPE html>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title > 盒子自身尺寸</title>
- <style>
- div.box1{
- width:200px;
- height:200px;
- padding:20px;
- border:5px red solid;
- }
- /* 盒子自身的宽度: 200px + 20px*2 + 5px*2 = 250px*/
- /* 盒子自身的高度: 200px + 20px*2 + 5px*2 = 250px*/
- div.box2{
- width:200px;
- height:200px;
- padding:20px;
- border:5px red solid;
- margin:50px 100px;
- 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*/
- /* 当盒子的外边距为负值时, 盒子占位的尺寸有可能小于盒子自身的尺寸 */
- </style>
- </head>
- <body>
- <div></div>
box2 前面的文字
<div></div>
box2 后面的文字
</body>
</HTML>
2, 怪异盒子的尺寸计算
直接将宽 / 高属性设定为盒子自身的整体尺寸, 如果带有内边距或边框, 则通过缩小内容区域来实现
更多前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/css3/16014.html