标签：ipsum sit color 模型 元素 行盒 替换
行盒的盒模型
常见的行盒: 包含具体内容的元素
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>
标签：ipsum,sit,color,模型,元素,行盒,替换 来源： https://blog.csdn.net/BB_zhan/article/details/122156108
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。