Article Directory
BFC
what is
- The whole process: Block Formatting Context, that is, "block-level formatting context"
- A completely independent space (layout environment), so that the child elements in the space will not affect the layout outside
rule
- BFC is a block-level element that will be arranged one after another in the vertical direction
- It is an isolated independent container in the page, and the labels in the container will not affect the external labels
- If two block-level elements belong to the same BFC, their upper and lower margins will overlap ( margin collapse ), whichever is larger. However, if two block-level elements are in different BFCs, their top and bottom margins will not overlap, but the sum of the two
- When calculating the height of BFC, floating elements also participate in the calculation . BFC can contain floating elements (BFC can be used to clear floating elements)
- The BFC area will not overlap with the floating element area , that is, it will not intersect with the floating box, but will stick to the floating edge
Note: The same element cannot exist in two BFCs at the same time.
how to trigger
common:
effect
- Solve the problem that floating elements cause the height of parent elements to collapse
Method: Enable BFC for the parent element
Principle: When calculating the height of BFC, floating child elements also participate in the calculation
- Non-floating elements are covered by floating elements
Method: Enable BFC for non-floating elements
Principle: The BFC area will not overlap with the float box
- Two column adaptive layout
Method: Set a fixed width for the fixed column, and enable BFC for the unfixed column.
Principle: The area of BFC will not overlap with the float box and
the left column floats. Set overflow: hidden in the right column ; trigger BFC, that is, float + overflow: hidden
- The problem of vertical coincidence of outer margins
Method: Wrap a new box for either the upper box or the lower box and enable BFC
Principle: The margins of two adjacent Boxes belonging to the same BFC will overlap.
Demonstration of the above functions: BFC that understands CSS once - Zhihu (zhihu.com)
other
IFC (row level formatting context) - inline Inline
GFC (grid layout formatting context) - display: grid
FFC (adaptive formatting context) - display: flex or display: inline-flex
Reference:
Interviewer: Please tell me what is BFC? Speak clearly in the vernacular - Nuggets (juejin.cn)
understand the BFC of CSS once - Zhihu (zhihu.com)
What is the BFC in CSS? how to use? - Nuggets (juejin.cn)
position
has the following properties:
relative: An offset occurs relative to its previous position, and the original position is still occupied, without breaking away from the document flow. When offset, other elements may be covered. The body is relative by default , and the son must be relative to the father.absolute: Break away from the document flow, and offset relative to the containing blockposition(containing block: the element whose outer element is notstaticthe nearest level).fixed: Out of the document flow and positioned relative to the viewport .static: Default value, cancel inheritance. No positioning.sticky: css3 new attribute value, sticky positioning, which is equivalent to a mixture of relative and fixed. Initially, it will be regarded as relative and offset relative to the original position; once it exceeds a certain threshold, it will be regarded as fixed and positioned relative to the viewport.inherit: Inherit the position value of the parent element.
Elaborate on the position attribute in css - Zhihu (zhihu.com)
two column layout
The width on the left is fixed, and the width on the right is adaptive.
- Use
flexlayout: set the left element to a fixed width of 200px, and set the right element to flex:1 - Use float . The left element has a width of 200px and is floated to the left. The margin-left of the right element is 200px, and the width is set to auto (the default is auto, which fills the entire parent element)
- The width of the left element is fixed, and it is set to float to the left. Element on the right
overflow: hidden; BFC is triggered on the right, and the area of BFC will not overlap with the floating element, so the two sides will not overlap.
three column layout
Use float on both sides and margin in the middle
- Fixed width on both sides, adaptive width in the middle
- Use the margin value of the middle element to control the spacing on both sides
- When the width is less than the sum of the widths of the left and right parts, the right part is squeezed down
<style>
.wrap {
background: #eee;
overflow: hidden; <!-- 生成BFC，计算高度时考虑浮动的元素 -->
padding: 20px;
height: 200px;
}
.left {
width: 200px;
height: 200px;
float: left;
background: coral;
}
.right {
width: 120px;
height: 200px;
float: right;
background: lightblue;
}
.middle {
margin-left: 220px;
height: 200px;
background: lightpink;
margin-right: 140px;
}
</style>
<div class="wrap">
<div class="left">左侧</div>
<div class="right">右侧</div>
<div class="middle">中间</div>
</div>
Use absolute on both sides and margin in the middle
Three-column layout based on absolute positioning : Note that absolutely positioned elements break out of the document flow and are positioned relative to the nearest positioned ancestor element. Regardless of the order of the structures in the HTML.
- Use absolute positioning on the left and right, fixed on both sides.
- The middle occupies a full line,
marginleaving a gap between the pass and the left and right sides
<style>
.container {
position: relative;
}
.left,
.right,
.main {
height: 200px;
line-height: 200px;
text-align: center;
}
.left {
position: absolute;
top: 0;
left: 0;
width: 100px;
background: green;
}
.right {
position: absolute;
top: 0;
right: 0;
width: 100px;
background: green;
}
.main {
margin: 0 110px;
background: black;
color: white;
}
</style>
<div class="container">
<div class="left">左边固定宽度</div>
<div class="right">右边固定宽度</div>
<div class="main">中间自适应</div>
</div>
fleximplementation
- The container is set to
display:flex; - The elements in the box are aligned at both ends, and the middle element is set to
width:100%, or set toflex:1, to fill the blank - The height of the elements inside the box expands the height of the container
<style type="text/css">
.wrap {
display: flex;
justify-content: space-between;
}
.left,
.right,
.middle {
height: 100px;
}
.left {
width: 200px;
background: coral;
}
.right {
width: 120px;
background: lightblue;
}
.middle {
background: #555;
width: 100%;
margin: 0 20px;
}
</style>
<div class="wrap">
<div class="left">左侧</div>
<div class="middle">中间</div>
<div class="right">右侧</div>
</div>
Center Horizontally (6 Methods)
Centering with equal spacing on the left and right sides
flex
display: flex;justify-content: center;
<div class='parent'>
<div class="son">
</div>
</div>
.parent {
display: flex;
justify-content: center;
}
.son {
background: pink;
width: 100px;
height: 100px;
}
Absolute positioning + margin: auto
- center child element
- Son and father, child element
margin:auto
principle:
top + margin-top + border-top-width + padding-top + height + padding-bottom + border-bottom-width + margin-bottom + bottom = height In the above formula, top and bottom are 0, margin is equal to auto
, At this time, in order to satisfy this equation, the browser will evenly distribute the upper and lower distances to the margin, that is, to achieve the centering effect we want. The same is true for horizontal orientation.
.father {
position: relative;
width: 500px;
height: 500px;
background-color: blue;
}
.center {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 100px;
height: 100px;
background-color: red;
}
<div class='father'>
<div class="center">
</div>
</div>
Absolute positioning + margin: negative value
Principle: Set the position of the current element to absolute and position it relative to the parent element. First set left: 50%; top: 50%, so that the upper left corner of the current element is at the center of the parent element . Then apply the negative margin property so that the center is at the center of the parent element. Hence the need to know the size of the child elements. Move half the size of the child element.
.father {
position: relative;
width: 500px;
height: 500px;
background-color: blue;
}
.center {
width: 200px;
height: 100px;
background-color: red;
position: absolute;
left: 50%;
margin-left: -100px;
}
<div class='father'>
<div class="center">
</div>
</div>
If you want to be centered vertically, you need to add in center:
top: 50%;
margin-top: -50px;
Use negative margins to center elements
positioning+transform
- parent element: relative positioning
- Child elements: relative/absolute positioning is OK
- child element
left:50%, left border to the middle of the parent element - Child element
transform: translateX(-50%);, move half of itself to the left, so that its center is aligned with the center of the parent element - No need to know child element width
.father {
position: relative;
height: 500px;
width: 500px;
background-color: blue;
}
.center {
position: relative;
left: 50%;
width: 200px;
height: 200px;
background-color: red;
transform: translateX(-50%);
}
<div class='father'>
<div class="center">
</div>
</div>
text-align: center;
Specifies horizontal centering of element text. is an inline element .
text-align: center;
.parent {
text-align: center;
}
<div class='parent'>
<span>123</span>
</div>
margin: 0 auto;
margin: 0 auto;- If the width is fixed , if the width is not fixed, the width is
width:100% - block level element
<div class='box'>是块级元素居中，块级元素内的不居中，想让这行文字也居中要用text-align</div>
.box {
background: skyblue;
width: 200px;
height: 200px;
margin: 0 auto;
}
[Frontend] 6 Methods of CSS Horizontal Centering - karshey's Blog - CSDN Blog
Center Vertically (7 Methods)
line-height
- Applies to inline elements on a single line
- Set line-height equal to height
Absolute positioning + margin: auto
- childless father
- top, left, right, bottom are all 0
- margin: auto
flex
display:flexalign-content:center
Absolute positioning + margin: negative value
- childless father
- Child element top:50%: The upper edge is vertically centered in the parent element
- margin-top: half of the height of the child element (negative number): move the middle of the child element to the center of the parent element
positioning+transform
- parent element: relative positioning
- Child elements: relative/absolute positioning is OK
- child element
top:50%, left border to the middle of the parent element - Child element
transform: translateY(-50%);, move half of itself to the left, so that its center is aligned with the center of the parent element - No need to know child element height
vertical-align:middle
The vertical-align property sets the vertical alignment of an element. This property defines the vertical alignment of the baseline of an inline element relative to the baseline of the line in which the element resides.
Therefore, if I want the box to be vertically centered in the wrapper, I can add a div empty tag inside the wrapper div , set its height to 100%, set its width to 0 , then set it vertical-align:middle, and give the box a vertical-align:middlestyle, then the box can be vertically centered inside the div.
.wrapper {
width: 500px;
height: 500px;
background-color: pink;
}
.box {
width: 100px;
height: 100px;
background-color: deepskyblue;
display: inline-block;
vertical-align: middle;
}
.help {
width: 0;
height: 100%;
display: inline-block;
vertical-align: middle;
}
<div class="wrapper">
<div class="box"></div>
<div class="help"></div>
</div>
Use vertical-align:middle to vertically center - Short Book (jianshu.com)
display:table-cell
- The parent element setting of the element to be vertically centered
display:table-cellandvertical-align:middle - By default, images, buttons, text and cells can use the vertical-align property
- Realize vertical centering of single-line and multi-line text
body {
background: #ccc;
}
p {
display: table-cell;
vertical-align: middle;
background-color: pink;
width: 500px;
height: 200px;
}
<div>
<p>
hello world <br />
hello world <br />
hello world <br />
hello world
</p>
</div>
It can also be added display:table. For details, see: display:table-cell realizes horizontal and vertical centering - front-end soldiers - blog garden (cnblogs.com)
mind Mapping
