携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第9天，点击查看活动详情
前言
我们前面已经用过长度值、百分比、关键字...（统称为值）和单位（大部分为px像素）去设定元素的宽高。这些只是设定元素尺寸的几种方法，接下来将总结设定元素尺寸的方法、理解不同方法之间的差异并了解几个有关概念。
原始尺寸（固有尺寸）
在元素未设置尺寸时的状态称为原始尺寸。例如我们准备一个div元素不设置宽高，只设置边框以便看清。
<div class="origin"></div>
.origin {
border: 1px solid blue;
}
效果：
可以看到在未设置尺寸的情况下，div（块级元素）的宽度占据了整个父级容器的宽度且内容高度为0（只有边框的宽度）。这个时候我们添加一点文字内容所占据的就是内容的高度。
设置具体尺寸
在原有尺寸的基础上我们可以设置具体的尺寸。但要注意我们设置的知识容器的尺寸，内容并不会随其变化反而当内容超出容器范围时导致的情况就是上文有提到的溢出。我们在上例的基础上添加height:40px的条件，可以看到宽度还是占据满了父元素，高度依我们设置所变化。
如果内容超出容器范围，就会导致溢出
由于存在内容溢出的问题，在设置尺寸时就要考虑到比内容尺寸大或者针对性做出溢出的解决方案（设置overflow属性等）
使用百分数
当然，我们也可以通过百分数的形式来设定值。与此同时，我们也要清楚百分数所代表的是针对谁的百分比。我们分两种情况
1.处在别的容器中就是代表别的容器的百分比
<div class="outer">
<div class="inner">hello world</div>
</div>
.outer {
border: 1px solid red;
height: 100px;
width: 100px;
}
.inner {
border: 1px solid blue;
width: 50%;
}
2.作为子元素代表的是相对最近父元素容器的百分比
<div class="inner">hello world</div>
.inner {
border: 1px solid blue;
width: 50%;
}
将边距设置为百分数
我们知道了设置元素宽和高对应的是父元素的宽和高的百分比。但在设置百分数的边距时却不是这样。边距百分比的参考对象是相对于最近父元素的宽度,解释如下。
我们认为，正常流中的大多数元素都会足够高以包含其后代元素（包括边距），如果一个元素的上下边距时父元素的height的百分数，就可能导致一个无限循环，父元素的height会增加，以适应后代元素上下边距的增加，而相应的，上下边距因为父元素height的增加也会增加，如是循环。
我们用一个例子来验证一下
对于宽高设置为40px、100px的块级元素为我们设置10%的边距即margin:10%，padding:10%
min-和max-尺寸
当你不清楚你要设定的尺寸为多少时，便可通过设定min-height的尺寸来设定一个最小的高度，但是如果有比这个盒子在最小高度状态下所能容纳的更多内容，那么盒子就会变大。
如果你使用了max-width: 100%，那么图像可以变得比原始尺寸更小，但是不会大于原始尺寸的 100%。
这个技术是用来让图片可响应的，所以在更小的设备上浏览的时候，它们会合适地缩放。你无论怎样都不应该用这个技术先载入大原始尺寸的图片，再对它们在浏览器中进行缩放。图像应该合适地调整尺寸，以使它们不会比预计中展示时所需要的最大尺寸大。
视口单位
当展现的视口发生变化，设定视口单位的css元素也会随视口改变。
视口，即你在浏览器中看到的部分页面，也是有尺寸的。在 CSS 中，我们有与视口尺寸相关的度量单位，即意为视口宽度的
vw单位，以及意为视口高度的vh单位。使用这些单位，你可以把一些东西做得随用户的视口改变大小。
1vh等于视口高度的 1%，1vw则为视口宽度的 1%，可用来限制盒子还有文字的大小。
