玩转CSS最小和最大(宽度/高度)
一枚努力学习前端的程序媛，之前都在自己的博客： Study Of Toast (breadfruit.github.io)(国内站点 上打卡，现在是到了第14期了，每周阅读刷刷。
Min-width
限制盒子的最小宽度，盒子的width大小会随着内容的大小变化，min-width是盒子无文本的时候的大小。
{
min-width: 20px;
height: 30px;
background-color: aqua;
border: 1px solid transparent;
}
min-width与padding
在内容较长的情况下，min-width可以扩展按钮的宽度，而水平方向上的padding应该被添加，以实现一个合适的外观按钮。
{
min-width: 10px;
padding: 0 5px;
height: 30px;
background-color: aqua;
border: 0px solid transparent;
}
Max-width
限制盒子的最大宽度，
当文本内容超过盒子大小的时候，就会出现溢出现象。
max-width与min-width的优先级
从下面的图可以看出，min-width在这个盒子不生效，说明max-width > min-width的优先级，而盒子的宽度是0-max-width，没有所谓的min-width。
{
min-width: 10px;
max-width: 30px;
height: 30px;
background-color: aqua;
border: 0px solid transparent;
}
那么如果你想你的盒子拥有最小最大宽度的话，可以用width属性和display: inline-block。
在css中，inline-block指的是“内联块状元素”，它同时具备内联元素、块状元素的特点；inline-block元素可以和其他元素都在一行上，元素的高度、宽度、行高以及顶和底边距都可设置。
{
width: 10px;
max-width: 30px;
height: 30px;
background-color: aqua;
border: 0px solid transparent;
}
<style>
{
display: inline-block;
min-width: 10px;
max-width: 30px;
height: 30px;
background-color: aqua;
border: 0px solid transparent;
}
</style>
<body>
<span class="btn1" />
<span class="btn1" />
</body>
使用 flexbox 将最小宽度/最小高度设置为零
默认情况下，
flex项目不会缩小到它们的最小内容大小(最长单词或固定大小元素的长度)以下。要更改此设置，请设置min-width或min-height属性。
flex-box的min-width/height是随着内容的大小变化的，也就是无边无际的大。如果父盒子有一定的高度和宽度，这样就会出现溢出的现象，不会出现滚动条。设置
word-space: no-wrap;
overflow: hidden;
text-overflow: ellipisi;
也解决不了。
所以我们需要在flex-box上加上min-width/height：0；
最大宽度/高度和视口单位的流体比率
-
纵横比：高度/宽度
-
容器的宽度：可以是固定数字，也可以是动态数字（100％）
-
设置
height为视口宽度的100％乘以纵横比 -
设置
max-heigh，该高度是容器的宽度乘以纵横比 -
max-width设置为等于容器宽度/* 纵横比0.56 */ img { width: 100%; height: calc(100% * 0.56); max-width: 100%; max-height: calc(100% * 0.56); }
最小高度和粘性页脚
当一个网站的内容不够长，它希望看到页脚粘到底部.
将body元素作为flexbox容器，然后将其最小高度设置为视口高度的100％
body {
display: flex;
flex-direction: column;
min-height: 100vh;
background: #fafafa;
line-height: 1.5;
font-family: "Arial";
}