图像、媒体和表单元素

图像、媒体和表单元素

替换元素

图像和视频被描述为替换元素。 这意味着CSS不能影响这些元素的内部布局-仅影响它们在页面上于其他元素中的位置。 但是,正如我们将看到的,CSS可以对图像执行多种操作。

某些替换元素(例如图像和视频)也被描述为具有宽高比。 这意味着它在水平(x)和垂直(y)尺寸上均具有大小,并且默认情况下将使用文件的固有尺寸进行显示。

调整图像大小

正如你从之前的几节课中所学到的那样,CSS中万物皆盒。如果你把一张图片放在一个盒子里,它的原始长和宽都比盒子的小或大,它要么比盒子显得小,要么从盒子里面溢出出去。你需要决定怎么处理溢出。

在下面的示例中,我们有两个盒子,大小均为200像素:

  • 一个包含了一张小于200像素的图像,它比盒子小,所以不会拉伸以充满盒子。
  • 另一张图像大于200像素,从盒子里面溢出。

图像、媒体和表单元素

.box {
  width: 200px;
}

img {

}
<div class="wrapper">
  <div class="box"><img src="star.png" alt="star"></div>
  <div class="box"><img src="balloons.jpg" alt="balloons"></div>
</div>

所以我们能怎么处理溢出问题呢?

正如我们在我们之前的课程里面所学的那样,一个常用的技术是将一张图片的max-width设为100%。这将会允许图片尺寸上小于但不大于盒子。这个技术也会对其他替换元素(例如<video>,或者<iframe>)起作用。

尝试向上面的示例中的<img>元素加入max-width: 100%,你会看到,小的图像不变,而大的变小了,能够放在盒子里。

你可以对容器内的图像作其他选择,例如,你可能想把一张图像调整到能够完全盖住一个盒子的大小。

object-fit属性可以在这里帮助你。当使用object-fit时,替换元素可以以多种方式被调整到合乎盒子的大小。

下面,我们已经使用了值cover,缩小了图像,维持了图像的比例,所以图像可以整齐地充满盒子,同时由于比例保持不变,图像的一部分将会被盒子裁切掉。

图像、媒体和表单元素

.box {
  width: 200px;
  height: 200px;
}

img {
  height: 100%;
  width: 100%;
}

.cover {
  object-fit: cover;
}

.contain {
  object-fit: contain;
}
<div class="wrapper">
  <div class="box"><img src="balloons.jpg" alt="balloons" class="cover"></div>
  <div class="box"><img src="balloons.jpg" alt="balloons" class="contain"></div>
</div>

如果我们将contain作为值,图像将会缩放到足以放到盒子里面的大小。如果它和盒子的比例不同,这将会导致“开天窗”的结果。

你可能也想试试fill值,它可以让图像充满盒子,但是不会维持比例。

布局中的替换元素

在替换元素使用各式CSS布局技巧时,你可能深切地体会到他们的展现略微与其他元素不同,例如,在一个flex或者grid布局中,元素默认会把拉伸到充满整块区域。图像不会拉伸,而是会被对齐到网格区域或者弹性容器的起始处。

你可以看到这在下面的示例中发生了,下面的示例有个两列两行的网格容器,里面有四个物件。所有的<div>元素有自己的背景色,拉伸到了充满行和列的地步。但是,图像并没有被拉伸。

图像、媒体和表单元素

<div class="wrapper">
  <img src="star.png" alt="star">
  <div></div>
  <div></div>
  <div></div>
</div>
.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 200px 200px;
  gap: 20px;
}

.wrapper > div {
  background-color: rebeccapurple;
  border-radius: .5em;
}

如果你是按顺序读这些课,那么你可能还没有看到布局的部分,只要记住替换元素在成为网格或者弹性布局的一部分时,有不同的默认行为,这很必要,避免了他们被布局奇怪地拉伸。

为了强制图像拉伸,以充满其所在的网格单元,你必须仿照下面做点事情:

img {
  width: 100%;
  height: 100%;
}

