Some CSS trivia that you often ignore

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 special subject

I believe you may not know that the color attribute can be used in addition to the text display, as well as other places. It

You can change the color of everything on the page. Like what:

The alt text of the picture that cannot be displayed, the border of the list element, the dot before the unordered list element, the number in front of the ordered list element, and the HR element, etc.

   1: 
There is a picture for proof:
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 the value of it
Visible (This is the default value for all page elements), or hidden. The latter is equivalent to Display:none, but still
The page space is occupied. In fact, visibility can have a third value, that is, collapse.
New attribute values are added to the background shorthand method in 3.CSS
In CSS2.1, the shorthand for the background attribute 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 by order:
Background: [Background-color] [background-image] [background-repeat] [background-attachment]
[Background-position]/[background-size] [Background-origin] [background-clip]; Notice the back slash inside, it
The use of backslashes in the font and Border-radius abbreviations is similar. The backslash can be used in browsers that support this notation.
Position followed by writing background-size. In addition, you can add two other attribute values that describe it: background-
Origin and Background-clip. Its syntax is used like this:
   1:. example {   2:background:aquamarine URL (img.png)   3:no-repeat   4:scroll   5:center center/50%   6: Content-box Content-box;   7:}

The clip property of 4.CSS only takes effect on an absolutely positioned element
Add in Style
   1:img   2:  {   3:     width:200px;   4:     height:200px;   5:     clip:rect (0px 50px 200px 0px)   6:  }

In HTML
1: 
Found and not cropped
Absolute positioning of img
   1:img   2:     {   3:         width:200px;   4:         height:200px;   5:         Position:absolute;   6:         clip:rect (0px 50px 200px 0px)   7:     }
Clip valid:
5. The percentage setting of the element vertical is relative to the width of the container, not the height
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, When you set them by percentage, the width of the parent container is also the basis, not the height. Add a padding-top to the picture:
1:padding-top:10%;
Depending on the effect and the estimated distance, it can be proved that the width is calculated
The 6.border-width property can use predefined constant values
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 do not assign a value to the Border-width property, its default value is "Medium".
7. 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:
1: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.
However, Empty-cells is only used for the "detach border" mode, namely: Border-collapse:separate;
8. Oblique attribute value of 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".
9, 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. Add a sub div to the original Div, set the Word-wrap property
   1: <div style= "width:250px;height:250px;border:1px solid Red;word-wrap:break-word" >   2:         My father was a Self-taught mandolin player.   3: He is one of the best     string instrument players   4:     He could not read music, but if He heard a tune a few times,   5:     He could play it. When he was younger,   6:  </div>
Effect
Instead of cropping a long word, the long word is displayed as a whole on a different line. Replace Word-wrap with Overflow-wrap for the same effect.
However, it is important to note that the Word-break property, which crops long words
   1: <div style= "width:250px;height:250px;border:1px solid Red;word-break:break-all" >   2:         My father was a Self-taught mandolin player.   3: He is one of the best     string instrument players   4:     He could not read music, but if He heard a tune a few times,   5:     He could play it. When he was younger,   6:     </div>

Effect
Attached: Word-wrap value:
Word-break Value:
Some CSS trivia that you often ignore