12 CSS Trivia

The 1.CSS Color property is not available for text display only
For CSS, the color attribute is believed to be used by all Web developers. If you are not a particularly experienced programmer, I am sure you may not know that the color attribute can be used as a different place in addition to the text display. It can change the color of everything on the page. Like what:
Alt text for pictures that cannot be displayed
The border of the list element
The dot in front of the unordered list element
Number preceding the ordered list element
and an HR element.

The visibility attribute in 2.CSS has a collapse property value: Collapse
For CSS in the visibility attribute, I believe you have used more than hundreds of times. Most of the time, you'll set its value to visible (which is the default value for all page elements), or hidden. The latter is equivalent to Display:none, but still occupies page space.
In fact, visibility can have a third value, that is, collapse. When an element's visibility property is set to a collapse value, it behaves the same as hidden for the normal element. The exception is that if this element is a table-related element, such as a table row, table group,table column, table column group, it behaves like display:none, which means that the space they occupy is also freed.
Unfortunately, various browsers do not treat collapse values the same way.

3.CSS background shorthand for new property values
in CSS2.1, the shorthand for background properties contains five attribute values –background-color, Background-image, Background-repeat, Background-attachment, and Background-position. Starting with CSS3, 3 new attribute values were added, adding up to 8. The following are the meanings that are represented sequentially:
background: [Background-color] [background-image] [background-repeat] [background-attachment] [ Background-position]/[background-size] [Background-origin] [background-clip];
Notice the backslash inside, which is similar to the use of the backslash used by the font and the Border-radius shorthand method. The backslash can be used to write background-size behind the position in a browser that supports this notation.
In addition, you can add two other attribute values that describe it: Background-origin and Background-clip.
Its syntax looks like this:
. example {
Background:aquamarine URL (img.png)
no-repeat
Scroll
Center Center/ 50%
Content-box content-box;
}
about browser support, probably all modern browsers support these new property values, but for some very old browsers (IE6/7/8), it is best to provide some remedial mechanisms in the code in case of unsupported.

The clip property of 4.CSS only takes effect on an absolutely positioned element
Before talking about Background-clip, you might think of the clip property. It is used in the following way:
. example {clip:rect (110px, 160px, 170px, 60px);}
Its function is to cut the elements according to the specified size and the defined sizes. A lot of simple, but the only thing you need to be aware of is that clip will only take effect on absolutely positioned elements. All that you have to do:
. example {position:absolute; Clip:rect (110px, 160px, 170px, 60px);}
However, you can also set the element's position to position:fixed because, according to the CSS official specification, the fixed element also belongs to the ' absolutely positioned ' element.

5. The percentage setting of the element vertical is relative to the width of the container, not the height
This is a confusing CSS feature, and I've talked about it before. As we all know, when you set the width of an element by percentage, it is calculated relative to the width of the parent container, but for some properties that represent a vertical distance, such as padding-top,padding-bottom,margin-top,margin-bottom, etc. , they are based on the width of the parent container, not the height, when they are set by a percentage.

6.border attributes are more complicated than you think.
Many of us have used this notation:
. example {border:solid 1px black;}
The use of the border attribute here is actually a shorthand form, which sets Border-style, Border-width, and border-color-to represent them in three of a line of code.
But don't forget that Border-style, Border-width, and Border-color also have their own shorthand forms. So, Border-width can be written like this:
. example {border-width:2px 5px 1px 0;}
In this way, the width of the four sides is set one at a time. The Border-color and Border-style properties can also do so. The 7.text-decoration property becomes a shorthand attribute
I'm sure that some little knowledge will surprise you.
Following the latest CSS specification, Text-decoration now has the following wording:
A {text-decoration:overline aqua wavy;}
The Text-decoration property now needs to be represented by three attribute values: Text-decoration-line,text-decoration-color, and Text-decoration-style.
Unfortunately, only Firefox has implemented support for these new properties at this time. The 7.text-decoration property becomes a shorthand attribute
I'm sure that some little knowledge will surprise you.
Following the latest CSS specification, Text-decoration now has the following wording:
A {text-decoration:overline aqua wavy;}
The Text-decoration property now needs to be represented by three attribute values: Text-decoration-line,text-decoration-color, and Text-decoration-style.
Unfortunately, only Firefox has implemented support for these new properties at this time. The 8.border-width property can use predefined constant values
Maybe it's not a fresh message for you. In addition to using standard width values (such as 5px or 1em), the Border-width property can accept predefined constant values: Medium, thin, and thick
In fact, if you don't assign a value to the Border-width property, its default value is "Medium". 9. Why no one uses border-image
Almost all modern browsers now support this property-in addition to IE10 and the following versions of IE.
It looks like this is a very nice CSS feature that allows you to decorate the border of an element with a picture. 10. Do you know the Empty-cells attribute in table?
The Empty-cells property in CSS is supported by all browsers, even including IE8, and its usage is as follows:
Table {empty-cells:hide;}
It is estimated that you have semantically guessed its usefulness. It is for the HTML table service. It tells the browser to hide it when there is nothing in a table cell. Oblique attribute value of 11.font-style
For the Font-style property with CSS, I estimate that every time you see a value that uses "normal" or "italic" two attributes. But in fact, you can also assign it to "oblique". 12.word-wrap and Overflow-wrap are equivalent.
Word-wrap is not a very common CSS property, but it is really useful in a particular environment. One example we often use is to have a long URL appear in the page, instead of bursting the page.

12 CSS Trivia