CSS Box Model
#### 1.1 Margin problem
**Classic situation 1:**
- Structural relationships: vertical margins collapse for nested block elements
- Problem description: When the parent element has no padding, margin, and border, the child element is directly adjacent to the parent element, and the margin value of the child element will be passed to the parent element and merged with the margin value of the parent element again. The final result is a positive value The larger value of the two, the negative value takes the value with the larger absolute value.
- Performance: parent and child elements share a margin
```css
.parent{
width:100px;
height:100px;
background-color:red;
}
.child{
width:100px;
height:100px;
background-color:green;
margin-top:100px;
margin-bottom:100px;
}
```
<div class="parent">
<div class="child">
</div>
</div>
- Solution
- Set a border or padding to the parent element (use with caution)
- parent element overflow:hidden, change the rules
**Typical situation two:**
- Structural relationship: vertical margins of adjacent elements are merged
- Problem description: When the margin values of two block-level sibling elements directly meet in the vertical direction, they will be merged. The final result is that the positive value takes the larger value of the two, and the negative value takes the larger absolute value
- Performance: two margins merged into one
```css
.box1{
width:100px;
height:100px;
background-color:red;
margin-bottom:100px;
}
.box2{
width:100px;
height:100px;
background-color:green;
margin-top:100px;
}
<div class="box1">
<div class="box2"></div>
</div>
```
- Solution
- Try to define only one of the margin values
- Add a parent element `overflow:hidden` to one of the boxes to change the rendering rules
- The other conditions are the same as above [simple take over, such as similar problems with descendant elements, etc.]
#### 1.2 Summary
- Ask a question to compare the difference between it and the express box through the actual use of the box model
- Summarize the calculation of the box model occupancy: width/height + padding + margin
- Remind students to pay attention to whether the measured width and height are the content width or the padding width and height during the actual development process
- There is a folding problem when the margin value meets in the vertical direction
### 2. CSS display mode
Overview: The display mode refers to how elements are displayed. For example, div occupies one line by default, and spans can be arranged in one line by default. Knowing their characteristics and classification can better layout web pages. HTML elements are generally divided into three display modes: block-level elements, inline elements, and inline block elements.
#### 2.1. Summary of element default display mode and element characteristics
- An element whose property is `display:block` is called a block-level element
- Common block-level elements div, h1-h6, p, ul, li, dl, dt, ol
- Elements whose attribute is `display:inline` are called row-level elements
- Common row-level elements: span, strong, em, i, a, b
- An element whose attribute is `display:inline-block` is called a row-level block element
- Common inline block elements: img, input (form elements will be discussed later)
#### 2.2 Summary of block-level element features
- In a single line, width and height can be set
- When no width is set, the width of a block-level element is the width of its parent element content
- When no height is set, the height of the block-level element is the height of its own content
- You can set up, down, left, and right inner and outer margins
#### 2.3 Summary of inline element features
- By default, the width and height cannot be set, and the width and height depend on the content
- Inline elements can only hold text or other inline elements (note here, do not nest block-level elements inside inline elements)
- There is a gap between the row labels, and the upper and lower margins cannot be set
#### 2.4 Summary of the characteristics of inline block elements
- By default, the width and height can be set, and the width and height depend on the content
- You can set inner and outer margins in any direction
- There is space in the middle when side by side
#### 2.5, element type conversion
In special cases, we need to convert the mode of the element, change the default element mode to have the characteristics of another element mode, and use the display attribute to convert the three arbitrarily.
- display:inline is converted to an inline element [not commonly used]
- display:block is converted to a block element [commonly used]
- display:inline-block is converted to an inline block element [commonly used]