Revisit some of the CSS's knowledge points

Source: Internet
Author: User

1, block-level elements: Div h (1-6) p ul Li, block-level element parent element is body, so as wide as the browser, always occupy a line
Inline elements: a span img
2, selector:
1, Context Selector
Special Context selector: Label 1 > Label 2: Label 1 cannot be an ancestor element other than the parent element of label 2
2,id and Class selectors
Tag Band class selector: P.classname with this className paragraph
3, Property Selector
3, Pseudo-class:
1, link pseudo-class a:link a:visited a:hover a:active
2,input:focus
3,:target
Structured pseudo-Class:
1,e:first-child E:last-child
2,e:nth-child (n)//n= digital/odd/even/
4, Pseudo element:
:: First-letter Paragraph first character
5, Inheritance: Most of the attributes associated with text can be inherited, such as color, font, size
6, cascading: Inline styles > Embed styles > Link styles > Default styles
Weight of the!important weighting statement
ID selector > class selector > tag Selector

7, each element will generate a box on the page, the box model
8, the left and right margins can use pixels, the upper and lower margins in the EM unit allows the segment spacing to increase or decrease with the font size change
9, an element with no width will always expand to fill its parent element's width, add a border, and the internal and external margins will cause the content width to be reduced
10, set the width of the box to add a border, the internal and external margins will cause the box to expand wider, the width of the box is set only the box content area, rather than the box to occupy the horizontal width
11, when floating non-picture elements, it must be set width, so as not to clutter the layout
12, clear float:
1,overflow:hidden 1 prevents a containing element from being large by a large content 2 forcing a parent element to contain its floating child elements
2,.clearfix:after {
Content: ".";
Display:block;
height:0;
Visibility:hidden;
clear:both;//Clear float means that the new child element in the box clears the left and right floating elements, which are located below
}
13, positioning:
Relative: relative to the position of the element originally in the document flow, the element originally occupied the space is not moved, the other elements did not move.
Absolute: Completely out of the document flow position, the space previously occupied by this element is "recycled", relative to the element's ancestor container in position. If the ancestor element does not have a relative positioning element, it is positioned with the default positioning context BODY element
14,dispaly:none occupy the position will be recycled
Visibility:hidden occupy position will not be recycled
15, Background:
Background color--background image--foreground layer
Background-repeat
Background-position
16,vps: Vendor Prefix
17, Font:
EM: The font size of the element to be determined relative to the nearest ancestor element with the font size set (can set the body's font-size to 62.5%, then 1em is 10 pixels, easy to convert)
REM: Font size relative to HTML root element to determine (ie8+), write an absolute unit declaration for unsupported browsers
Font-style:normal/italic (Italic)
Font-weight:normal/bold
Font:font-weight Font-style (not in order) Font-size (required, can be set together with row height, such as 12px/1.5, indicating a row height of 1.5 times times the font 12px) font-family (required)}
18, Text properties:
Text-indent: Text Indent
Text-decoration text-align
Line-height: Increase spacing between lines of text
19, Layout:
Box-sizing:border-box adding an inner margin or border to a box will not cause the width of the box to change (ie8+)

Revisit some of the CSS's knowledge points

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: info-contact@alibabacloud.com 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.