[CSS入门到进阶] 你真的了解 width height 吗？

我是HullQin，公众号线下聚会游戏的作者（欢迎关注公众号，发送加微信，交个朋友），转发本文前需获得作者HullQin授权。我独立开发了《联机桌游合集》，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋等游戏，不收费没广告。还开发了《Dice Crush》参加Game Jam 2022。喜欢可以关注我 HullQin 噢～我有空了会分享做游戏的相关技术。

背景

在一个群聊里见到有人问：

想想，其实很多时候，前端开发者对 width height 也并没有很熟悉。都是面试过了后就忘了。

让我们调整样式，基本是凭借经验，多次在浏览器中改参数调试出来理想效果的。只是熟悉的人调的快，不熟悉的人调的慢。一遍就好样式还是挺难的。

所以，今天我们再来看下 width 和 height 这两个最常用的css属性。

干货

什么元素可以有width height

是跟display属性有关的。

display = 'inline'，设置width height无效。

其它情况，例如 display = 'block' 或 'inline-block' 或 'flex' 或 'inline-flex'，设置width height有效。

例如div，它默认的样式 display = 'block'，所以可以设置width height。而span，它默认的样式 display = 'inline'，所以设置width height无效。

width height的取值

width height可以是具体数值

主要包括px、em。

也有高级的写法：100vw、100vh。分别表示当前窗口宽度*100%和当前当前窗口高度*100%
当前窗口宽度*100%。其中窗口动态改变大小时，vw和vh也会改变。响应式设计中很常用！

更高级的写法：calc函数。例如height: calc(100vh - 32px)。表示当前窗口高度*100%减去32px。这个可用于固定头部导航栏时，下部视窗的高度。

height可以是auto

height是auto时，它的高度由子元素决定。子元素多高，它就多高。没有子元素，那么高度就是0。

width可以是fill

尽可能宽，撑满父元素（如果是最外层的元素，就会撑到100vw）。

width可以是max-content

width是max-content时，它的宽度由子元素决定。子元素多宽，它就多宽（即子元素会尽可能宽，意思是：子元素若能不换行就不换行）。没有子元素，那么宽度就是0。

如果子元素是一段文字，这段文字就不会换行，除非你直接限制了子元素的宽度（此时即使你限制max-content元素的父元素的宽度，都拦不住子元素前进的步伐）。

width可以是min-content

width是min-content时，它的宽度由子元素决定。子元素多窄，它就多窄（即子元素会尽可能窄，意思是：子元素若能换行就换行）。没有子元素，那么宽度就是0。

如果子元素是一段文字，这段文字会尽量去换行，以保证尽可能窄。

如果子元素是固定宽度的，那么此时效果同max-width。

表格里，你通常看到某列被挤的一行只有一个字，就与该属性有关系。

width可以是fit-content

其实fit-content还可以增加个参数，允许是固定长度或百分比，称之为<length-percentage>。那么width是fit-content时，真实width是如下公式算出来的：

min(max-content, max(min-content, <length-percentage>))

也就是说，如果你设置的宽度是在min-content和max-content之间，那么就用你设置的宽度。否则，就用临界值max-content或min-content。

当然，这个参数不建议你设置，兼容性比较差，直接写width: fit-content即可，它的含义是，子元素有多宽，就多宽。当然结果肯定是小于等于max-content、大于等于min-content的。

但它不会像max-content一样追求尽可能宽，所以它会在需要换行时换行（例如当父元素有宽度限定时，fit-content的子元素会换行，而max-content的子元素会忽略父元素的宽度限制）；也不会像min-content一样，追求尽可能窄，所以它不会无脑换行。

width可以是auto

它的表现，基于display，有不同的情况。

display是block，widht是auto就相当于fill。像html、body、div，这些默认都会撑满屏幕，达到100vw的效果。

display是inline-block，width是auto相当于fit-content。

width默认值是auto、height默认是auto

width默认值是auto、height默认是auto。

width height可以是百分比

当width是百分比时，元素的宽度 = 父亲元素的宽度 乘以 width。

当height是百分比时，元素的高度 = 父亲元素的高度 乘以 height。此时建议父元素是固定数值表示的高度。

如果父元素是body，且没有给body和html写特殊样式。width的100%就相当于100vw了。因为html和body默认的width是auto（且是block，所以相当于width是fill），body默认会有宽度。所以100%就相当于100vw。

但是如果父元素是body，且没有给body和html写特殊样式。设置height 100%就不行。因为html和body的height默认值都是auto，具体高度是由子元素决定的。所以如果你需要设置高度，建议用100vh。

box-sizing对width height的影响

box-sizing: content-box;

这是默认值。你设置的就是元素内容的宽和高，不包括padding和border。

box-sizing: border-box;

这时，你设置的宽高，是内容+padding+border。有时候，你的元素有边框或padding时，用这种就很方便。

当max-width和min-width遇到width

max-width和min-width优先级更高！另外，min-width比max-width优先级更高！

指的是，当max-width和width发生矛盾时，即width>max-width了，那么会以max-width为准。如果没有发生矛盾，那么就以width为准。height也是同理。

写在最后

我是HullQin，公众号线下聚会游戏的作者（欢迎关注公众号，发送加微信，交个朋友），转发本文前需获得作者HullQin授权。我独立开发了《联机桌游合集》，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋等游戏，不收费没广告。还开发了《Dice Crush》参加Game Jam 2022。喜欢可以关注我 HullQin 噢～我有空了会分享做游戏的相关技术。