css 尺寸百分比

尺寸的百分比

百分比是一个相对单位，其相对于元素的参考系，比如：

• 普通元素的参考系为父元素的内容区域
• 绝对（固定）定位元素的参考系为父元素中第一个定位元素的padding区域

参考父元素

为什么container宽高都设定了100%,为什么没有占满屏幕,因为container的宽高相对与body的,而body相对与html的,我们设定父元素的宽高,才可以以它为参考设定百分比单位.

绝对定位元素参考单位padding区域

此时元素的宽高为100*50 是父元素宽高的50% 但是位置相对与父定位元素的padding区域

下面罗列常见的百分比情况

css属性	百分比相对于	备注
width	参考系的宽度
height	参考系的高度	参考系高度受本身宽度影响时，设置无效
padding	参考系的宽度
border	参考系的宽度
margin	参考系的宽度

最大最小宽高

• 最大宽度：max-width，最大高度：max-height
• 最小宽度：min-width，最小高度：min-height

当一个元素的尺寸会自动变化时，设置最大最小宽高，可以让它不至于变得过小或过大。

在实际开发中，我们通常为PC端的页面设置一个最小宽度，通常此宽度为设计稿的宽度

html {
  min-width: 1226px;
}

又或者，我们会为页面中的所有图片设置一个最大宽度，让其不至于超过容器

img {
  max-width: 100%;
}