在介绍两种盒模型的区别之前先了解一下什么是盒模型?
CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
Margin(外边距) - 清除边框外的区域,外边距是透明的
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域,内边距是透明的。
Content(内容) - 盒子的内容,显示文本和图像。
首先要介绍margin不会影响盒子的宽高只会影响盒子占据位置的大小。
标准盒模型
盒子占位宽度 =margin-left + border-left +padding-left + width + padding-right+border-right+margin-right
盒子真正的宽度=border-left+padding-left+width+padding-right+border-right
盒子占位高度 = margin-top + border-top+pendding-top+height+pendding-bottom+border-bottom+margin-bottom
盒子真正的高度=border-top+padding-top+height+padding-bottom+border-bottom
以上的width和height分别指盒模型的属性值
如下示例.box就是一个标准盒模型,宽高为100px,边框10px,内边距30px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="fa">
<div class="box">
</div>
</div>
</body>
</html>
<style>
*{
margin: 0;
padding: 0;
}
.fa{
width: 500px;
height: 500px;
border: 1px solid red;
}
.box{
box-sizing: content-box;
width: 100px;
height: 100px;
border: 10px solid yellow;
padding: 30px;
background: rebeccapurple;
}
</style>
如图所示黄色边框紫色的块高度和宽度都是180px
怪异盒模型
盒子占位宽度 =margin-left + width+margin-right
盒子真正的宽度=width
盒子内容宽度 = width减border-left减border-right减padding-left减padding-right
盒子占位高度 = margin-top + height+margin-bottom
盒子内容的高度 = width减border-top减border-bottom减padding-top减padding-bottom
盒子真正的高度=height
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="fa">
<div class="box">
</div>
</div>
</body>
</html>
<style>
*{
margin: 0;
padding: 0;
}
.fa{
width: 500px;
height: 500px;
border: 1px solid red;
}
.box{
box-sizing: border-box;
width: 100px;
height: 100px;
border: 10px solid yellow;
padding: 30px;
background: rebeccapurple;
}
</style>