我是公众号线下派对游戏的作者HullQin（欢迎关注公众号，发加微信，交友），转载本文需作者HullQin授权。我独立开发了《联机桌游合集》，这是一个网页，在这里你可以轻松地和朋友一起玩网络游戏，五子棋等游戏，不收费，也没有广告。还为GameJam2022开发了《Dice Crush》，喜欢的话可以关注我HullQin哦~有空我会分享制作游戏的相关技术。背景看到有人在群里问：你想想，其实很多时候前端开发者对widthheight不是很熟悉。面试完就忘了。让我们来调整样式，基本靠经验，在浏览器中多次修改参数，调试，达到理想的效果。只是熟悉的人调得快，不熟悉的人调得慢。想要一次搞定好款式还是挺难的。那么，今天我们就来看看两个最常用的CSS属性，width和height。干货什么元素可以有宽高，跟display属性有关。display='inline'，设置宽高无效。在其他情况下，比如display='block'or'inline-block'or'flex'or'inline-flex'，设置widthheight是有效的。比如div，它的默认样式display='block'，所以可以设置widthheight。至于span，它的默认样式是display='inline'，所以设置width和height是无效的。widthheightwidthheight的取值可以是一个具体的值，主要包括px和em。还有高级写法：100vw、100vh。分别代表当前窗口宽度*100%和当前当前窗口高度*100%当前窗口宽度*100%。当窗口动态改变大小时，vw和vh也会改变。在响应式设计中很常见！更高级的写法：calc函数。例如高度：calc(100vh-32px)。表示当前窗口高度*100%减去32px。这可以用于固定标题导航栏时固定下窗口的高度。height可以是autoheight是auto，它的高度由子元素决定。它和子元素一样高。如果没有子元素，则高度为0。宽度可以填充的尽可能宽，以填充父元素（如果是最外层元素，则拉伸到100vw）。widthcanbemax-content当width为max-content时，其宽度由子元素决定。子元素有多宽就有多宽（即子元素越宽越好，意思是：子元素不能换行的就不换行）。如果没有子元素，则宽度为0。如果子元素是一段文字，文字不会换行，除非你直接限制子元素的宽度（此时，即使你限制了宽度max-content元素的父元素，子元素的进度无法停止）。widthcanbemin-content当width为min-content时，其宽度由子元素决定。子元素越窄越好（即子元素会越窄越好，意思是：子元素能换行就换行）。如果没有子元素，则宽度为0。如果子元素是一段文字，文字会尽量换行，尽量保持窄。如果子元素是固定宽度的，那么效果和max-width是一样的。在表格中，你通常会看到一列被挤成一个字，这与这个属性有关。宽度可以适合内容。其实fit-content也可以加一个参数，允许固定长度或者百分比，叫做。那么当宽度为fit-content时，真正的宽度是通过下面的公式计算出来的：min(max-content,max(min-content,))也就是说如果你设置的宽度在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是block，width是auto，相当于fill。像html、body、div，这些默认会满屏，达到100vw的效果。display是inline-block，width自动等同于fit-content。width的默认值是auto，height的默认值是auto。width的默认值是auto，height的默认值是auto。宽度高度可以是百分比。当width为百分比时，元素的宽度=父元素的宽度乘以width。当高度为百分比时，元素的高度=父元素的高度乘以高度。这时候建议父元素是高度的固定值表示。如果父元素是body，body和html没有写特殊的样式。宽度的100%相当于100vw。因为html和body默认宽度是auto（而且是block，所以相当于width是fill），body默认是有宽度的。所以100%相当于100vw。但是如果父元素是body，并且没有给body和html写特殊的样式。将高度设置为100%将不起作用。因为html和body默认高度都是auto，具体高度由子元素决定。所以如果需要设置高度，建议使用100vh。box-sizing对宽高的影响box-sizing:content-box;这是默认值。您设置的是元素内容的宽度和高度，不包括padding和border。框大小：边框框；这时候你设置的宽高就是content+padding+border。当您的元素有边框或填充时，有时这很方便。当max-width和min-width满足width时，max-width和min-width的优先级更高！另外min-width的优先级高于max-width！意思是当max-width和width有冲突时，即width>max-width，则以max-width为准。如果不冲突，则以宽度为准。高度也是如此。最后，我是公众号线下派对游戏的作者HullQin（欢迎关注公众号，发送加微信，交友），转载本文需作者HullQin授权。我独立开发了《联机桌游合集》，这是一个网页，在这里你可以轻松地和朋友一起玩网络游戏，五子棋等游戏，不收费，也没有广告。还为GameJam2022开发了《Dice Crush》，喜欢的话可以关注我HullQin哦~有空我会分享制作游戏的相关技术。
