1. Common horizontal and vertical centering implementation solutions
The simplest solution is flex layout
.container{
display: flex;
align-items: center;
justify-content: center;
}
Absolute positioning with margin:auto (must give .son width and height)
.father {
position: relative;
height: 300px;
}
.son {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 50px;
height: 50px;
}
Absolute positioning is implemented with transform
.father {
position: relative;
}
.son {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
2. Inline elements, block-level elements, and void elements (that is, HTML elements with no content)
Block-level elements: div, ul, li, dl, dt, dd, p, h1-h6, blockquote
Inline elements: a, b, span, img, input, strong, select, label, em, button, textarea
Empty elements: br, meta, hr, link, input, img
3. BFC elements
When we layout the page, the following situations often occur:
- Why is the height of this element missing?
- Why can't the layout of these two columns be adaptive?
- Why does the spacing between these two elements look weird?
- ......
BFC（Block Formatting Context）
That is, block-level formatting context, which is a rendering area in the page and has its own set of rendering rules:
- Internal boxes will be placed vertically one after another
- The margins of two adjacent boxes of the same BFC will overlap regardless of the direction.
- Every element's left margin touches the left edge of the containing block (from left to right), even floated elements
- The BFC area will not overlap with the float element area.
- When calculating the height of BFC, floating child elements also participate in the calculation.
- BFC is an isolated independent container on the page. The sub-elements inside the container will not affect the outside elements, and vice versa.
How to generate a BFC element
- Root element, the HTML element
- Floating elements: float values are left and right
- The overflow value is not visible, but is auto, scroll, or hidden (commonly used)
- display的值为inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
- The value of position is absolute or fixed
Commonly used in the following 3 scenarios
- Prevent margin overlap (collapse)
- Adaptive multi-column layout
- clear internal float
Prevent margin overlap (collapse)
Under normal circumstances, if there is no .container container, the distance between the two p's is 100px, which means that the margins overlap. The solution is to put one on one of the p'sBFC (div plus Go to overflow: hidden;), then the distance between the two p’s is 200px
<style>
.container {
overflow: hidden;// 新的BFC
}
p {
color: #f55;
background: #fcc;
width: 200px;
line-height: 100px;
text-align:center;
margin: 100px;
}
</style>
<body>
<p>Haha</p >
<div class="container">
<p>Hehe</p >
</div>
</body>
clear internal float
Under normal circumstances, due to the existence of floating elements, .par will not have a height. You can add overflow: hidden; to it to become BFC, and the height of the floating element will be calculated.
<style>
.par {
border: 5px solid #fcc;
width: 300px;
overflow: hidden;
}
.child {
border: 5px solid #f66;
width:100px;
height: 100px;
float: left;
}
</style>
<body>
<div class="par">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
Adaptive multi-column layout
Under normal circumstances, .aside will float and be pressed on .main. This can be determined according to the characteristics of that the BFC area will not overlap with the floating box , change .main to BFC, so that .main realizes broadband adaptation and realizes the layout of left and right columns.
<style>
body {
width: 300px;
position: relative;
}
.aside {
width: 100px;
height: 150px;
float: left;
background: #f66;
}
.main {
height: 200px;
background: #fcc;
overflow: hidden;
}
</style>
<body>
<div class="aside"></div>
<div class="main"></div>
</body>