By Mustapha Aouas
Like and watch. Make it a habit
In this paper,
GitHubGithub.com/qq449245884…Has been included, more past the classification of the highly praised articles, also collated a lot of my documentation, and tutorial materials. Welcome to Star and perfect, you can refer to the interview test point review, I hope we have something together.
Learning CSS is one way to build great looking web pages. However, during learning, we tend (most of the time) to limit ourselves to using the same attributes over and over again. After all, we are creatures of habit, and we use what we are used to and familiar with.
So, in this article, I’ll introduce you to seven rare and useful CSS properties that I hope will help you.
1. vertical-align
The CSS property vertical-align specifies the vertical alignment of inline or table-cell elements.
As the definition says, this property allows you to align text vertically. It is especially useful for order indicators (ST, nd, etc.), required input asterisks (*), or ICONS that are not properly centered. Vertical – align one value: super | top | middle | | bottom baseline (the default) | sub | text – top | text – bottom, or start from the baseline length (px, %, Em, REM, etc.).
Baseline: Aligns the element’s baseline with the parent element’s baseline. The HTML specification does not specify a baseline for some of the substitutable elements, such as
**sub: ** aligns the base line of the element with the subscript base of the parent element.
**super: ** aligns the element’s baseline with the parent’s superscript baseline.
**text-top: ** Aligns the element’s baseline with the parent’s superscript baseline.
**text-bottom: ** aligns the bottom of the element with the bottom of the parent element’s font.
**middle: ** aligns the middle of the element with the parent’s base line plus half of the parent’s x-height.
Pay attention tovertical-alignApplies only to inline elements, table cell elements: you cannot use it to vertically align block-level elements.
Resources: MDN.
2. writing-mode
The writing-mode attribute defines the horizontal or vertical layout of text and the direction of travel of text within block-level elements. When setting the book for the entire document, it should be set on the root element (or on the HTML element for HTML documents). It is 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 water is parallel below the top row.
**vertical-rl: ** For left-aligned (LTR) scripts, the content flows vertically from top to bottom, with the next vertical line to the left of the previous one. For right-aligned (RTR) scripts, content flows vertically from bottom to top, with the next vertical line to the right of the previous one.
**vertical-lr: ** For left-aligned (LTR) scripts, the content flows vertically from top to bottom, with the next vertical line to the right of the previous one. For right-aligned (RTR) scripts, content flows vertically from bottom to top, with the next vertical line to the left of the previous one.
Resources: MDN.
Everyone said there was no project to write on the resume, so I found a project for everyone, and I gave it as a bonus【 Building tutorial 】.
3. font-variant-numeric
The border-variant -numeric CSS attribute controls the use of alternative glyphs for numeric, fractional, and ordinal tags.
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 a number style. Depending on the situation, you may want to display old-fashioned numbers or zeros with a slash, for which Settings are useful.
Note that the border-variant -numeric is part of the attribute of the border-feature-Settings group. Attributes such as border-variant – CAPS or border-variant -ligatures also belong to this group. Also note that, like all the border-feature-settings properties, your font needs to implement the above functionality to work properly. The font I use is Fira Sans.
Resources: MDN.
4. user-select
The user-select property is useful whenever we have text that we do not want the user to select, or conversely, if there is a double click or context click and we want to select all the text.
This property using one of the following values: none | auto | text | all.
** None: Text for the ** element and its children is unselected. Note that the Selection object can contain these elements. As of Firefox 21, None behaves like -moz-None, so you can re-enable selection on child elements using -moz-user-select: text.
Auto The value of auto depends on the following conditions:
- in
::before和::afterFor pseudo elements, the attribute value adopted isnone - If the element is editable, the attribute value is
contain - Otherwise, if the parent of this element
user-selectThe adopted attribute value isall, the attribute value adopted by the element is alsoall - Otherwise, if the parent of this element
user-selectThe adopted attribute value isnone, the attribute value adopted by the element is alsonone - Otherwise, 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 topmost element containing the child element is also selected.
Resources: MDN.
Everyone said there was no project to write on the resume, so I found a project for everyone, and I gave it as a bonus【 Building tutorial 】.
5. clip-path
The clip-path CSS property creates a clipping area where only part of the element’s area can be displayed. The parts within the area are shown, and the parts outside the area are hidden. The clipping region is either the path defined by the reference embedded URL or the external SVG path, or as a shape such as circle(). The clip-path property replaces the now deprecated clip property.
This property using one of the following values: circle () | the ellipse () | polygon () | path () | url ().
Since this is an introduction to the property, I won’t delve into each value here.
The two values I use the most are circle and polygon. The value of circle(RADIUS at pair) takes two arguments. The first argument is the radius of the circle and the second argument is the point representing the center of the circle. polygon(pair, pair, pair …) Value takes three or more points to represent a triangle, a rectangle, etc.
6. shape-outside
The CSS property shape-outside defines a shape that can be non-rectangular. Adjacent inline content should be wrapped around the shape. By default, inline content surrounds its margin box; Shape-outside provides a way to customize this wrapper by wrapping text around complex objects rather than simple boxes. It takes the same value as clip-path.
Clip-path defines how the user sees the element, and shape-outside defines how other HTML elements see the element.
Resources: MDN.
7. background-clip
Finally, the BackgroundClip CSS property sets whether the element’s background extends below its border, padding, or content boxes.
This property with one of the following values: border – box (default) | padding – box | content – box | text
Resources: MDN.
conclusion
The following figure is a combination of the above 7 attributes to achieve the layout, to give you a deeper impression.
If you know of any more novel properties, please leave a comment.
The possible bugs after the deployment of code can not be known in real time, in order to solve these bugs, spent a lot of time log debugging, here by the way to recommend you a good BUG monitoring toolFundebug.
Original text: dev. The to/mustapha / 7 -…
communication
The article is updated every week. You can search “Big Move World” on wechat for the first time to read and hurry up (one or two articles earlier than the blog yo). This article is GitHub github.com/qq449245884… Welcome to Star and improve. You can refer to the exam site for review during the interview. In addition, you can follow the public account and reply welfare in the background, so that you can see the welfare, you know.
