CSS盒⼦的三种类型（border-box、content-box）⽂章⽬录
⼀、CSS盒⼦
⼀个盒⼦通常包括四个区域，让我们先写⼀个设置好width和height属性的div。
1
⽰例1：
<style>
.box{
width: 100px;
height: 200px;
}
</style>
<div class = "box"></div>
现在在浏览器运⾏，打开F12-Elements⼀栏，可以查看到这个盒⼦的具体状态：
最⾥层的宽⾼是我们设置的width和height，这个部分是content内容区域。
往外分别是：padding内边距、border边框和margin外边距。
1.1 盒⼦的四个区域
可知，⼀个标准的盒⼦包括以下四个区域（以下顺序按照从内到外）：
区域说明
内容区域代表盒⼦的实际内容部分，它是由 width 宽度和 height ⾼度来确定的内间距区域代表盒⼦与实际内容之间的空⽩区域，由 padding 属性设置
边框区域代表盒⼦的边框，是内间距区域和外边距区域的边界，由 border属性设置外边距区域代表此盒⼦的边框与相邻的其他盒⼦边框之间的距离，由 margin 属性设置
⼆、CSS盒⼦的类型
CSS盒⼦类型使⽤box-sizing属性进⾏设置.
box-sizing属性的默认值，“⼀”中⽰例1设置的盒⼦就是内容盒⼦
这个时候我们在⽰例1的基础上再加上内边距、边框和外边距
<style>
.box{
width: 100px;
height: 200px;
padding: 10px;
border: 5px solid blue;
margin: 20px;
}
</style>
<div class = "box"></div>
此时再看浏览器，发现盒⼦的宽度和⾼度变成了130*230！
再看浏览器给出的盒⼦模型图，我们将发现宽度的130似乎是由100+（10+5）×2算出来的，也就是width+（padding+border）*2。
那我们不妨再⽤这个这个公式套在height上试⼀试能不能⾏得通？
200+10+5+10+5=230 === height
此时我们惊讶地（嘿嘿，并不惊讶hhh）发现确实是这样计算的，盒⼦囊括的就是红框内部。
content-box盒⼦的宽⾼计算公式
padding是外边距还是内边距css中width和height是设置内容区域的宽⾼，
盒⼦的宽⾼需要加上内间距和边框，外边距不算在内
盒⼦宽度=内容的宽度+左右内间距+左右边框的宽度
盒⼦⾼度=内容的⾼度+上下内间距+上下边框的宽度
2.border-box 边框盒⼦（怪异模型）
css中width和height设置的是盒⼦的最终的宽⾼
在⽰例2的基础上加上⼀⾏“box-sizing: border-box;”即可变成边框盒⼦，
⽰例3：
.box {
box-sizing: border-box;
width:100px;
height:200px;
padding:10px;
border:5px solid blue;
margin:20px;
}
</style>
<div class="box"></div>
查看浏览器中div的盒⼦模型，可以看到红框的宽度为100，⾼度200，⽽中间的内容区域content变为了70×170（100-（10+5）*2，200-（10+5）*2）
3.特殊的盒⼦：替换元素
常见的替换元素有<img> 、 <iframe> 、 <video> 等
替换元素加载的是外部内容，并不会受现有的 CSS 属性的影响。
但可以通过 CSS 来控制替换元素在盒⼦中的位置
以<img/>为例，加载⼀张图⽚，限制<img/> 盒⼦的宽⾼，
object-fit 属性：让图⽚等⽐例占满整个盒⼦，裁掉显⽰不下的部分。
object-position 属性：设置图⽚在盒⼦中的位置，可以是靠下或者居中等：
⽰例：
⽤img加载⼀张图⽚，分别将object-position 属性设置为靠上、居中和靠下
img{
width: 300px;
}
#img1,#img2,#img{
height: 300px;
object-fit: cover;
}
#img1{
object-position: top;
}
#img2{
object-position: center;
}
#img3{
object-position: bottom;
}
</style>
<img src = "1.jpg">
<img id = "img1" src="1.jpg" alt=""/> <img id = "img2" src="1.jpg" alt=""/> <img id = "img3" src="1.jpg" alt=""/>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。