1、标准盒子模型与怪异盒子模型
简单而言：
-
标准盒模型
width 和 height 属性所指定的宽高就是实际内容区的大小，而盒子实际大小是：
横向空间：width + padding宽度 + border宽度
纵向空间：height + padding宽度 + border宽度 -
怪异盒模型
在怪异模式下，width 和 height 做指定的宽高就是盒子的实际宽高，而它内容区部分的大小是在 width 或 height 指定尺寸的基础上，再减去 border 和 padding 所占的宽度。
2、外边距折叠
简单而言：
- 上下排列
盒子A和盒子B，盒子A的下边距是10px，盒子 B 的上边距是 20px，那么在渲染时候，它俩之间的距离将会是 20px。 - 左右排列
盒子A和盒子B，盒子A的右边距是10px，盒子 B 的左边距是 20px，那么在渲染时候，它俩之间的距离将会是 30px。
下面是代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
</head>
<style>
.div1 {
width: 300px;
height: 100px;
padding: 10px;
border: 1px solid #000;
margin: 20px;
}
.content-box {
box-sizing: content-box;
}
.border-box {
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 10px;
border: 1px solid #000;
margin: 20px;
}
.div3 {
width: 300px;
height: 100px;
padding: 10px;
border: 1px solid #000;
margin: 30px;
}
.p1{margin: 20px;}
.p2{margin: 30px;}
</style>
<body>
<!-- 标准盒模型 -->
<div class="div1 content-box">我是 标准盒模型 content-box</div>
<!-- 怪异盒模型 -->
<div class="div1 border-box">我是 怪异盒模型 border-box</div>
<hr>
<!-- 外边距折叠 -->
<div class="div2 border-box">我的margin是20px</div>
<div class="div3 border-box">我的margin是30px</div>
<hr>
<span class="p1">我的margin是20px</span>
<span class="p2">我的margin是30px</span>
</body>
</html>
从这几行代码就可以看出盒子模型、外边距折叠的效果了。
563
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
