2. Achieve horizontal centering
4. Center horizontally and vertically
1. Realize the triangle
The principle of triangle realization: the width is 0; the height is 0; (1) There is a horizontal and vertical side (up, down, left, and right) set to the border-direction: length solid red, this is the straight line at the bottom. Use the border-direction for the other edges: length solid transparent. (2) There are two horizontal and vertical sides (up, down, left, and right) settings. If the hypotenuse is on the right side of the triangle, set the top or bottom line and the oblique line on the right. If the hypotenuse is on the left side of the triangle, set the top or bottom line and the oblique line on the left.
2. Achieve horizontal centering
(1) Inline elements are centered horizontally
Use text-align: center to achieve horizontal centering of inline elements inside block-level elements. This method is effective for inline elements (inline), inline-block (inline-block), inline-table (inline-table), and inline-flex elements.
(2) Inline block-level elements are centered horizontally
By setting the margin-left and margin-right of fixed-width block-level elements to auto, you can center block-level elements horizontally.
(3) Multi-level block elements are centered horizontally
Use inline-block: if there are two or more block-level elements in a row, by providing a block-level element type display ( the display ) as Block-inline text-align = left attribute and the parent container . To center so that a plurality of Level elements are centered horizontally.
Use display: flex: Use flexible layout (flex ) to achieve horizontal centering, where justify-content is used to set the alignment of the flexible box elements in the direction of the main axis (horizontal axis), in this example, set the child elements to be horizontally centered.
3. Center vertically
(1) Single-line inline elements are vertically centered
By setting the height (height ) and line height (line-height) of the inline element to be equal, the element is vertically centered.
(2) Multi-line elements are vertically centered
Use table layout: Set the display type of the parent element to table. The display type of the child element (display) is table-sell. Use the vertical-align: middle of the table layout to achieve vertical centering of the child elements
Use flex layout: Use flex layout to achieve vertical centering, set the display type (display) to flex. Among them, flex-direction: column defines the main axis direction as portrait. Because flex layout is defined in CSS3, there are compatibility issues in older browsers.
Use 'sprite element ghost element ': that is, put a 100% height pseudo element in the parent container to make the text and the pseudo element vertically aligned, so as to achieve the purpose of vertical centering.
(3) Block-level elements are vertically centered
Block-level elements of fixed height: the parent element position is set to relative, and the child element position is set to absolute. Distance from the top by the absolute positioning element (Top) 50%, and set the margin-top half of the element height offset upwards, the vertically centered can be achieved.
Block-level elements of unknown height: When the height and width of the vertically centered element are unknown, we can use the transform property in CSS3 to offset the Y axis by 50% to achieve vertical centering. However, some browsers have compatibility issues.
4. Center horizontally and vertically
Fixed width and height elements horizontally and vertically centered: By margin shifting half of the element's overall width (including padding, etc.) , the elements are horizontally and vertically centered.
Unknown width and height elements are centered horizontally and vertically : 2D transformation is used to shift half of the width and height in the horizontal and vertical directions in the reverse direction, so that the elements are horizontally and vertically centered. transform: translate (-50%, -50%);
Use flex layout (display: flex): where justify-content is used to set or retrieve the alignment of the flexible box element in the direction of the main axis (horizontal axis) ( center ) ; and the align-items attribute defines the current flex items in the flex container The alignment in the direction of the lateral axis (vertical axis) of the row (center) .
Use grid layout (display: grid): poor compatibility, not recommended
Center horizontally and vertically on the screen: both the regular login and registration pages need to be used. To ensure better compatibility, you also need to use the table layout.
5. New in CSS3
(1) transform deformation
Translation of the elements ( Translate ) , rotation ( Rotate ) , scaling ( Scale ) , the inclination ( skew )
transform will not affect the layout of other elements
(2) Transition
Specify how to transition from one state to another
(3) Animation complex animation
Can achieve more complex style changes
Usage : define key frame style ; apply animation to elements
6. Box model
From outside to inside: margin (margin), border (border), padding (margin), content (content)
7. Clear float
Add height to the parent element of a floating element : If an element wants to float, then its parent element must have a height. The height of the box can be closed to float. Can pass through directly to set the height of the parent element, the practical application of all the boxes we are unlikely to add height, not only cumbersome and can not adapt to fast-changing pages; another, by the height of the parent container contents distraction (such as img picture), this method is used more in practice.
clear: both; Add the last redundant element to the last child element, and then set it to clear: both, so you can clear the float. Here to stress that the elements are added at the end of the parent element must be a block-level element, or can not hold up the height of the parent element .
Pseudo-elements clear float : combine: after pseudo-elements and hasLayout. Can be perfectly compatible with the current mainstream browsers
Use overflow: hidden for the parent element; this solution allows the parent container to form a BFC (block-level format context), and the BFC can contain floats, which is usually used to solve the problem of floating parent element height collapse.
br tag floats : There is one attribute of br tag: clear. This attribute is a weapon that can clear the float, set the attribute clear in the br tag, and assign the value all. You can clear the float.
8. css selector
1. Tag selector div h1 p
2. id selector #id
3. Class selector.
4. Child selector ul> li
5. Descendant selector div p
6. Wildcard selector *
7. Attribute selector div [height = 100px]
8. Pseudo class selector a: hover (link, visited, hover, active)
Inheritable styles: font-size, font-family, color
Non-inheritable styles: border, padding, margin, height, width
9. Style priority
Priority selection nearby: under the same weight, the nearest style definition shall prevail
Same weight: inline style (inside label)> embedded style sheet (in current file)> external style (in external file)
\ 1. The rules declared by! Important are used.
\ 2. The declaration embedded in the style attribute of the HTML element.
\ 3. The ID selector rule is used.
\ 4. Rules for class selectors, attribute selectors, pseudo-elements and pseudo-class selectors are used.
\ 5. The element selector rules are used.
\ 6. Rules containing only one universal selector.
10. CSS3 adds pseudo-classes
p : first-of-type selects the first element belonging to its parent element
p: last-of-type selects the last element belonging to its parent element
p: only-of-type select only elements that belong to its parent element
p: only-child selects only child elements that belong to its parent element
p: nth-child (2) selects the second child element belonging to its parent element
: enabled: disabled The disabled state of the form control.
: checked The radio box or check box is selected.
11. Redraw and rearrange
The methods to reduce redraw and rearrange are:
· Do not query the DOM when the layout information changes,
· Use csstext, className to change attributes at once
· Use fragment
· For elements that have been rearranged multiple times, such as animation. Use absolute positioning to leave the document flow so that it does not affect other elements
