一.先用代码和效果图来说明:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css盒模型</title>
</head>
<style type="text/css">
.content {
width: 300px;
height: 400px;
border: 5px solid #005500;
padding: 20px;
background-color: #898989;
}
</style>
<body>
<div class="content" id="zwkkkk1"></div>
</body>
</html>
这里我们会发现明明我们设置了300400长宽比,呈现出来的是一个350450的盒子.
打开调试页面可以看出来:
设置的300*400出现在了最里面的那个蓝框中,与此同时我们可以发现在这个盒模型中除了我们设置的内容(content),还有margin(外边距)、border(边框)、padding(内边框)
由此可见:
1.margin(外边距) - 清除边框外的区域,外边距是透明的。
2.border(边框) - 围绕在内边距和内容外的边框。
3.padding(内边距) - 清除内容周围的区域,内边距是透明的。
4.content(内容) - 盒子的内容,显示文本和图像。
可以得出:
width(350)=300(content)+202(padding)+52(border)
height(450)=400(content)+202(padding)+52(border)
即为:
盒子的宽度 = 内容宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距
盒子的高度 = 内容高度 + 上填充 + 下填充 + 上边框 + 下边框 + 上边距 + 下边距
二.两种盒子模型:
1.标椎盒子模型:
2.IE(怪异盒子模型):
不同之处:在IE盒子模型中width是content+padding+border这三个部分的宽度,在IE盒模型中,我们设置的height,width值包含:(content)+填充(padding)+边框(border) 这三个部分,而标准盒模型中height,width值只是content部分;
然后就是:
box-sizing的使用狂可以切换盒模型
box-sizing: content-box /**是W3C盒子模型 */
box-sizing: border-box /**是IE盒子模型*/
/**box-sizing的默认属性是content-box*/