7 properties in CSS you must know

Learning CSS is a way to build beautiful web pages. However, during the learning process, we tend to limit ourselves (most of the time) to using the same attributes over and over again. After all, we are creatures of habit and we use what we are accustomed to and familiar with.

Therefore, in this article, I will introduce you to 7 relatively rare and easy-to-use CSS properties. I hope it will be helpful to you.

1. vertical-align

CSS attribute vertical-align is used to specify the vertical alignment of inline elements (inline) or table-cell elements (table-cell) Way.

As the definition says, this property allows you to vertically align text. It is particularly useful for sequence indicators (st, nd, etc.), required input asterisks (*), or icons that are not centered correctly. vertical-align takes one of the values: super | top | middle | bottom | baseline (default) | sub | text-top | text-bottom, or the length from the baseline (px, %, em, rem, etc.).

baseline: Align the element's baseline with the parent element's baseline. The HTML specification does not specify the baseline for some replaceable elements, such as , which means that the behavior of these elements using this value will vary from browser to browser.

**sub:** Align the element's baseline with the parent element's subscript baseline.

**super:**Aligns the element's baseline with the parent element's superscript baseline.

**text-top:**Aligns the element's baseline with the parent element's superscript baseline.

**text-bottom:** Align the bottom of the element with the font bottom of the parent element.

**middle: **Align the middle of the element with the parent element's baseline plus half of the parent element's x-height (Annotation: x-height).

Note vertical-align only takes effect on inline elements and table cell elements: you cannot use it to vertically align block-level elements.

2. writing-mode

The writing-mode attribute defines the horizontal or vertical layout of text and the direction of text travel in block-level elements. When setting book for the entire document, it should be set on the root element (for HTML documents it should be set on the html element). It takes one of the following values: horizontal-tb (default) | vertical-rl | vertical-lr.

**horizontal-tb:** For left-aligned (ltr) scripts, content flows horizontally from left to right. For right-aligned (rtr) scripts, content flows horizontally from right to left. The next horizontal row is below the previous row.

**vertical-rl:** For left-aligned (ltr) scripts, content flows vertically from top to bottom, with the next vertical line to the left of the previous line. For right-aligned (rtr) scripts, content flows vertically from bottom to top, with the next vertical line to the right of the previous line.

**vertical-lr:** For left-aligned (ltr) scripts, content flows vertically from top to bottom, with the next vertical line to the right of the previous line. For right-aligned (rtr) scripts, content flows vertically from bottom to top, with the next vertical line to the left of the previous line.

3. font-variant-numeric

The font-variant-numeric CSS property controls the use of alternative glyphs for number, fraction, and ordinal markers.

It takes one of these values: normal | ordinal | slashed-zero | lining-nums | oldstyle-nums | proportional-nums | tabular-nums | diagonal-fractions | stacked-fractions.

This property is useful for setting number styles. Depending on the situation, you may want to display old-fashioned numbers or zeros with slashes, for these cases font-feature-settings can be useful.

Please note that font-variant-numeric is part of the font-feature-settings group properties. Properties such as font-variant-caps or font-variant-ligatures also belong to this group.

4. user-select

Whenever we have text that we don’t want the user to select, or conversely if a double click or context click occurs and want all text to be selected The user-select attribute will be very useful.

This property takes one of the following values: none | auto | text | all.

**none: The text of the ** element and its sub-elements cannot be selected. Please note that this Selection object can contain these elements. Starting in Firefox 21, none behaves like -moz-none, so you can use -moz-user-select: text to re-enable selection on child elements.

auto

#The specific value of auto depends on a series of conditions, as follows:

On the ::before and ::after pseudo-elements, the attribute value used is none

If the element is an editable element, the attribute value adopted is contain

Otherwise, if the user-select attribute value adopted by the parent element of this element is all, the element adopts The attribute value of The attribute value is text

**text: **The user can select text.

**all: **In an HTML editor, when a child element or context is double-clicked, the top-level element containing the child element will also be selected.

5. clip-path

The clip-path CSS property can create a clipping area where only part of the element can be displayed. Parts within the area are displayed and parts outside the area are hidden. The clipping region is a path defined by a reference to an embedded URL or an external svg, or as a shape such as circle(). The clip-path property replaces the now-deprecated clip property.

This attribute takes one of the following values: circle() | ellipse() | polygon() | path() | url().

Since this is an introduction to the property, we won't delve into each value here.

The two values ​​I use most are circle and polygon. The circle(radius at pair) value has two parameters. The first parameter is the radius of the circle, and the second parameter is the point representing the center of the circle. The polygon(pair, pair, pair...) value takes 3 or more points, representing a triangle, a rectangle, etc.

6. shape-outside

The shape-outside CSS property defines a shape that can be non-rectangular, adjacent Inline content should be wrapped around the shape. By default, inline content wraps its margin box; shape-outside provides a way to customize this wrapping to wrap text around a complex object rather than a simple box. It takes the same value as clip-path.

clip-path defines how users view the element, and shape-outside defines how other HTML elements view the element.

7. background-clip

Finally, the backgroundclip CSS property sets whether the element's background extends to its border, padding, or content under the box.

This attribute takes one of the following values: border-box (default) | padding-box | content-box | text

Recommended tutorial:《CSSTutorial》

The above is the detailed content of 7 properties in CSS you must know. For more information, please follow other related articles on the PHP Chinese website!