一、什么是盒子模型?
1.如何回答?
盒子模型是css中的一种思维模型,即把网页内容看成一个盒子,这个盒子由外到内包括margin、border、padding、content。根据浏览器计算方式不同分为两种模型:标准模型(w3c模型)和怪异模型(又称IE模型)。
他们的主要区别是:标准模型的宽度不包含padding和border,怪异模型的宽度包含padding和border(个人认为主要表现在内容区域的大小变化)。
2.详解
举个栗子,设置如下盒子样式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.external{
width: 100px;
height:100px;
margin:10px;
padding:10px;
border: 2px solid red;
box-sizing: border-box;//切换为怪异模型
background: #4A2AB2;
}
</style>
</head>
<body>
<div class="external">
<div class="internal"></div>
</div>
</body>
</html>
看下图:
标准模型下,width=border+pading+content(设置的宽度)=124px
怪异模型下,width=content(这里面已经包含了border和padding)=100px
可以非常直观的看到他们之间的区别在哪里了把~
怪异模型下设置的border和padding都在width里面啦,内容区域就变小啦
3.如何转换?
两种模型之间的转换可以使用css中的box-sizing来切换。
默认情况下,box-sizing为content-box,也就是标准模型。可通过设置box-sizing的值为border-box准换为怪异模型。
4.什么场景下用?
那么什么情况下需要指定怪异模型或标准模型呢?
我们来举个栗子,设置如下样式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.external{
width: 100px;
height:100px;
background: #4A2AB2;
}
.internal{
width: 100%;
height: 50px;
background: red;
padding-left: 10px;
}
</style>
</head>
<body>
<div class="external">
<div class="internal"></div>
</div>
</body>
</html>
然后看看运行结果呢~
很明显,红色这一块多了10px,就是我们设置的padding-left:10px
那这个时候呢我们就需要把他转为怪异模型啦~,加入box-sizing:border-box,如下图
再看看结果呢~
此时就很nice啦~、
综上所诉,当外盒子设置了固定值,内盒子用百分比且有设置border或者padding的时候,你就需要注意啦,就可能会存在这个问题~
总结
以上就是今天要讲的内容,本文仅仅简单介绍盒子模型原理和转换方式,简单的描述了一下使用场景,如果有更好的想法告诉我吧~。