图片、媒体和表单元素
在本课中，我们将探讨 CSS 如何处理某些特殊元素。图片、其他媒体和表单元素在用 CSS 样式化时，行为与常规盒模型略有不同。了解哪些可以做到，哪些不可以，可以避免一些挫败感，本课将重点介绍一些你需要了解的主要事项。
替换元素
图片和视频被描述为替换元素。这意味着 CSS 不能影响这些元素的内部布局，只能影响它们在页面上与其他元素之间的位置。然而，正如我们将看到的，CSS 可以对图片进行各种操作。
某些替换元素，如图片和视频，也被描述为具有宽高比。这意味着它在水平 (x) 和垂直 (y) 维度上都有大小，并且默认情况下将使用文件的固有尺寸显示。
图片尺寸调整
正如你从这些课程中学到的，CSS 中的所有内容都生成一个盒子。如果你将一张图片放在一个比图片文件在任何方向上固有尺寸更小或更大的盒子中，它要么显得比盒子小，要么溢出盒子。你需要决定如何处理溢出。
在下面的示例中，我们有两个盒子，都为 200 像素大小。
- 一个包含的图片小于 200 像素，它比盒子小，并且不会拉伸填充盒子。
- 另一个图片大于 200 像素，并溢出盒子。
<div class="wrapper">
<div class="box">
<img
alt="star"
src="https://mdn.github.io/shared-assets/images/examples/big-star.png" />
</div>
<div class="box">
<img
alt="balloons"
src="https://mdn.github.io/shared-assets/images/examples/balloons.jpg" />
</div>
</div>
.wrapper {
display: flex;
align-items: flex-start;
}
.wrapper > * {
margin: 20px;
}
.box {
border: 5px solid darkblue;
width: 200px;
}
img {
}
我们如何解决溢出问题？
正如我们在CSS 中调整项目大小中学到的，一个常见技术是将图片的max-width设置为100%。这将使图片能够变得比盒子小，但不会变大。此技术也适用于其他替换元素，例如<video>或<iframe>。
尝试在上面示例中的<img>元素规则中添加max-width: 100%。你会看到较小的图片保持不变，但较大的图片会缩小以适应盒子。
使用object-fit处理图片溢出
你可以对容器内的图片进行其他选择。例如，你可能希望调整图片大小以使其完全覆盖一个盒子。
object-fit属性可以在这里帮助你。使用object-fit时，替换元素可以通过多种方式调整大小以适应盒子。
下面，第一个示例使用cover值，它会缩小图片，同时保持宽高比，使其整齐地填充盒子。由于保持了宽高比，图片的一些部分将被盒子裁剪。第二个示例使用contain作为值：它会缩小图片，直到它足够小以适应盒子内部。这会导致“信箱效果”，因为它与盒子的宽高比不同。
<div class="wrapper">
<div class="box">
<img
alt="balloons"
class="cover"
src="https://mdn.github.io/shared-assets/images/examples/balloons.jpg" />
</div>
<div class="box">
<img
alt="balloons"
class="contain"
src="https://mdn.github.io/shared-assets/images/examples/balloons.jpg" />
</div>
</div>
.wrapper {
display: flex;
align-items: flex-start;
}
.wrapper > * {
margin: 20px;
}
.box {
border: 5px solid darkblue;
width: 200px;
height: 200px;
}
img {
height: 100%;
width: 100%;
}
.cover {
object-fit: cover;
}
.contain {
object-fit: contain;
}
你也可以尝试使用fill值，它将填充盒子但不会保持宽高比。
布局中的替换元素
当对替换元素使用各种 CSS 布局技术时，你可能会发现它们的行为与其他元素略有不同。例如，在网格布局中，元素默认会拉伸以填充其整个网格区域。图片不会拉伸；相反，它们会与网格区域的起始位置对齐。
你可以在下面的示例中看到这种情况，我们有一个两列两行的网格容器，其中有四个项目。所有<div>元素都有背景色并拉伸以填充行和列。然而，图片不会拉伸。
<div class="wrapper">
<img
alt="star"
src="https://mdn.github.io/shared-assets/images/examples/big-star.png" />
<div></div>
<div></div>
<div></div>
</div>
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 100px 100px;
gap: 20px;
}
.wrapper > div {
background-color: rebeccapurple;
border-radius: 0.5em;
}
你将在后面的模块中学习布局。现在，请记住，替换元素当它们成为特定布局系统（如网格或弹性盒子）的一部分时，具有不同的默认行为，这主要是为了避免它们被布局奇怪地拉伸。
表单元素
表单元素在用 CSS 样式化时存在问题。Web 表单扩展模块涵盖了样式化某些表单输入类型的更棘手方面，我们在此不赘述。然而，本节有几个值得强调的关键基础知识。
许多表单控件通过<input>元素添加到你的页面中——这定义了简单的表单字段，如文本输入，以及更复杂的字段，如颜色和日期选择器。还有一些额外的元素，如用于多行文本输入的<textarea>，以及用于包含和标记表单部分的元素，如<fieldset>和<legend>。
HTML 还包含属性，使 Web 开发人员能够指出哪些字段是必需的，甚至需要输入的内容类型。如果用户输入了意想不到的内容，或留空了必填字段，浏览器可以显示错误消息。不同的浏览器在允许此类项目的样式和自定义方面有所不同。
样式化文本输入元素
允许文本输入的元素，如<input type="text">、更具体的<input type="email">和<textarea>元素，都非常容易样式化，并且行为通常与页面上的其他盒子一样。然而，这些元素的默认样式会因用户访问网站的操作系统和浏览器而异。
在下面的示例中，我们使用 CSS 样式化了一些文本输入。你可以看到边框、外边距和内边距等都按预期应用。我们使用属性选择器来定位不同的输入类型。
尝试编辑示例，通过调整边框、为字段添加背景色以及更改字体和内边距来更改表单的外观。
<form>
<div><label for="name">Name</label> <input id="name" type="text" /></div>
<div><label for="email">Email</label> <input id="email" type="email" /></div>
<div class="buttons"><input type="submit" value="Submit" /></div>
</form>
input[type="text"],
input[type="email"] {
border: 2px solid black;
margin-bottom: 1em;
padding: 10px;
width: 80%;
}
input[type="submit"] {
border: 3px solid #333333;
background-color: #999999;
border-radius: 5px;
padding: 10px 2em;
font-weight: bold;
color: white;
}
input[type="submit"]:hover,
input[type="submit"]:focus {
background-color: #333333;
}
警告：在更改表单元素的样式时，应小心确保用户仍然清楚它们是表单元素。你可以创建一个没有边框和背景的表单输入，使其与周围内容几乎无法区分，但这会使其很难识别和交互。
许多更复杂的输入类型由操作系统渲染，并且无法进行样式设置。因此，你应该始终假定表单对于不同的访问者来说会看起来非常不同，并在多个浏览器中测试复杂的表单。
规范化表单行为
表单元素在不同的浏览器和操作系统中的行为不同。本节探讨了一些最常见的问题并提供了处理它们的策略。
继承和表单元素
在某些浏览器中，表单元素默认不继承字体样式。因此，如果你想确保你的表单字段使用在body或父元素上定义的字体，你应该在 CSS 中添加此规则。
button,
input,
select,
textarea {
font-family: inherit;
font-size: 100%;
}
表单元素和盒模型
在不同的浏览器中，表单元素对不同的组件使用不同的盒模型规则。你在我们的盒模型课程中学习了box-sizing属性，你可以利用这些知识在样式化表单时确保在设置表单元素的宽度和高度时获得一致的体验。
为保持一致性，最好将所有元素的外边距和内边距设置为0，然后在样式化特定控件时再添加回来。
button,
input,
select,
textarea {
box-sizing: border-box;
padding: 0;
margin: 0;
}
其他有用的设置
除了上述规则之外，你还应该在<textarea>元素上设置overflow: auto，以防止某些旧浏览器在不需要时显示滚动条。
textarea {
overflow: auto;
}
将所有内容整合到一个“重置”中
作为最后一步，我们可以将上面讨论的各种属性打包到以下“表单重置”中，以提供一个一致的基础。这包括最后三节中提到的所有项目。
button,
input,
select,
textarea {
font-family: inherit;
font-size: 100%;
box-sizing: border-box;
padding: 0;
margin: 0;
}
textarea {
overflow: auto;
}
注意：规范化样式表被许多开发人员用来创建一组基线样式，用于所有项目。通常，它们执行与上述类似的操作，确保在你自己进行 CSS 工作之前，将浏览器之间任何不同的内容设置为一致的默认值。它们不像过去那样重要了，因为浏览器通常比过去更一致。然而，如果你想查看一个示例，请查看Normalize.css，它是一个非常流行的样式表，被许多项目用作基础。
总结
本课重点介绍了在使用 CSS 处理图片、媒体和其他不寻常元素时你将遇到的一些差异。
在下一篇文章中，我们将为你提供一些测试，你可以用来检查你对我们提供的关于在 CSS 中处理图片和表单元素的信息的理解和掌握程度。