共计 2816 个字符，预计需要花费 8 分钟才能阅读完成。
我是 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 噢～我有空了会分享做游戏的相干技术。
