Vertical Layout
By default, the height of the parent element is stretched by the content. The child elements are arranged in the content area of the parent element. If the size of the child element exceeds the parent element, the child element overflows from the parent element. Use the overflow property to set the parent element to handle the overflowed child elements:
overflow:auto handled in both directions
overflow-x: handles the horizontal direction separately
overflow-y: handles vertically separately
Optional values:
visible: The default value child element overflows from the parent element and is displayed outside the parent element
hidden: overflow content will be trimmed and not displayed
scroll: Generate two scrollbars to view the complete content
auto: generate scrollbars as needed
Here are some examples:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../css/vertical_layout.css">
<title>Vertical layout of boxes</title>
</head>
<body>
<div class="box">
<div class="inner">A balanced diet and moderate exercise are important for people. A balanced diet means choosing a variety of foods and appropriate portions to provide a variety of nutrients and appropriate calories to maintain the growth of body tissues, increase resistance and achieve a moderate weight. You should follow the "diet pyramid" when eating.Eat in proportion and drink plenty of water each day to promote health. A balanced diet helps your body function properly, helps fight illness, keeps you feeling energetic and maintains your ideal weight at all times. The most effective and sustainable way to achieve your ideal weight is to maintain a healthy diet and exercise in moderation. Eating more fried and sweet or salty foods can cause obesity.High blood pressure, high cholesterol and so on are harmful to people's health.</div>
</div>
</body>
</html>
.box{
width: 200px;
height: 200px;
background-color: cadetblue;
overflow:auto;
}
.inner{
width: 200px;
height: 300px;
background-color: burlywood;
}
Adjacent vertical margin overlap (collapse)
Adjacent vertical margins overlap in the following two cases:
Brotherhood Element
The adjacent vertical outer margin between sibling elements takes a larger value (both positive values)
Exceptional case:
1. If the adjacent margin is positive or negative, take the sum of both
2. If the adjacent margins are negative, the absolute value is higher.
The overlap of outer margins between sibling elements is beneficial for development, so we don't need to deal with it.
Here are some examples:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../css/margin_overlap_01.css">
<title>Outer margin overlap(one)</title>
</head>
<body>
<!-- Brotherhood Element -->
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
/* The outer margins overlap at this point */
.box1{
width: 100px;
height: 100px;
background-color: cadetblue;
/* box1 If both the margin attributes of box2 and box2 are positive values, the margin attributes of one plus one minus sum the two, and the margin attributes of two minus take absolute values greater */
margin-bottom: 5px;
}
.box2{
width: 100px;
height: 100px;
background-color: darkgreen;
margin-top: 25px;
}
Parent-Child Elements
Adjacent outer margins between parent and child elements, which are passed to the parent element (the upper outer margin).
Overlapping parent-child margins can affect page layout and must be handled.
Here are some examples:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../css/margin_overlap_02.css">
<title>Outer margin overlap(two)</title>
</head>
<body>
<!-- Parent-Child Elements -->
<div class="box3">
<div class="box4"></div>
</div>
</body>
</html>
.box3{
width: 100px;
height: 100px;
background-color: cadetblue;
}
/* box3 The outer margin value on and child element box4 is 30px, that is, the outer margin value on child element box4 is also passed to box3 */
.box4{
width: 50px;
height: 50px;
background-color: darkgreen;
margin-top: 30px;
}
How do I move the green square vertically below the light blue square in the picture?
Solution:
1. Do not overlap parent-child elements with outer and upper margins
2. Do not allow parent-child elements to be adjacent (i.e. border merge)
Examples are as follows:
/* Option 1: Change the upper internal margin value of the parent element to 50px, decrease the height value by 50px, keep the overall height unchanged but move the content area down by 50px */
.box3{
width: 100px;
height: 50px;
background-color: cadetblue;
padding-top: 50px;
margin-top: 30px;
}
.box4{
width: 50px;
height: 50px;
background-color: darkgreen;
}
/* Option 2: Change the border size to move the content area down by 10px */
.box3{
width: 100px;
height: 90px;
background-color: cadetblue;
border-top: 10px cadetblue solid;
margin-top: 30px;
}
.box4{
width: 50px;
height: 50px;
background-color: darkgreen;
margin-top: 40px;
}
