Sizing items in CSS

 

到目前为止,在各种课程中,您遇到了许多使用CSS来调整网页上项目大小的方法. 了解设计中的不同功能有多重要很重要,在本课程中,我们将总结元素通过CSS获得尺寸的各种方式,并定义一些关于尺寸的术语,这些将在将来对您有所帮助.

Prerequisites: 基本的计算机知识, 已安装的基本软件使用文件的基本知识,HTML基础(研究HTML简介 )以及CSS的工作原理(研究CSS第一步) .
Objective: 为了理解不同的方式,我们可以在CSS中调整大小.

The natural or intrinsic size of things

HTML元素具有自然大小,可以在不受任何CSS影响之前进行设置. 一个简单的例子是图像. 图像具有嵌入到页面中的图像文件中定义的宽度和高度. 该大小被描述为固有大小 -来自图像本身.

如果使用<img>标记或CSS上的属性将图像放置在页面上并且不更改其高度和宽度,则将使用该固有尺寸显示图像. 在示例中,我们在边框下方提供了图像,以便您可以查看文件的范围.

但是,空的<div>没有大小. 如果将<div>添加到没有内容的HTML中,然后像对待图像一样为其添加边框,则页面上将显示一行. 这是元素上的折叠边框-没有内容可以将其保持打开状态. 在下面的示例中,该边框一直延伸到容器的宽度,因为它是一个块级元素,这种行为应该已经开始为您所熟悉. 它没有高度(或块尺寸的大小),因为没有内容.

在上面的示例中,尝试在empty元素内添加一些文本. 边框现在包含该文本,因为元素的高度由内容定义. 因此,此<div>的块尺寸来自内容的尺寸. 同样,这是元素的固有大小-其大小由其内容定义.

Setting a specific size

我们当然可以给设计中的元素指定特定大小. 当给元素指定大小(然后其内容需要适合该大小)时,我们将其称为外部大小 . 从上面的示例中获取我们的<div> -我们可以为其指定特定的widthheight值,并且无论其内容如何,​​它现在都具有该大小. 正如我们在上一课有关溢出的内容中所发现的,如果内容的数量超出了元素可容纳的空间,则设置的高度会导致内容溢出.

由于存在溢出问题,我们需要在网络上非常小心地使用长度或百分比固定元素的高度.

Using percentages

在许多方面,百分比的作用类似于长度单位,正如我们在本课程中讨论的值和单位一样 ,它们通常可以与长度互换使用. 当使用百分比,你需要知道它是什么百分比. 对于在另一个容器中的盒子,如果给子盒子一个百分比宽度,它将是父容器宽度的百分比.

这是因为百分比根据包含块的大小来解析. 如果没有应用百分比,我们的<div>将占据可用空间的100%,因为它是一个块级元素. 如果我们给它一个百分比宽度,它将变成通常填充的空间的百分比.

Percentage margins and padding

如果将marginspadding设置为百分比,则可能会注意到一些奇怪的行为. 在下面的示例中,我们有一个框. 我们给内盒提供了10%的margin和10%的padding . 框顶部和底部的边距和边距与左侧和右侧的边距大小相同.

例如,您可能希望上边距和下边距的百分比是元素高度的百分比,而上边距和下边距的百分比是元素宽度的百分比. 然而,这种情况并非如此!

当您使用以百分比设置的边距和填充时,该值是根据内联大小 (即使用水平语言工作时的宽度)计算得出的. 在我们的示例中,所有边距和填充都是宽度的10%. 这意味着您可以在框的四周具有相同大小的边距和填充. 如果您确实以这种方式使用百分比,这是一个值得记住的事实.

min- and max- sizes

除了给事物提供固定大小外,我们还可以要求CSS为元素提供最小或最大大小. 如果您有一个可能包含可变内容量的框,并且始终希望它至少为某个高度,则可以在其上设置min-height属性. 盒子将始终至少处于此高度,但是如果内容量超过盒子的最小高度,则盒子会变得更高.

在下面的示例中,您可以看到两个框,两个框的定义高度均为150像素. 左侧的框高为150像素; 右侧的框包含的内容需要更多的空间,因此它的高度已超过150像素.

这对于处理可变数量的内容同时避免溢出非常有用.

max-width常见用法是,如果没有足够的空间以其固有宽度显示图像,则应按比例缩小图像,同时确保它们不会变得大于该宽度.

例如,如果要在图像上设置width: 100% ,并且其固有宽度小于其容器,则图像将被强制拉伸并变大,从而使其看起来像素化. 如果其固有宽度大于容器的宽度,则会溢出该容器. 两种情况都不是您想要发生的情况.

如果改为使用max-width: 100% ,则图像可以变得小于其固有尺寸,但将以其尺寸的100%停止.

在下面的示例中,我们使用同一张图片两次. 第一幅图像的width: 100% ,并且位于比其大的容器中,因此它会拉伸到容器的宽度. 第二个图像具有max-width: 100%在其上设置了max-width: 100% ,因此不会拉伸以填充容器. 第三个框再次包含相同的图像,也具有max-width: 100%设置为max-width: 100% ; 在这种情况下,您可以看到它如何缩小以适合盒子.

此技术用于使图像响应 ,以便在较小的设备上查看时,它们会适当缩小. 但是,您不应使用此技术加载非常大的图像,然后在浏览器中按比例缩小它们. 图像的大小应适当,以使其不大于设计中显示的最大尺寸. 下载过大的图像会导致您的网站变慢,并且如果用户处于计量连接状态,可能会花费更多的钱.

注意 :了解有关响应式图像技术的更多信息.

Viewport units

视口(它是用于查看站点的浏览器中页面的可见区域)也具有大小. 在CSS我们有涉及到视口的大小单位- vw为视口宽度部,和vh对视口的高度. 使用这些单位,您可以相对于用户视口调整大小.

1vh等于视口高度的1%, 1vw等于视口宽度的1%. 您可以使用这些单位调整框的大小,也可以调整文本的大小. 在下面的示例中,我们有一个框,其大小为20vh和20vw. 该框包含一个字母A ,该字母的font-size为10vh.

如果更改vhvw值,这将更改框或字体的大小; 更改视口的大小也会更改其大小,因为它们的大小是相对于视口的大小. 要在更改视口大小时查看示例更改,您需要将示例加载到可以调整大小的新浏览器窗口中(因为包含上面显示的示例的嵌入式<iframe>是其视口). 打开示例 ,调整浏览器窗口的大小,然后观察框和文本大小的变化.

根据视口调整大小在您的设计中可能很有用. 例如,如果您希望将整页英雄部分显示在其余内容之前,则将页面的该部分设置为100vh高将把其余内容推到视口下方,这意味着它仅在滚动文档后才会显示.

Test your skills!

我们在本文中介绍了很多内容,但是您能记住最重要的信息吗? 在继续进行之前,您可以找到一些其他测试来验证您是否保留了此信息—请参阅测试技能:调整大小 .

Summary

本课为您提供了一些在调整Web大小时可能遇到的关键问题的摘要. 当您进入CSS Layout时 ,调整大小对于掌握不同的布局方法将变得非常重要,因此在继续进行之前,有必要先了解这里的概念.

In this module

  1. Cascade and inheritance
  2. CSS selectors
  3. The box model
  4. Backgrounds and borders
  5. Handling different text directions
  6. Overflowing content
  7. Values and units
  8. Sizing items in CSS
  9. Images, media, and form elements
  10. Styling tables
  11. Debugging CSS
  12. Organizing your CSS