Welcome to visit personal blog website: www.zhuxin.club
Formatting context
Boxes are the object and basic unit of CSS layout. In plain English, a page is composed of several boxes. The element type and display attribute determine the type of the Box. Different types of boxes are involved in Formatting the Context (a container that decides how to render the document), so elements inside the Box are rendered in different ways.
Formatting context is a concept in the W3C CSS2.1 specification. It is a rendering area of the page with a set of rendering rules that determine how its children will be positioned and how they will interact with other elements.
There are four main types of formatting contexts in the CSS3 specification published so far:
Block FOMatting Context (BFC)
Inline formatting Context (IFC)
Flexible Formatting Contex (FFC)
Grids Formatting Context(GFC)
1. BFC
Block formatting context (BFC). It is a separate rendering area, with only block-level boxes (display: Block, list-item, table elements) participating. It specifies how the internal block-level box is laid out, and has nothing to do with the outside of the area.
If an element has A BFC, the internal child elements will not be affected by the changes in the external element. This is the core characteristic of the BFC
1.1 Features of BFC Rules
- The boxes inside the BFC are placed vertically, one after the other.
- The vertical distance of the Box is determined by margin. The margins of two adjacent boxes within the same BFC will overlap, but there will be no margin overlap between different BFC
- The left side of the margin box of each element touches the left side of the border box containing the block (for left-to-right formatting, otherwise the opposite). This is true even if there is a float.
- The region of the BFC does not overlap with the float box.
- A BFC is a separate container on a page, and the child elements inside the container do not affect the outside elements. And vice versa.
- When calculating the height of the BFC, floating elements are also involved
1.2 Method of Creating a BFC
- HTML root element;
- The value of float is not None;
- Overflow is not visible;
- Display: table-cell, table-caption, inline-block,flex, inline-flex,grid,inline-grid;
- The value of position cannot be relative or static.
1.3 BFC Application Scenarios
(1) Avoid vertical margin overlap
Margin-top and margin-bottom between block-level elements sometimes appear the phenomenon of margin merging, as shown in the following example:
<style>
p {
color: #f55;
background: #fcc;
width: 200px;
line-height: 100px;
text-align:center;
margin: 100px;
}
</style>
<body>
<p>Haha</p>
<p>Hehe</p>
</body>
Copy the code
<style>
.wrap {
overflow: hidden;
}
p {
color: #f55;
background: #fcc;
width: 200px;
line-height: 100px;
text-align:center;
margin: 100px;
}
</style>
<body>
<p>Haha</p>
<div class="wrap">
<p>Hehe</p>
</div>
</body>
Copy the code
(2) Create an adaptive two-column layout
<style>
body {
width: 300px;
position: relative;
}
.aside {
width: 100px;
height: 150px;
float: left;
background: #f66;
}
.main {
height: 200px;
background: #fcc;
}
</style>
<body>
<div class="aside"></div>
<div class="main"></div>
</body>
Copy the codeBecause float is separated from the.main and aside elements of the document flow, there is some overlap. Since the BFC does not overlap with float boxes and is to the left of each element’s margin box, it touches the left of the border box that contains the block (for left-to-right formatting, otherwise the opposite). Even if there is a float it is such a regular feature that we make.main a BFC:
.main {
overflow: hidden;
}
Copy the code
(3) Clear floating (solve the problem of height collapse)
<style>
.par {
border: 5px solid #fcc;
width: 300px;
}
.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>
Copy the code
Since the height of the BFC is calculated, the floating element is also involved. Therefore, creating a BFC can achieve the effect of clearing the float and avoiding the height collapse of the parent element
.par {
overflow: hidden;
}
Copy the code
2. IFC
IFC Inline Formatting Context
IFC layout rules:
- In an inline formatting context, boxes are placed horizontally one after the other
- Horizontal margin, border, and padding between these boxes are all valid
- Boxes may be vertically aligned in different ways: with their bottom or top, or with the baseline of the text inside them
- There is a default gap between the block-level elements in the line
- The rectangle contains boxes from a row called a line box. The width of the line box is determined by the float and its containing block, and the height is determined by the calculation of line-height
3. FFC
FFC Flexible Formatting Context Flexible Formatting Context
CSS3 introduces a new layout model, the Flex layout.
Flex stands for Flexible Box, commonly known as flexible box model. Unlike other CSS3 properties, Flexbox is not a single property, but a module that contains multiple CSS3 properties. Flex layouts provide a more efficient way to layout items within containers to accommodate all types of display devices and screens of all sizes. Using Flexbox layouts essentially declares the creation of FFC(Adaptive Format Context)
4. GFC
Grid Formatting Context
Grids, a new layout model introduced by CSS3, is currently not widely used and has low frequency, so it is easy to understand.
A Grid layout is similar to a Flex layout in that it can specify the location of multiple items within a container. But there are also important differences.
Flex layout is an axis layout and can only specify the position of “items” against the axis, which can be considered as a one-dimensional layout. A Grid layout divides the container into “rows” and “columns”, generates cells, and then specifies the cells “where the project resides”, which can be thought of as a two-dimensional layout. The Grid layout is far more powerful than the Flex layout.