CSS selectors, CSS inheritance relationships, CSS box models

I. Summary

summarize the front-end CSS selectors,css inheritance relations,css box model and other related knowledge, and the error-prone areas to analyze the Explanation.

second, The reason

If you don't understand CSS selectors, inheritance relationships, cascading, and padding,margin differences, and floating issues when developing front-end pages Will cause you to not know when to use the method to handle the Problem. This document is intended to explain these issues.

the Following is a summary and analysis of the relevant knowledge points: third, Selector 1. Basic selector

(1)* wildcard selector represents all elements

example: *{margin:0; padding:0;}

(2) The label selector represents all of the labels in the page

example: p{width:250px; border:1px solid red;}

(3)class selector . class name

example: . sub{width:250px;} represents all elements of class named Sub

(4)ID selector # ID name

example:#uname {background:red;} Representative ID name is uname the only element

2. Hierarchy selector

(1)  descendant Selector Select 1 Select 2

example : UL li{color:blue;}

> Select 1> Select 2 Direct child element Selector

The Father element that represents the LI element (parent) must be ul

(2) parallel selector selector A, selector B

example : #uname,#upass {border:1px solid red}

Uname and upass all set a red border

Note : to manipulate an element, use the selector above to select the element and start setting the CSS

3. Filter selector

(1) basic Filter Selector

: The first letter of first-letter

: First-line First line

(2) sub-element filter Selector

[1] ul Li:first-child

The first Li element of ul (Li must be The first child element of Ul)

[2] ul Li:nth-child(2)

SELECT ul second li element (Li must be The second sub-element of Ul)

[3] ul Li:nth-child(2n)/(2n+1)

Select an odd or an even number of li elements for ul

(3) Pseudo-class selector

[1] a:link {color: #FF0000;}/ non-accessible link / (only for a tag)

[2] a:visited {color: #00FF00;}/ visited link / (only for a tag)

[3] a:hover {color: #FF00FF;} /* Mouse moves to the link

[4] a:active {color: #0000FF;}/ selected link /

5. Attribute selector

1. Select an element that contains a property

a[title]{color:red;} Select Include title of the a label

iv. inheritance of CSS

Child elements in CSS inherit the literal attributes of the parent element

but a does not inherit color attributes and text decoration properties

H does not inherit the text Size property and the weight property

five, Box Model 1, the understanding of the box model

[1] the box model is a rectangular area with height and width, all HTML The labels are all box models .

[1] the standard box model consists of content+padding+border+margin

[2] The actual width of an element

Width(content)+padding(padding)+border(border widths)

the width of the setting is just the size of the content

[3] the distance from the border to its own content (text & sub-elements) can be used

A, set the Element's padding (will Increase the width of the element, write only Once)

b, the child element above set margin(does not increase the size of the father element, all child elements have to set the margin

c, the margin of the padding+ child element ofThe Father element

2.margin notation

Margin Element's border to other elements (father element sibling Element) distance

(1),margin shorthand

Up or down	Margin: 50px;
Up    down	Margin: 50px  100px
Up    left    bottom	Margin: 50px  100px  150px
Up   right    down   left (clockwise)	Margin: 50px  100px   150px 250px

(2), Specify the direction

Margin-left

Margin-right

Margin-top

Margin-bottom

(3), Text Center

when an element has a set width of maring-left maring-right for Auto

will automatically center horizontally within its father's element. ( element cannot set float float)

for Example:. container{width:1000px; margin:0 auto;}

* distinguish between text-align and margin:0 auto;

P{text-align:center;} The text inside the /*p is centered within the range of p * /

p{width:250px; margin:0 auto;} The width of the/*p element is 250px and the entire p element is centered inside its father's element * /

CSS selectors, css inheritance relationships, CSS box models