假定元素的宽度可变,它的高度会自动适应 (比如其 widthheight 可以保持固定的宽高比).

  • 在伪元素 :before 上设置 padding-top 可以使元素的高度与宽度成一定的比例。比如设置成 100% 意味着高度始终是宽度的 100% ,也就是一个自适应的正方形。
  • 这种方法也确保了内容可以正常地保持在元素内部。

继续阅读 30秒学会 CSS 片段 – 固定宽高比

Vertically and horizontally centers a child element within its parent element using position: absolute and transform: translate() (as an alternative to flexbox or display: table).
Similar to flexbox, this method does not require you to know the height or width of your parent or child so it is ideal for responsive applications.

  • position: absolute on the child element allows it to be positioned based on its containing block.
  • left: 50% and top: 50% offsets the child 50% from the left and top edge of its containing block.
  • transform: translate(-50%, -50%) allows the height and width of the child element to be negated so that it is vertically and horizontally centered.
  • Note that the fixed height and width on parent element is for the demo only.

继续阅读 30秒学会 CSS 片段 – Transform centering

If the text is longer than one line, it will be truncated and end with an ellipsis .

  • overflow: hidden prevents the text from overflowing its dimensions (for a block, 100% width and auto height).
  • white-space: nowrap prevents the text from exceeding one line in height.
  • text-overflow: ellipsis makes it so that if the text exceeds its dimensions, it will end with an ellipsis.
  • width: 200px; ensures the element has a dimension, to know when to get ellipsis
  • Only works for single line elements.

继续阅读 30秒学会 CSS 片段 – Truncate text

Evenly distributes child elements within a parent element.

  • display: flex enables flexbox.
  • justify-content: space-between evenly distributes child elements horizontally. The first item is positioned at the left edge, while the last item is positioned at the right edge.
  • Alternatively, use justify-content: space-around to distribute the children with space around them, rather than between them.

继续阅读 30秒学会 CSS 片段 – Evenly distributed children

Vertically and horizontally centers a child element within its parent element using display: table (as an alternative to flexbox).

  • display: table on ‘.center’ allows the element to behave like a <table> HTML element.
  • 100% height and width on ‘.center’ allows the element to fill the available space within its parent element.
  • display: table-cell on ‘.center > span’ allows the element to behave like an <td> HTML element.
  • text-align: center on ‘.center > span’ centers the child element horizontally.
  • vertical-align: middle on ‘.center > span’ centers the child element vertically.
  • The outer parent (‘.container’ in this case) must have a fixed height and width.

继续阅读 30秒学会 CSS 片段 – Display table centering

Creates a vertical masonry layout using HTML and CSS.

  • Create a masonry-style layout that consists of "bricks" that fall into each other with either a fixed width (vertical layout) or a fixed height (horizontal layout), forming a perfect fit. Especially useful when working with images.
  • .masonry-container is the container for the masonry layout. Within that container, there’s a div.masonry-columns, which will automatically put each child element, .masonry-brick, into the layout.
  • .masonry-brick must be have display: block to allow the layout to flow properly, while the :first-child of this class should have a different margin to account for its positioning.
  • CSS variables are used to allow for greater flexibility for the layout, while media queries ensure that the layout flows responsively in different viewport sizes.

继续阅读 30秒学会 CSS 片段 – Masonry Layout

Completely hides an element visually and positionally in the DOM while still allowing it to be accessible.
Provides an alternative to display: none (not readable by screen readers) and visibility: hidden (takes up physical space in the DOM).

  • Remove all borders.
  • Use clip to indicate that no part of the element should be shown.
  • Make the height and width of the element 1px.
  • Negate the elements height and width using margin: -1px.
  • Hide the element’s overflow.
  • Remove all padding.
  • Position the element absolutely so that it does not take up space in the DOM.

继续阅读 30秒学会 CSS 片段 – Offscreen

Resets the box-model so that width and height are not affected by border or padding.

  • box-sizing: border-box makes the addition of padding or borders not affect an element’s width or height.
  • box-sizing: inherit makes an element respect its parent’s box-sizing rule.

继续阅读 30秒学会 CSS 片段 – Box-sizing reset

Align items horizontally using display: inline-block to create a 3-tile layout.

  • Use display: inline-block to create a tiled layout, without using float, flex or grid.
  • .tiles is the container component, .tile is an item that needs to be displayed inline.
  • Use width: calc((900px / 3)) to divide the width of the container evenly into 3 columns.
  • Set font-size: 0; on .tiles to avoid whitespace.
  • Set font-size: 20px to h2 in order to display the text.

继续阅读 30秒学会 CSS 片段 – 3-tile layout