1. Add: How the box model is calculated in CSS
. box {
Box-sizing:content-box/border-box;
}
Content-box: The total width =margin+border+padding+width of a box, that is, width simply refers to the contents of the box.
Border-box: The total width =margin+width of a box, that is, the width of the content, padding, border, and
2. Supplement: How to solve the problem of margin-top/bottom of sub-elements
As the following illustration: The first child element in the parent container Parent2 child2, it is not feasible to set the Margin-top property to move the 20px down in the parent container.
Instead, the parent element div moves down 20px along with Child2. How to solve this kind of problem.
<!doctype html>
Workaround:
(1) Adding border--to the parent element has side effects: The general parent Element Div is used for layout use, adding border will use the content of the height and width to become larger
(2) Adding padding-top:1px--to the parent element has side effects
(3) Adding overflow:hidden--to the parent element has side effects: Once the child element content overflows, it will be unable to display the overflow content
(4) Add content generation for parent element: This method has no side effects
. parent:before {
Content: ";
display:table;
}
<!doctype html>
3. Supplement: child element all floating stepfather element height is 0
Workaround:
(1) Adding overflow:hidden--to the parent element has side effects
(2) Add a post-content build for the parent element
. parent:after {
Content: ";
display:table;
Clear:both;
}
<!doctype html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
