调整大小

Mr.Hope ... 2019-09-06 CSS 大约 4 分钟

# 原始尺寸与固有尺寸

在受 CSS 设置影响之前,HTML 元素有其原始的尺寸。一个直观的例子就是图像。一副图像的长和宽由这个图像文件自身确定。这个尺寸就是固有尺寸。

一个空的 <div> 是没有尺寸的。如果你在你的 HTML 文件中添加一个空 <div> 并给予其边框,你会在页面上看到一条线。

# 设置具体的尺寸

当给元素指定尺寸时,我们将其称为外部尺寸。 我们可以给它一个具体的 widthheight 值, 不论它的内容是什么,它将都是该尺寸。

# 使用百分数

当使用百分数时,你需要清楚,它是什么东西的百分数。对于一个处于另外一个容器当中的盒子,如果你给予了子盒子一个百分数作为宽度,那么它指的是父容器宽度的百分数。

百分数是以包含盒子的块为根据解析的。如果我们的 <div> 没有被指定百分数的值,那么它会占据 100%的可用空间,因为它是块级别的元素。如果我们给了它一个百分数作为宽度,那么这就是它原来情况下可以占据空间的百分数。

# 把百分数作为内外边距

如果你把 marginpadding 设置为百分数的话,你会注意到一些奇怪的表现。

你也许会希望上下的外边距是元素高的一个百分数,左右外边距是元素宽的百分数。但是,情况不是这样的!

当你用百分数设定内外边距的时候,值是以内联尺寸进行计算的,也即对于左右书写的语言来说的宽度。在我们的例子里面,所有的内外边距是这一宽度的 10%,也就是说,你可以让盒子周围的内外边距大小相同。在你以这种方式使用百分数的时候,这是一个需要记住的事实。

# min-max-

我们可以让 CSS 给定一个元素的最大或最小尺寸。

如果你有一个包含了变化容量的内容的盒子,而且你总是想让它至少有个确定的高度,你应该给它设置一个 min-height 属性。盒子就会一直保持大于这个最小高度,但是如果有比这个盒子在最小高度状态下所能容纳的更多内容,那么盒子就会变大。这在避免溢出的同时并处理变化容量的内容的时候是很有用的。

max-width 的常见用法为,在没有足够空间以原有宽度展示图像时,让图像缩小,同时确保它们不会比这一宽度大。这个技术是用来让图片可响应的,所以在更小的设备上浏览的时候,它们会合适地缩放。

# viewpoint

viewpoint,即你在浏览器中看到的部分页面,也是有尺寸的。在 CSS 中,我们有 viewpoint 宽度相关的 vw 单位,以及 viewpoint 高度相关的 vh 单位。

1vh 等于 viewpoint 高度的 1%,1vw 则为 viewpoint 宽度的 1%.你可以用这些单位约束盒子的大小,还有文字的大小。

如果你改变了 vh 和 vw 的对应值,盒子和字体的大小也会改变; viewpoint 大小的变化也会让它们的大小变化,因为它们是依照 viewpoint 来定大小的。