文章目录
一、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属性进行设置.
1.content-box 内容盒子
box-sizing属性的默认值,“一”中示例1设置的盒子就是内容盒子
这个时候我们在示例1的基础上再加上内边距、边框和外边距
示例2:
<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盒子的宽高计算公式
css中width和height是设置内容区域的宽高,
盒子的宽高需要加上内间距和边框,外边距不算在内
盒子宽度=内容的宽度+左右内间距+左右边框的宽度
盒子高度=内容的高度+上下内间距+上下边框的宽度
2.border-box 边框盒子(怪异模型)
css中width和height设置的是盒子的最终的宽高
在示例2的基础上加上一行“box-sizing: border-box;”即可变成边框盒子,
示例3:
<style>
.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 属性设置为靠上、居中和靠下
<style>
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=""/>