本文讲解css中w3标准盒模型
和IE标准盒模型
的区别。
所有的html元素都可以看做是一个盒子,它包括边距margin
,边框border
,填充padding
,内容content
几部分组成。
css中的盒模型分为两种,分别为w3标准盒模型和IE盒模型,它们的区别在于大小不同
。
- w3标准盒模型的width,height就是指content的区域
- IE标准盒模型的width,height指的是content + padding + border
一、w3标准盒模型
w3标准盒模型的width,height就是指content的区域。
<!DOCTYPE html>
<html>
<head>
<style>
.w3{
width: 150px;
height: 20px;
border: 10px solid black;
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<div class="w3" >
W3标准盒模型
</div>
</body>
</html>
可以看到,width为150,height为20,都是在content区域。
二、IE标准盒模型
IE标准盒模型的width,height指的是content + padding + border。
<!DOCTYPE html>
<html>
<head>
<style>
.ie{
width: 150px;
height: 20px;
border: 10px solid black;
padding: 10px;
margin: 10px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="ie" >
IE标准盒模型
</div>
</body>
</html>
可以看到,width 150 = content 110 + padding-left 10 + padding-right 10 + border 20; 而 高度设置为20,content直接变成了0(没变成负的);
三、两种盒模型之间的切换
css有个box-sizing
属性,可以切换盒模型
- w3标准盒模型(默认值):content-box
- IE标准盒模型:border-box
<!DOCTYPE html>
<html>
<head>
<style>
.w3{
width: 150px;
height: 50px;
border: 10px solid black;
padding: 10px;
margin: 10px;
box-sizing: content-box;
}
.ie{
width: 150px;
height: 50px;
border: 10px solid black;
padding: 10px;
margin: 10px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="w3" >
W3标准盒模型
</div>
<div class="ie" >
IE标准盒模型
</div>
</body>
</html>