行盒的盒模型
常见的行盒: 包含具体内容的元素
span、strong、em、i、img、video、audio
显著特点
- 盒子沿着内容延伸
- 行盒不能设置宽高
调整行盒的宽高，应该使用字体大小、行高、字体类型，间接调整宽高。
- 内边距 (填充区)
水平方向有效，不会实际占据空间。 (垂直方向仅会影响背景)
- 边框
和内边距一样，垂直方向也只是有效果。
- 外边距
和内边距一样。
行块盒(行内块)
display: inline-block 的盒子
- 不独占一行
- 盒模型中所有尺寸都有效
空白折叠
空白折叠，发生在行盒内部 (行块盒) 或 行盒 (行块盒) 之间
可替换元素 和 非可替换元素
大部分元素，页面上显示的结果，取决于元素内容，称为非可替换元素
少部分元素，页面上显示的结果，取决于元素属性，称为可替换元素
可替换元素: img、video、audio(目前觉得input和button还有select中的option是)
搜到的:
常见的可替换元素，例如、、、等，有些元素在特定情况下会被当作可替换元素处理，例如、、、、、等。
绝大部分可替换元素均为行盒。
可替换元素类似于行块盒，盒模型中所有尺寸都有效。(那么到这里，input和option在我所写的实例里面确实算,button也有人说是)
object-fit:
fill (默认,不保证比例，保证不溢出)
contain (保证宽高比例，又保证图片不溢出)
cover (填满区域，不保证是否溢出)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p,span {
background-color: #ddd;
border: 1px solid black;
}
.box {
height: 500px;
width: 500px;
text-align: center;
}
.pager a {
border: 1px solid #38f;
height: 34px;
width: 34px;
text-decoration: none;
/* 水平文本居中，容易忘记意思 */
text-align: center;
line-height: 34px;
color: #1f1f1f;
display: inline-block;
}
.pager a:hover {
border-color: #38f;
background-color: #f2f8ff;
}
.pager a.a1 {
border: none;
color: #000;
background-color: initial;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi asperiores sapiente veniam rerum culpa fugit assumenda aliquid neque voluptatem earum, dolorem mollitia consequatur quo hic optio quia illum vitae commodi?
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem veniam facere sit maiores, ab optio recusandae debitis? Nulla veritatis cupiditate, sunt delectus provident quaerat a omnis quas debitis iusto error!
</p>
<span>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eum hic natus ipsum reiciendis alias est rerum architecto et quod nisi aut molestiae voluptatibus a impedit ducimus, qui accusamus, unde odit.
</span>
<span>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni provident dolore dolor facere aperiam, reiciendis nobis placeat magnam dignissimos voluptate ipsum, tempore inventore repellat sapiente hic fugiat explicabo quia doloremque.
</span>
<div class="box">
<h1>这是一个模块</h1>
<form action="#">
<input type="reset" value="重置按钮">
<br>
<select name="111" id="">
<option value="湖北"></option>
</select>
<br>
</form>
<!-- <button type="button" value="默认提交"></button> -->
</div>
<div class="pager">
<a href="#" class="a1">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>
</div>
</body>
</html>