关于宽度高度-css 傻傻分不清楚

引子

总结了一些 css 中与宽度，高度有关的问题。

width, height

min-width, min-height

max-width, max-height

clientWidth, clientHeight

小试

width & height

width 定义宽度，height 定义高度。如果没有指定，则显示尺寸由子元素决定。如果没有子元素，或者子元素不占用空间（position:absolute或者尺寸为0），则当前元素的尺寸也为0。

如果指定了width height，则显示尺寸固定为定义的尺寸（如果是百分比，则根据实际父元素的尺寸而定）。



如果子元素的尺寸过大，则会直接溢出。

min & max

min-width 和 min-height 分别定义了元素的最小宽度和高度。也就是尺寸的下限。

max-width 和 min-height 分别定义元素的最大宽度和高度。也就是尺寸的上限。

min 和 max 非常有用，比如，对于一个初始高度固定为 100px,且随着内容伸长的列表。我们只需要定义　

min-height: 100px

效果1（当内容很多时）：



效果2（当内容很少时）：



对于内容不确定的列表，一般都需要有一个基础尺寸来美化显示（总不能就显示一行吧），这就是min-height的价值所在。

同样的，有些时候，我们希望列表的最大高度有限，比如，最大只能和屏幕尺寸一致，如果超过，就用滚动条。这个时候，就需要同时设置最大高度了。

max-height:1024px;

clientWidth & clientHeight

这两个分别表示元素的可见内容的宽度和高度。什么叫可见内容？意思就是显示的内容。不包括 margin, border 和 滚动隐藏的区域。



这两个属性都是只读的。只能作为布局的参考。

参考&其他

div的文字内容是 彩虹 的歌词

clientWidth & clientHeight