Some CSS trivia that you often ignore

the 1.CSS Color property is not just for text display

for the Color property of CSS, all Web developers are believed to have used it. Suppose you are not a special

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

be able to 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.

  <span style= "FONT-SIZE:14PX;" > 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 consists of five attribute values –background-color, background-
Image,background-repeat, Background-attachment, and Background-position. Starting with CSS3 and adding 3 new attribute values, add up to a total of 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 is similar for the font and Border-radius shorthand methods. The backslash can be in a browser that supports such a
Position followed by writing background-size. Besides, can you add? Two other descriptive descriptions of its property values: background-
Origin and Background-clip. Its syntax is used as follows:

   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 and so on, when they are set by percentage, the width of the parent container is also, not the height. Add to Picture? A padding-top:
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 be used to define a constant value in advance
In addition to being able to use standard width values (such as 5px or 1em), the Border-width property can accept predefined constant values: Medium, thin, and thick in fact, assuming you don't assign a value to the Border-width attribute, 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 and even includes IE8, which is used in the following way:
1:table {empty-cells:hide;}

It is expected that you are semantically guessing its role. 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, i.e.: border-collapse:separate;

 8. Oblique attribute value of Font-style
For the Font-style property with CSS, I expect everyone to see the value of "normal" or "italic" two attributes each time. But in fact, you can also have it assigned to "oblique".

9, Word-wrap and Overflow-wrap are equivalent
Word-wrap is not a non-regular 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 when wrapping, rather than 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:
Original: http://www.ido321.com/450.html










Some CSS trivia that you often ignore