Must-see CSS Trivia

The following small series for everyone to bring a must-see CSS trivia. Small series feel very good, now share to everyone, also for everyone to make a reference. Let's take a look at it with a little knitting.

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.

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:

. example {   background:aquamarine URL (img.png)   no-repeatscrollcenter center/50% content-box   Content-box ;   }


The clip property of 4.CSS only takes effect on an absolutely positioned element

Add in Style

IMG    {    width:200px;    height:200px;    Clip:rect (0px 50px 200px 0px)    }


In HTML

1: 

Found and not cropped


Absolute positioning of img

IMG     {   width:200px;   height:200px;   Position:absolute;   Clip:rect (0px 50px 200px 0px)     }


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 p in the original p to set the Word-wrap property

<p style= "width:250px;height:250px;border:1px solid Red;word-wrap:break-word" >   My father was a self-taught Mandolin player.    He is one of the best string instrument players    He could not read music, but if he heard a tune a few times,    he could play it. When he was younger,    </p>


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

<p style= "width:250px;height:250px;border:1px solid Red;word-break:break-all" >   My father was a self-taught Mandolin player.    He is one of the best string instrument players    He could not read music, but if he heard a tune a few times,    he could play it. When he was younger,    </p>


Effect



Attached: Word-wrap value:


Word-break Value: