The default height
Regardless block elements or inline elements, which are the default height was propped open their own content
overflow
- As the name suggests, the size of the sub-elements exceeds the parent element, called overflow
- How to use the overflow property to handle overflow
| The optional value overflow |
|---|
| visible |
| hidden |
| scroll |
| auto |
<head>
<style>
div{
overflow:/*可选值*/
}
</style>
</head>
<body>
<div>一段很长的文字</div>
</body>
- visible to the default value, child elements overflow content will be displayed on the outside of the parent element
- hidden overflow section will cut, will not be displayed
- scroll generates horizontal and vertical scrollbars
- The scroll bar will auto actual situation, the need to generate, thus generating only the vertical scroll bar
But also through overflow-x, overflow-y treatment alone horizontal, vertical overflow
Vertical overlap margins (fold)
- It refers to the adjacent vertical margins, e.g. margin-top margin-bottom elements above and below the element
<head>
<style>
.first{
width:100px;
height:100px;
background-color:skyblue;
margin-bottom:100px;
}
.second{
width:100px;
height:100px;
background-color:skyblue;
margin-top:100px;
}
</style>
</head>
<body>
<div class="first">我是第一个元素</div>
<div class="second">我是第二个元素</div>
</body>
For siblings
| Two margin values | Spacing element |
|---|---|
| We are positive | Whichever maximum |
| A positive and negative | Whichever of and |
| They are negative | The maximum value of the absolute value |
<head>
<style>
.first{
width:100px;
height:100px;
background-color:skyblue;
margin-bottom:100px;
}
.second{
width:100px;
height:100px;
background-color:skyblue;
margin-top:200px;
}
</style>
</head>
<body>
<div class="first"></div>
<div class="second"></div>
</body>
display effect
- Two are generally encountered in the development of positive, negative for the presence of special circumstances
- Sibling elements from the outer overlapping part of the optimization, no treatment
For father and son element
- Adjacent sub-elements from the outside will be passed to the parent element, for example the above margins
<!--希望把子元素往下移100px，父元素不动-->
<head>
<style>
.first{
width:200px;
height:200px;
background-color:skyblue;
}
.second{
width:100px;
height:100px;
background-color:red;
margin-top:200px;
}
</style>
</head>
<body>
<div class="first">
<div class="second"></div>
</div>
</body>
Display, set the margin-top sub-element to the parent element will affect
- Will affect the page layout, must be treated
