CSS floating layout & box model
1. What is floating?
Floating is to make the block-level label not occupy a single line. Purpose: to arrange the block-level label on a line. Float: left/right/none
2. Floating principle
Keep the element out of the document flow without occupying the standard flow
3. After floating, the following elements will not be displayed to the next line whether they are block-level or row-level elements
4. Clear float
Purpose: Let the following elements automatically fall to the next line
method:
-
Add an empty label and set the style: color: both clear:left clear:right clear:none #clear left and right floating clear:both
-
Add styles to the parent level to clear the float: overflow: hidden; (commonly used) overflow:hidden; #The excess part is hidden, and it can also be used to clear the float
-
Add a pseudo element to the parent to clear the float, and set the style: Parent element: after{ content:""; display:block; clear:both;}
5. CSS box model
Each element is a box A box is composed of margin (outer margin), border (border), padding (inner margin) and content (content) The difference between inner and outer margins is based on border (border). The system default The margin is 8px
-
Margin: refers to the distance outside the margin line of the element. margin-left: left margin. margin-right: right margin. margin-top: top margin. margin-bottom: bottom margin. margin: can be used to set the distance of any one side. You can take 1 to 4 parameters. 1 parameter (apx): means that there are margins set to apx for up, down, left, and right. 2 parameters (apx bpx): means that the top and bottom margins are apx, and the left and right margins are bpx. 3 parameters ( apx bpx cpx): indicates that the top margin is apx, the bottom margin is cpx, the left and right margins are bpx 4 parameters (apx bpx cpx dpx): the top margin is apx, the right margin is bpx, the bottom margin is cpx, and the left margin is dpx
-
padding (inner margin): refers to the distance between the text content of the element and the border, the same as the margin usage
-
border (border) border-width: the width of the border line border-style: the style of the border line border-color: the composition of the border line color: border: border-width border-style border-color Note: border-width border-style border-color The three parameters have no position
6. The real size of the box
Box width = width + padding left and right + border left and right Box height = height + padding up and down + border up and down
7, display attributes
The display attribute is used to set the display mode of the element
Property value:
-
none: do not display the element
-
block: block display, set line break before and after the element Purpose: set the line label as a block label
-
inline: inline display Purpose: convert block-level labels to line-level labels, and delete line breaks at the same time
-
inline-block: Convert block-level or line-level tags to inline block-level tags
8, table style
Table is generally not used for layout, mainly used to format data