这将会无条件地拉伸图像,所以很可能不会是你想要的。

form元素

用CSS格式化表单元素是一个需要技巧的工作,HTML Forms module 包含了详细的格式化表单元素的指导,所以我在这里不会全部复述。在本文的这一节有一些关键的值得关注的基础。

许多表格的控制是通过<input>元素的方式实现的,这定义了简单的表格区域,例如文字输入,更进一步还有HTML5新加入的更加复杂的区域,例如颜色和日期撷取器。另外还有一些其他元素,例如用于多行文本输入的<textarea>,以及那些用来包含和标记表格的一些部分的元素,例如<fieldset><legend>

HTML5还涵盖了一些特性,它们允许Web开发者表示哪些区域是必填的,甚至还能标识待填入的内容类型。如果用户输入了一些未预料的内容,或者让必填区域空白,浏览器会显示一个错误信息。不同的浏览器在它们给这样的物件的样式化和自定义余地的问题上,并没有达成一致。

样式化文本输入元素

允许文本输入的元素,例如<input type="text">,特定的类型例如<input type="email">以及<textarea>元素,是相当容易样式化的,它们会试图表现得和在你的页面上其他盒子一样。不过这些元素默认的样式化方式会改变,取决于你的用户访问站点时所使用的操作系统和浏览器。

在下面的示例中,我们已经将一些文本输入用CSS样式化了,你可以看到例如边框、内外边距之类的东西都像你想要的那样生效了。我们正在使用特性选择器来指向不同的输入类型。尝试通过改变边框、向输入区域增加背景色、改变字体和内边距的方式来改变表单的外观。

图像、媒体和表单元素

input[type="text"],
input[type="email"] {
  border: 2px solid #000;
  margin: 0 0 1em 0;
  padding: 10px;
  width: 100%;
}

input[type="submit"] {
  border: 3px solid #333;
  background-color: #999;
  border-radius: 5px;
  padding: 10px 2em;
  font-weight: bold;
  color: #fff;
}

input[type="submit"]:hover {
  background-color: #333;
}
<form>
  <div><label for="name">Name</label>
  <input type="text" id="name"></div>
  <div><label for="email">Email</label>
  <input type="email" id="email"></div>

  <div class="buttons"><input type="submit" value="Submit"></div>
</form>

重点:你应该在改变表单样式的时候小心,确保对于用户而言,它们仍然很容易被认出来是表单元素。你也许可以建立一个无边框的表单输入,其背景也与周围的内容难以区分开来,但是这会让表单很难识别和填入。

正如在本教程的HTML部分的form styling课里解释的那样,许多更加复杂的输入类型是由操作系统渲染的,无法进行样式化。因而你应该总是假设表单在不同的访客看来十分不同,并在许多浏览器上测试复杂的表单。

继承和表单元素

在一些浏览器中,表单元素默认不会继承字体样式,因此如果你想要确保你的表单填入区域使用body中或者一个父元素中定义的字体,你需要向你的CSS中加入这条规则。

button,
input,
select,
textarea {
  font-family : inherit;
  font-size : 100%;
}

form元素与box-sizing

跨浏览器的form元素对于不同的挂件使用不同的盒子约束规则。你已经在我们的盒模型课中学习了box-sizing属性,在样式化表单时候,你可以使用这一知识,确保在给form元素设定宽度和高度时可以有统一的体验。

为了保证统一,将所有元素的内外边距均设为0是个好主意,然后在单独进行样式化控制的时候将这些加回来。

button,
input,
select,
textarea {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

其他有用的设置

除了上面提到的规则以外,你也应该在<textarea>上设置overflow: auto 以避免IE在不需要滚动条的时候显示滚动条:

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,它被许多项目用作基础,是非常流行的样式表。

至于样式化表单的更加深入的信息,可以看下这些教程的HTML一节的这两篇文章:

图像、媒体和表单元素

上一篇:超强、超详细Redis数据库入门教程(转载)


下一篇:非法登录