图像、媒体和表单元素—CSS学习笔记

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第10天，点击查看活动详情

---

前言

图像、媒体和表单元素与常规的元素不同，具有特殊性，通过css的样式化才可能让这些元素达到预期的效果，但也有些要注意的点，下面我们就来看看。

图像、媒体

什么是图像、媒体

在网页中，常常会看到图片、视频、动图等等这些元素统称为图像或媒体。它们被描述为“替换元素”，即与正常标准元素是不一样的，可被替换。它们有x、y方向上的尺寸，具有宽高比，默认将展示它们的原始尺寸，

图像（媒体）的展示

图片展示产生问题

1.图片溢出

我们设定一个100px*100px的div，放入一个尺寸比他大的图片会发现图片有溢出现象。

2.图片占据不满（容器尺寸150px*150px）

如何解决溢出问题

调整图像大小

1.max-width:100%

这句语句将会使图像（也被称为可替换元素）宽度小于等于容器尺寸，若图像宽高比与容器类似，看起来图片将正好占据满容器。

2.object-fit:contain

这句语句将会保持宽高比缩小图像，但有可能占据不满容器。要注意至少要有长宽之中一个的尺寸，不然没有对应的参照。本例我们设置width:100%

效果：

如何解决占据不满的问题

object-fit:cover

此条语句将会保持宽高比扩大图像。若宽高比一致，将会看到图像扩大到与容器一致。若不一致，超出容器范围的图像将会被裁剪。同样也需要对图像设定至少宽高其中一个尺寸。本例设置width:100%，效果与上图一致。

object-fit:fill

正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配，那么该对象将被拉伸以适应内容框。如果宽高比一致，将正好填充。

表单元素

什么是表单元素

很多表单控件是通过input元素添加到网页上的。该元素定义了简单的表单区域，例如文字输入。更进一步还有 HTML5 新加入的更加复杂的区域，例如颜色和日期撷取器。另外还有一些其他元素，例如用于多行文本输入的textarea以及那些用来包含和标记表单特定部分的元素，例如fieldset和legend。

样式化表单元素

对于表单元素，一般会做统一的样式处理以使跨浏览器时体验一致（因为不同浏览器对于不同的挂件使用不同的盒子约束规则）。通常的表单元素有例如<input type="text">，及其指定特定类型的元素，如 <input type="email"> 以及 <textarea> 元素。

button,
input,
select,
textarea {
/*给form元素设置宽高时有统一的体验*/
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
/*使文本域不一直显示滚动条*/
textarea {
  overflow: auto;
}

然后便可以对表单元素进行统一的样式化操作。