行盒的盒模型
常见的行盒:包含具体内容的原始版
span、strong、em、i、img、video、audio
行级元素的特点:
- 内容决定大小
- 无法通过css改变宽高
显著特点
- 盒子沿着内容延申
- 行盒不能设置宽高(应该通过调整字体大小、行高、字体类型间接调整)
- 内边距(填充区)
水平方向有效，垂直方向只会影响背景，不会占据实际空间 - 边框(border)
同上 - 外边距(margin)
同上
行块盒
[常用来做分页]
display: inline-block的盒子
- 不独占一行
- 盒模型中所有尺寸都有效
display: inline-block;
<style>
.pager a{
border: 1px solid #e1e2e3;
text-align: center;
text-decoration: none;
color: #38f;
width: 34px;
height: 34px;
line-height: 34px;
display: inline-block;
}
a:hover{
border: 1px solid #38f;
background-color: #f2f8ff;
}
</style>
<body>
<div class="pager">
<a href="">1</a>
<a href="">2</a>
<a href="">3</a>
<a href="">4</a>
<a href="">5</a>
<a href="">6</a>
<a href="">7</a>
<a href="">8</a>
<a href="">9</a>
<a href="">10</a>
<a href="">next</a>
</div>
</body>
空白折叠
空白折叠发生在 行盒(行块盒)内部 或 行盒(行块盒)之间
可替换元素 和 非可替换元素
大部分元素，页面上显示的结果，取决于元素内容，称为“非可替换元素”
少部分元素，页面上显示的结果，取决于元素属性，称为“可替换元素”
可替换元素:img、video、audio
绝大部分可替换元素为行盒
可替换元素类似于行块盒，盒模型中所有尺寸都有效
⭐
/* 既要保持宽高比例又要保证不溢出 */
object-fit: contain;
/* 默认值，全部显示 */
object-fit: fill;
/* 把区域填充满，不能有空隙，又不能打破比例 */
object-fit: cover;
- 如果没有手动设置宽高，调整其中一个值时，另一个值会按照比例自行调整
796
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
