The box model
Box concept:
Each TAB on the page can be viewed as a “box”, which makes layout easier from the perspective of the box
Composition:
CSS provides that each box is composed of four parts: content, padding, border, and margin
1. Width and height of content
Action: Uses the width and height attributes. The default setting is the size of the box content area
Property: width/height
Common values are number +px
2. Padding
Effect: Setting the distance between the border and the content area
Property name: PADDING
Memory rule: Assignment from the top, then clockwise (upper right, lower left), if assigned, look opposite!!
Padding – Single direction setting
Scene: A box with a separate inside margin in one direction
Property name: PADDing-position noun
Property value: number + px
Padding-left = 10px;
3. Border
Border – border: thickness of the border style of the border color of the border;
Border-width: top right, bottom left; Border-top: width of border style of border color of border; Digital + px;
Border-style: top right bottom left; Border-right: width of border style of border color of border; The solid line indicates that the dashed line increased from five to five
Border-color: top right, bottom left; Border-bottom: width of border style of border color of border;
4. Margin
Effect: Setting the distance between boxes outside the frame;
Property name: margin
Memory rule: Assignment from the top, then clockwise (upper right, lower left), if assigned, look opposite!!
Margin – Set in one direction
Scene: Only a single margin in one direction of the box
Translation: Margin-orientation noun
Property value: number + px
Horizontal margin calculation
Horizontal layout of the box, left and right margin normal, do not affect each other
Finally, the distance between the two is the sum of left and right margin
Merger phenomena
Scene: Vertical layout of block-level elements with upper and lower margins merged
Result: The final distance between the two is the maximum margin
Margin for only one box
Subsidence phenomenon
Scene: block-level elements nested within each other, so that the margin-top of the child element is applied to the parent element
Effect: Causing the parent element to move down together
Solution:
1. Set the parent element to border-top or padding-top (margin-top separating parent elements)
2. Set overflow: hidden for the parent element // Recommended usage
3. Convert to inline block elements
4. Set the float
Note:
Vertical margins for inline elements are not valid,
The vertical distance can be changed by lineheight;
5. Pay attention to the box model
1. Internal subtraction problem
Problem Description:
After adding the padding /border, the box will be enlarged and the width and height of the elements will increase.
To keep the width and height of the original element unchanged, you must subtract some of the content width and height;
Solution ① : Manual internal reduction
• Action: Calculate the excess size yourself and subtract it from the content manually
• Disadvantages: Too much calculation in the project, very troublesome
Solution ② : Automatic internal reduction
• Action: set box property box-sizing: border-box; Can be
• Advantages: The browser automatically calculates the excess size, automatically subtracts the content,
You don’t need to change the content size; the width and height of the box elements remain the same
2. Common width and height of box models
1. Content width and height:
Is the width and height set by the width/height attribute of the tag; 200, 200,
2. Element width and height:
Width = left margin + left margin +width+ right margin + right margin; 40 + 20 + 200 + 20 + 40
High degree of empathy;
3. Width and height of element space:
Width = left margin + left margin + left inner margin +width+ right inner margin + right margin + right margin + right margin; 30 + 40 + 20 + 200 + 20 + 40 + 30
3. Ultimate calculation formula of actual box size:
• Box width = left padding + left padding + content width + right padding + right padding
• Box height = top border + top padding + Content width + Bottom padding + bottom border
floating
Standard flow:
Standard flow: Also known as document flow, is a set of typographical rules adopted by browsers by default when rendering and displaying web page content, specifying how elements should be arranged
Design, Preparation, and preparation of standard stream layouts:
1. Block-level elements: Top down, vertical layout, exclusive row
2. In-line elements or in-line blocks: left-to-right, horizontal layout, automatic folding when there is not enough space
floating
Floating flow is a “semi-detached” typesetting method
Floating flow has only one layout, horizontal layout. It can only set the left or right alignment of an element
Left float: float: left
Right float: float: right
Floating flow has no center alignment, that is, no center
Margin: 0 auto; margin: 0 auto;
There is no distinction between block-level elements/in-line elements/in-line block-level elements in floating flows
Both block-level elements/inline elements/inline block-level elements can be typesetted horizontally
The width can be set for either block-level elements/inline elements/inline block-level elements in a floating flow
To sum up, elements in a floating flow are a lot like in-row block-level elements in a standard flow
More than one line can be displayed, and the width and height can be set
What is the de-scaling of floating elements?
Off-scaling: Departure from the standard flow
When an element is floated, it looks as if it has been removed from the standard stream. This is the de-indexing of the floating element
Remove the floating
Designed to remove the effect of floating
• Impact: If the child element floats, it cannot support the block-level parent element of the standard stream
➢ reasons:
• Child elements float off the scale → do not occupy position
➢ purpose:
• The parent element needs to have height so that it does not affect the layout of other page elements
Method to clear the float
① Set the parent element height directly
➢ features:
• Advantages: Simple and crude, convenient
• Disadvantages: Some layouts do not have fixed parent height. For example: news list, JINGdong recommendation module
② Extra label method
➢ operation:
1. Add a block-level element at the end of the parent element content
2. Set clear:both for the added block-level elements
➢ features:
• Disadvantages: Add extra tags to the page, which can complicate the HTML structure of the page
③ Single pseudo-element elimination method
Operation: Substitution of extra tags with pseudo-elements
• Advantages: Used in projects, add tags directly to clear the float
(Add the class name to the element that you want to clear the float, and then reference the element directly in the CSS.)
.clearfix::after{
content:” “;
display:block;
clear:both;
// Add code that, for compatibility purposes, does not see false elements in the web page
height =0;
visibility:hidden
}
④ Double pseudo-element elimination method
Advantages: Used in projects, add tags directly to clear the float
⑤ Set overflow: hidden to the parent element
Set Overflow: Hidden directly to the parent element
Pseudo elements
Goal: The ability to create content in a web page using pseudo-elements
Pseudo-elements: Pseudo-elements can be used in non-body content on a normal page
➢ difference:
1. Element: HTML set tags
2. Pseudo-element: the label effect simulated by CSS
➢ species
::before adds a pseudo-element to the parent element
::after Adds a pseudo-element to the end of the parent element
Focus:
1. You must set the Content property to take effect
2. The default pseudo-element is the inline element **Copy the codediv ::before {
content: "I am in front of the words.";
color: red;
}
Copy the code<div>
<span>/ I am the middle of the text /</span>
</div>
Copy the code
Note: Single-closed tags do not support pseudo-elements, such as img and input