CSS Basics (Precedence, some properties of elements within a row, font-size units) How do I not load a picture

Reprinted from: http://www.cnblogs.com/ctriphire/p/4159935.html

The CSS case insensitive selector priority is as follows:

1. Using!important after a property overrides the element style defined anywhere within the page.
2. Styles written as style attributes within an element
3. ID Selector
4. Class Selector
5. Tag Selector
6. Wildcard Selector
7. Browser customization or inheritance

Same level

Post-write overrides in the same level will overwrite the first-written style

Rule is a combination of multiple levels, the rule in the selector to do the addition, the comparison of weights, if the weight is the same as the back of the previous cover, the weights of each selector are:

• The weighted value of the inline style sheet is 1000
• The ID selector has a weight value of 100
• The class selector has a weight value of 10
• The weight value of the HTML tag Selector is 1

Some properties of inline (inline) elements

Not all attributes can take effect on inline elements

1. Inline elements do not apply the Width property, which is the length of the content
2. Inline elements do not apply the Height property, and the heights are also stretched by the content, but the height can be adjusted by line-height
3. The Padding property of the inline element takes effect only with Padding-left and Padding-right, and Padding-top and Padding-bottom change the range of elements but do not affect other elements
4. The margin property of the inline element is valid only for Margin-left and Margin-right, Margin-top and margin-bottom are not valid
5. The overflow property of the inline element is not valid, this is not much to say.
6. Invalid Vertical-align property for inline element (height property is not valid)

Some mutually exclusive elements

1. For absolute and fixed positioning (fixed size, set width and height property) elements, if the top and left properties are set, then setting the bottom and the right values will not work, it should be top and left priority high, Otherwise write the browser how to know according to who location
2. For absolute and fixed positioned elements, the margin property does not work if you set the value of top, left, bottom, and right.
3. For absolute and fixed positioned elements, the float property is also invalidated if the value of top, left, bottom, and right is set
4. Block elements if the float property is set or absolute, fixed positioning, then the Vertical-align property no longer works

Font-size units

When we write the size of the font, the units we use are

• Px
• Pt
• Em
• Rem

What does each of these fonts mean?

1. px is a pixel abbreviation and is a pixel-based unit. In the process of browsing the web, the text, pictures, etc. on the screen will vary with the resolution of the screen, a 100px width-sized picture, at 800x600 resolution, to occupy the screen width of 1/8, but at 1024x 768, it accounts for only about 1/10. So if you define the font size, use PX as the unit, that once the user changes the display resolution from 800 to 1024, the user actually see the text will become "small" (natural length units), even can not see clearly, affect browsing.
2. PT is a point (LB) abbreviation and is a fixed-length unit of measure with a size of 1/72 inches. If you use PT for text on the web, the font size is the same as in different screens (the same resolution), which can have an impact on typography, but it is quite handy to use PT in Word. Because the main purpose of using Word is not for screen browsing, it is output printing. When printing to the entity, PT as a natural length unit is convenient and practical: for example, word in the ordinary documents are used "9pt", the title with "Blackbody 16pt" and so on, no matter how the computer set, print it is always so big.
3. em: is a relative unit, is a unit of relative length, originally refers to the width of the letter m, so called Em, now refers to a multiple of the width of the character, the use of similar percentages, such as: 0.8em, 1.2em,2em and so on. Usually 1em=16px (browser default font size 16px), EM refers to the font size of the parent element. Given the font size of a parent element on a page, you can change the size of all elements proportionally by adjusting an element. It can be scaled freely, for example, to make a scalable stylesheet. Similar to the concept of ex, the height of the ex relative to the character "X" is typically half the size of the font.
4. rem: REM is a new CSS, EM is relative to its parent element to set the font size, so there will be a problem, any element settings, you may need to know the size of his parent element, in multiple uses, will bring unpredictable error risk. While REM is relative to the root element

How to make the picture not be loaded

IMG tags, whether displayed or not, the picture will be loaded (so try to save the network traffic by Display:none the image to achieve the practice of saving it ...) Often use CSS properties such as backgroung-image to add pictures to the page, are these images bound to be loaded, see an example

 <!doctype html>
Look at the network monitoring situation
We can find that pictures 0 and 4 are not downloaded, 0 is not used css,4 is the parent container display is set to none of the case , in both cases the CSS reference picture is not to be loaded, The picture is still loaded when the parent container setting visibility property is hidden
That is, the CSS is set background-image but the CSS style is not referenced in the HTML, so the Background-image picture in this style will not be loaded
In addition, the CSS is set background-image but the HTML refers to the parent container of this style display:none, so that the situation slices will not be loaded!
CSS Basics (Precedence, some properties of elements within a row, font-size units) How do I not load a picture