Some CSS trivia that you often ignore

Source: Internet
Author: User

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

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

can put all the things on the page change color. For example:

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:

   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:  }



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 And so on, when you set them by percentage, it is the width of the parent container, not the height. Add a padding-top to the picture:


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>


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>


Attached: Word-wrap value:

Word-break Value:


Some CSS trivia that you often ignore

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.