CSS beginners feel very simple, but with the depth of learning to feel the CSS of the water from a deep, usually encountered a variety of pits, first summed up some often encountered pits
Case insensitive
Although we usually write CSS in lowercase, but in fact, CSS is not case-sensitive
. test{Background-color: #a00; width:100px; height:100px;}
Although Background-color is written in order to Background-color, it will still take effect, the reason is written in lowercase because of the XHTML standard relationship, but even if it is not XHTML or written lowercase is better, beautiful, easy to read and can handle the possible conversion requirements
Selector priority
When the two rules all work on the same HTML element, if the defined attributes have conflicts, then the CSS has a set of precedence definitions for whose values should be used.
Different levels
Using!important after a property overrides the element style defined anywhere within the page.
Styles written as style attributes within an element
ID Selector
Class Selector
Tag Selector
Wildcard Selector
Browser customization or inheritance
Same level
Post-write overrides in the same level will overwrite the first-written style
The above level is easy to understand, but sometimes some rules are a combination of multiple levels, like this
<!doctype html>
In the end Div is the application of that rule, there is a simple calculation method (by the park friend hint, the weight is not actually in decimal, with a number to indicate just thought, 10,000 class is not as good as an ID weight)
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
We can add the rules in the selector, compare weights, if the weights are the same, then cover the front of the div.class, the weight of the 1+10=11, and. Test1. Test2 is 10+10=20, so the div applies. test1. Test2 turns green.
Some properties of inline (inline) elements
Not all attributes can take effect on inline elements
Inline elements do not apply the Width property, which is the length of the content
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
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
The margin property of the inline element is valid only for Margin-left and Margin-right, Margin-top and margin-bottom are not valid
The overflow property of the inline element is not valid, this is not much to say.
Invalid Vertical-align property for inline element (height property is not valid)
<div style= "Background-color: #a44;" > <span style= "PADDING:4PX; margin:8px; height:500px; width:1000px; Background-color: #0e0; " >123456789123456789</span> </div> <div style= "Background-color: #a44;" > <span style= "PADDING:4PX; margin:8px; height:500px; width:1000px; Background-color: #0a0; " >123456789</span> </div>
As we can see from the example, the width and height properties of the span setting are not valid, Margin-top and Margin-bottom are invalid, padding-top and Padding-bottom change the range of the elements (the background area becomes larger), But it does not affect the location of the following elements
Some mutually exclusive elements
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
For absolute and fixed positioned elements, the margin property does not work if you set the value of top, left, bottom, and right.
For absolute and fixed positioned elements, the float property is also invalidated if the value of top, left, bottom, and right is set
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?
PX is a pixel abbreviation and is a pixel-based unit. In the process of browsing the web, the screen text, pictures, etc. will vary with the screen resolution, a 100px width-sized picture, at 800x600 resolution, to occupy the screen width of 1/8, but at 1024x768, 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.
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.
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.
Rem:rem is a new CSS, EM is relative to its parent element to set the font size, so there is 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
: Checked selector Range
We know: Checked will select the selected checkbox and radio to see an example
<!doctype html>
For the first two margin to become 10px we are not surprised, but when we look at select option, we will find that the selected option of the margin industry into 10px, no selected option is not changed!
Yes: Checked will also choose option to be selected
Not all images will be loaded
We know that the IMG tag written on the page, whether displayed or not, will be loaded (so try to save the network traffic by Display:none the image ... , we also often use CSS properties such as backgroung-image to add images to the page, are these images bound to be loaded, see an example
<!doctype html>
Look at the network monitoring situation (how spokesperson photos become small after the feeling strange ...) ）
We can find that the pictures 0 and 4 are not downloaded, 0 is not used in the case of the css,4 is the parent container display is set to none, in both cases the CSS reference picture is not loaded, and the parent container settings visibility property for hidden will still load the picture, Don't get confused.
The above is easy to ignore the content of CSS features, more related articles please pay attention to topic.alibabacloud.com (www.php.cn)!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
