2023年12月31日
30秒学会 CSS 片段 – Aspect ratio
Creates a responsive container with a specified aspect ratio. Use a CSS custom property, –aspect-ra...
layout
2023年1月26日
30秒学会 CSS 片段 – Trim multiline text
Limit multiline text to a given number of lines. Use -webkit-line-clamp to set the maximum number of...
2022年9月8日
30秒学会 CSS 片段 – Responsive layout with sidebar
Creates a responsive layout with a content area and a sidebar. Use display: grid on the parent conta...
2022年5月30日
30秒学会 CSS 片段 – Full-width image
Creates a full-width image. Use left: 50% and right: 50% to position the image in the middle of the ...
2022年2月6日
30秒学会 CSS 片段 – Responsive image mosaic
Creates a responsive image mosaic. Use display: grid to create an appropriate responsive grid layout...
2020年6月9日
30秒学会 CSS 片段 – 固定宽高比
假定元素的宽度可变，它的高度会自动适应 (比如其 width 和 height 可以保持固定的宽高比). 在伪元素 :before 上设置 padding-top 可以使元素的高度与宽度成一定的比例。...
2020年5月9日
30秒学会 CSS 片段 – Transform centering
Vertically and horizontally centers a child element within its parent element using position: absolu...
2020年4月5日
30秒学会 CSS 片段 – Truncate text
If the text is longer than one line, it will be truncated and end with an ellipsis …. overflow: hidd...
2020年3月26日
30秒学会 CSS 片段 – Evenly distributed children
Evenly distributes child elements within a parent element. display: flex enables flexbox. justify-co...
2020年2月11日
30秒学会 CSS 片段 – Display table centering
Vertically and horizontally centers a child element within its parent element using display: table (...