1. CSS 基础

  2. 取值单位

  3. 外观样式

  4. 布局样式

  5. 动画样式

  6. 工具与规范

  7. 实例练习

宽高

widthheight 样式能分别设置元素的宽度与高度。

$$tip

widthheight 样式对行内元素不起效。

$$

<iframe height="300" style="width: 100%" scrolling="no" title="flexbox" src="https://codepen.io/3yya/embed/KKyeWaX?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

关键字属性

widthheight 属性还有三个特殊的关键字属性值:

  • max-content:固有首选长度,表示为元素允许的最大长度。
  • min-content:固有最小长度,表示为元素允许的最小长度。
  • fit-content:尽可能在不溢出的情况下选择接近 max-content 的长度,至少为 min-content 的长度,公式为:min(max-content, max(min-content, 可用长度))

最小宽高

min-widthmin-height 样式用以设置元素的最小宽度与最小高度。

$$tip

min-widthmin-height 的优先级高于 widthheight,当两者冲突时以min-widthmin-height 为先。

$$

<iframe height="300" style="width: 100%" scrolling="no" title="flexbox" src="https://codepen.io/3yya/embed/yLPEMov?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

最大宽高

max-widthmax-height 样式用以设置元素的最大宽度与最大高度。

$$tip

max-widthmax-height 的优先级高于 widthheight,当两者冲突时以max-widthmax-height 为先。

$$

<iframe height="300" style="width: 100%" scrolling="no" title="flexbox" src="https://codepen.io/3yya/embed/JjOZWvq?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>