span: first-child select parent element span element in the first child, the first child element further tag have to be span
span: last-child select last child element of the parent element of the span, the last child element further tag have to be span
span: nth-child (n) to select the n-th element of the parent element in the span, the n-th elements have to be further noted that a span is from the front to start looking
span: nth-last-child ( n) to select the n-th element of the parent element in the span, the n-th elements have to be further noted that a span is from the back Find
N all related to the operation, the value n can be from zero, you can take 0,1,2,3,4,5,6,7,8,9 ...
span: nth-child (2n) principle above, it is to take even line
span: nth-child (2n + 1) principle above, an odd row is to take
span: nth-child (even) the principle above, is to take the even lines
span: nth-child (odd) principle above, an odd row is to take
In order to stabilize the page layout among pages, aesthetics, and ease of maintenance, we will label each box are seen as a model
The so-called box model is to an HTML page element as a rectangular box, which is a container containing content. Each content element consists of a rectangular, padding (padding), the border (border) and margins (margin) composition.
Composition box model: border + content + padding + margin
Border border 3.1 box model
border: border-width || border-style || border-color
border: 1px solid red; the most common way to write
3.2 filling padding
The space between the frame (border) and content (content) is in the filling, which is the padding
padding different wording:
padding: 30px; when there is only one value, representing the four directions are the same value
padding: 30px 70px; when two values, a first value represents the vertical, right-left indicates the second value.
padding: 20px 50px 80px 120px; when four values, expressed on the lower right-left.
Factors 3.3 box area
When the width and height of a box set, if coupled with the border or padding, it will affect the original area of the current box
If you want to keep the current area does not change, will require the width of the content of extra value to lose.
3.4 outer margin padding
Space outside the frame border, the distance between the box and the box is the margin or
margin different wording:
margin: 30px; when there is only one value, representing the four directions are the same value
margin: 30px 70px; when two values, a first value represents the vertical, right-left indicates the second value.
margin: 20px 50px 80px; when three values, the first value, said second value represents the right and left, the third value represents.
margin: 20px 50px 80px 120px; when four values, expressed on the lower right-left.
3.5 Use margin when setting margins caused problems
1. adjacent block elements of vertical margins combined
When two vertically adjacent block elements meet, if the above element has bottom margin margin-bottom, has the following elements from the outer margin-top, the vertical spacing than the margin-bottom margin-top between them the sum, but the larger of the two. This phenomenon is referred to as adjacent block elements combined vertical margins (also referred to collapse margins)
Solution by: simultaneously avoid both upper and lower boxes are set up, and margin-bottom margin-top
2. The father and son sharing margin of an element
When the parent element contains a child element of time, if the child element sets a margin-top, the parent element will have a margin-top style
solution:
1. The parent element is provided to border a border: 1px solid red;
2. add an attribute to a parent element overflow: hidden;
4. descendant selector
Action: defining a first range, and then select the label object
A range from the inside, wherein the selected sub-element
.box ul li select the following classes ul tag element named box below all li tags
.demo .li2 select the demo earth element name following classes of all labels name li2
.demo li: nth-child (3) called demo-earth element selected following label li 3rd
Is used to solve the problem of floating block-level elements in a row of the tile, the set have a property to float on the element displayed in a line block row: left;
Floating there against is like to float are floating, floating or else do not float.
Floating elements, will cover the following elements do not float, because the floating elements float up, do not go under the floating elements that go above elements.
box-sizing: border-box; --- content-box is the default value, css2 this standard has been followed.
7. Summary
Structure pseudo-classes:
:last-child
:nth-child
:nth-last-child
:target
Box model consisting of: content + padding + border margins +
conent + padding + margin + border
Floating: to solve the problem is block-level elements in a row of the display.
float:left;
Descendant selectors: .box ul li
Css3 box model of: box-sizing: border-box will enter the box Save mode
* {Margin: 0; padding: 0} and outside clearing default margin label
Remove specks unordered list: list-style: none;
Emmet grammar supplement
ul> li {$ this is a first tab} li * 6
< UL > < li > This is the first one li tag </ li > < li > This is the second li tag </ li > < li > This is the third li tag </ li > < li > This is fourth label li </ li > < li > this is the fifth label li </ li > < li > this is the sixth tag li </ li > </ UL >
w100 h100
.box {
width: 100px;
height: 100px;
}