CSS

inline元素内只能存在inline元素, 如果在inline元素里存在block元素, 则会导致意料之外的渲染结果:

  • inline元素的响应范围超出实际的盒模型, 常见于a元素是block元素的父元素的情况.

使用em单位即可实现.

max-content 内容不会溢出的最大尺寸.
min-content 内容不会溢出的最小尺寸.
fit-content是max-content和min-content的结合体, 当空间足够时, 会选择max-content, 反之选择min-content.

content-box 默认值, 只有content会被算进盒模型的长宽, 因此在 width: 100% 时设置padding或border会导致盒子的尺寸超出width的设置.
border-box 常用值, 会将padding和border算进盒模型的长宽, 因此在 width: 100% 时设置padding和border, 盒子的尺寸仍然遵从width的设置.

auto意味着扩展至其父元素下的剩余空间, 尊重broder, padding.
100%意味着使元素与父元素一样的宽度, 不尊重border, padding.

通过为子元素设置 box-sizing: border-box, 可让100%具有和auto类似的行为.
100%可以处理一些auto无法实现的填充情况, 例如 display: inline-block 的auto就可能无法填充.

子元素的 height: auto 通常不会有用.

将子元素的height设置为与父元素相同值方法只有 height: 100%,
但这要求父元素有一个准确的高度.

如果需要在父元素没有准确高度的情况下让子元素符合父元素的高度,
只能将父元素设为 display: flexdisplay: inline-flex.