12 CSS Trivia You don't necessarily know

Although CSS is not a very complex technology, but even if you are a use of CSS for many years, there will still be a lot of CSS usage/attribute/attribute values you have never used, even never heard of.

The 1.CSS Color property is not available for text display only

For CSS color Properties, it is believed that all Web developers have used it. If you are not a particularly experienced programmer, I believe you may not know that attributes can be used color in addition to text display, but also as other places.

Please note that only one attribute is used in the above code, which color is body set to the element yellow . But, as you can see, all the stuff on this page turns yellow, including:

• Cannot display the text of a picture alt
• 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.

Interestingly, this hr element, by default, does not inherit from the body color property, but I use border-color: inherit force to inherit it. This is a very strange feature.

. The Visibility property in CSS has a collapse property value: Collapse

For the properties in CSS visibility , I believe you have used it more than hundreds of times. Most of the time, you'll set its value to visible (this is the default value for all page elements), or Yes hidden . The latter display: none is equivalent, but still occupies page space.

visibilitythere can actually be a third value, that is collapse . When a property of an element visibility is set collapse to a value, it behaves the same as the normal element hidden . The exception to this is that if the element is a table-related element, such as a table row, table group,table column, table column group, it behaves the same way, that is display: none , the space they occupy is freed.

Unfortunately, different browsers collapse treat values differently.

Css-tricks's Almanac suggested that this value should not be used because the browser is not unified.

According to my observation:

• In Google Chrome, collapse hidden There's no difference between using values and using values. (See this bug, Report and comments)
• In Mozilla Firefox, Opera, and IE11, the collapse effect of using a value is like its literal meaning: The table's row disappears, and its next line complements its position.

To be honest, it's very rare to expect this value to be used, but you need to know that you can really use a value like this, and if you don't know it before, now, in some rare places, you might be smarter.

New attribute values are added to the background shorthand method in 3.CSS

In CSS2.1, the background shorthand for a property contains five attribute values –,,, background-color background-image background-repeat , and background-attachment 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 backslash inside, which is similar to the font use of the backslash used in the Border-radius shorthand method. The backslash can then be written in a browser that supports this notation position background-size .

In addition, you can add two other properties that describe its value: background-origin and background-clip .

Its syntax is used to look like this:

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

With regard to 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 that should not be supported.

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

As mentioned before background-clip , you might think of clip attributes. 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 it clip only takes 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 to be position position: fixed , because, according to the official CSS specification, fixed the 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, for example,,, and so on, when padding-top padding-bottom margin-top margin-bottom You set them by percentage, the width of the parent container is also used. Rather than heights.

Here is an example demonstration where you can adjust the width of the container, but you will find that the distance from the yellow block padding-bottom will be larger or smaller with the width.

6.border attributes are more complicated than you think.

Many of us have used this notation:

. example {  border:solid 1px black;}

The usage of the border properties here is actually a shorthand form, which is set separately border-style , border-width and border-color -with a code representing them three.

But do not forget,, border-style border-width , and border-color also have their own shorthand form. So, border-width it can be written like this:

. example {  border-width:2px 5px 1px 0;}

In fact, each of these attributes can also continue to refine, be split into border-left-style , border-top-width , border-bottom-color ....

However, you cannot use border the shorthand to set different values for each of the four edges, which can only be set separately. So, border it's a shorthand attribute.

The 7.text-decoration property becomes a shorthand attribute

I'm sure that some little knowledge will surprise you.

Following the latest CSS specification, here's how it's written text-decoration :

A {  text-decoration:overline aqua wavy;}

text-decorationThe attribute 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), border-width properties can accept predefined constant values: medium , thin , and thick

In fact, if you don't border-width assign a value to a property, its default value is "Medium". When the browser uses these predefined constant values, the CSS specification does not specify what the width should be, but from my observation, their values are 1px, 3px, and 5px, respectively.

9. Why no one uses border-image

I used to write an article about the border-image properties of CSS. 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. Here is an example demo, you can drag and drop the size of the box inside to see what the border pattern changes.

Html

<div class= "Bi lazy" ><p>< the upper block uses a picture stroke. In the lower right corner of this block, there is a small triangle that can adjust the size of this block, point it, drag it to resize the box, and see what effect it has. </strong></p><p>pellentesque habitant Morbi Tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, Feugiat vitae, ultricies eget, Tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></div>

Css:

Body {  font-family:arial, Sans-serif;  Text-align:center;}. Bi {    border:45px solid transparent;    -webkit-border-image:url (http://www.webhek.com/wordpress/wp-content/uploads/2014/07/bg-pawprints-all.jpg) 45 Round;    -moz-border-image:url (http://www.webhek.com/wordpress/wp-content/uploads/2014/07/bg-pawprints-all.jpg) round;    Border-image:url (http://www.webhek.com/wordpress/wp-content/uploads/2014/07/bg-pawprints-all.jpg) round;    Font-family:arial, Helvetica, Sans-serif;    Color: #222;    width:500px;    margin:30px Auto 30px Auto;    Overflow:hidden;    Resize:both;}

10. Do you know the Empty-cells attribute in table?

The properties in CSS empty-cells are supported by all browsers, even including IE8, which is used in the following way:

Table {  empty-cells:hide;}

Oblique attribute value of 11.font-style

For properties with CSS font-style , I estimate that every time you see a "normal" or "italic" two attribute values. But in fact, you can also assign it to "oblique".

What does that mean? Why is the effect of "oblique" and Italic "italic" the same?

This is described in the CSS specification as "oblique":

“... A font is identified as italic (oblique), and the italic font is used if there is no such format. ”

The "Oblique" and "italic" described here are meant to be tilted. The interpretation of "oblique" in Wikipedia is a typographic term, which is a slanted text, but not italic.

Because "oblique" font-style is a legitimate property value, it can be interchanged with italic unless there is a font that only provides the oblique body and does not provide italics.

But I never seem to have heard of any glyphs that provide oblique fonts, maybe I was wrong. The study found that a font might not be able to provide both italic and oblique two fonts, because oblique is basically an oblique, rather than a true italic, of imitation.

So, if I'm not mistaken, if a font does not provide italics, then when using CSS font-style: italic , the browser is actually font-style: oblique displayed.

12.word-wrap and Overflow-wrap are equivalent.

word-wrapis 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.

Despite the support of all browsers, the Internet has decided to overflow-wrap replace it word-wrap , and I think it may be that they think the word-wrap word is inappropriate. overflow-wrapwith the word-wrap same attribute value, but now, word-wrap as overflow-wrap an alternative notation.

Although there are many browsers that support overflow-wrap this type of writing, it does not seem necessary to use it overflow-wrap to make the old browser unsupported. All browsers will continue to support word-wrap this notation.