preface
The last article introduced the CSS box model. The last article said that “A Web page is essentially a collection of ‘boxes’,” so this article will share with you how abstract boxes in CSS are arranged in web pages. That’s how THE CSS is laid out. As shown in the figure, the CSS layout can be divided into six modes: normal flow layout, floating layout, positioning layout, elastic box layout, grid layout, and multi-column layout.
- Stacking Context
- Stacking Level
- Stacking Order
- Formatting Context
Cascading related
In CSS, a very important feature is cascading. Layer has two meanings, one is the attribute layer, the other is the space layer. Cascading over attributes defines the algorithm for merging attribute values from multiple sources, while cascading over space is related to the arrangement of elements in a Web page. Here, we are focusing on the spatial layers.
Although the web page we see on the terminal device is a two-dimensional plane structure, in fact, in the CSS abstraction, all the elements exist in a three-dimensional space, in addition to the X and Y axis, there is a z axis perpendicular to the terminal display screen. Among them, the upper left corner of the screen is the origin of coordinates; The horizontal direction of the screen is the X-axis, and the right side is the positive direction; The vertical direction of the screen is the Y-axis, and the downward direction is positive; It’s perpendicular to the screen, and it points in the direction of the observer on the Z-axis. The rectangular coordinate system established according to the above rules is shown in the figure.
It is easy to imagine from the establishment of this coordinate system that the x and y axes form a two-dimensional plane, and this plane is obviously the plane on which the Web page is located. But what about the Z-axis, which is perpendicular to the plane of the Web page?What does it stand for?
This question leads us to the first concept:Cascading context
Stacking Context
Stacking Context is the positioning of HTML elements along a fictitious Z-axis relative to the user.
Obviously, this statement is rather abstract. To tell you the truth, the first time I saw such an abstract text, I was also confused. Then, I started to look at the blogs of all the bigwigs and found that different teachers had different ideas about the concept of cascading context. Among them, Teacher Zhang Xinxu’s description of cascading context is particularly interesting and easy to understand:
Think of [cascading context] as an official: There are many, many elements in the web that we can think of as people in the real world. In the real world, most of us are ordinary people, and some of us are officials. OK, the official here can be understood as a cascading context element in the web page.
To translate this into our common terminology, there is a hierarchy of elements in a web page. Most of these elements are at the relative “bottom” level, which is relatively far away from the user; However, there are a few specific elements that are closer to the user than most of the other elements on the page. Thus, most elements here are compared to the common people (far from the emperor); Those special elements are like being an official, closer to the emperor (user). Having said the big guy’s understanding, LET me say my own understanding. Cascading contexts, similar to layers in PhotoShop. Most of the elements are on the lower layer, but for some reason we created a new layer for some of the shapes (out of the original display layer), and placed the new layer in front of the original layer.
Stacking Level
The cascade level determines the z-axis order of elements in the same cascading context. If the cascading context is the cascading of HTML elements, then the cascading level is the parameter that determines where exactly the elements should go. What does that mean? According to the above layer context is compared to the example of ordinary people as officials, then the layer level can be compared to the rank of officials, a product, two products. Obviously, the higher the grade, the closer to the emperor. The higher the level of the stack, the closer the elements are to the observer as they are positioned relatively forward on the Z-axis. It looks like the cascading level is similar to the Z-index property.
z-index: sets the z-order for a location element and its descendants or Flex elements. When elements overlap, the larger z-index element overwrites the smaller one.
However, a cascade level and a Z-index are not the same thing, and they apply to different domains. The cascading level is relative to all the elements of the page, and the Z-index is relative to positioning elements and flexbox elements that are outside the normal document flow. The two of them do not mix.
Stacking Order
The last concept associated with cascading is the cascading order. It’s the order of the elements on the invisible z-axis. As shown in the figure, the order of the element boxes in the cascading order context is:
- Background /border
- Negative z – index values
- Block-level box
- The floating box
- Inline-box
- Z-index is an element with a value of 0
- Positive z – index value
Formatting Context
At the end of this article, let’s talk a little bit more about formatting context in CSS. A formatting context is a concept in the W3C CSS2.1 specification that represents a rendered area of a page and has a set of rendering rules that determine how its children will be positioned and interact with other elements. To tell you the truth, this passage made me dizzy. After reading it, I don’t understand exactly what formatting context is. After looking up the relevant documents, we found that the Formatting Context consists of Block Formatting Context (BFC) and Inline Formatting Context (IFC). They correspond to block boxes and inline boxes for CSS and models, respectively.
- In the block formatting context, boxes are placed vertically one after the other, starting at the top of the containing block. The vertical distance between the brother boxes is
marginAttribute. Vertical margins between adjacent block boxes in the same quick-formatting context are merged. - In the inline formatting context, boxes are placed horizontally from the top of the containing block. Horizontal margins between these boxes, borders, and inner margins are all valid. Boxes may be vertically aligned in different ways: to their bottom or top, or to the baseline of the text within them. A rectangular area containing boxes from the same row is called a row box.
From these specifications, you can see that the formatting context refers to the arrangement of normal stream text. In normal document flow, there are either block boxes or inline boxes. Therefore, rendering in the page only needs to follow the rendering specification of the corresponding box. In plain English, it’s just how the HTML elements are arranged in a Web page.
How is the BFC triggered
On this topic, the desert teacher’s arrangement is very detailed, HERE I do a porter:
- The root element or the element containing the root element
- Floating elements (elements whose float is not None)
- Absolute positioning element (element position is absolute or fixed)
- Inline block elements (elements with inline-block display)
- Table cell (the display of the element is table-cell, which is the default value for HTML table cells)
- Table title (display table caption, HTML table title default)
- Anonymous table cell elements (the display of the element is table, table-row, table-row-group, table-header-group, and table-footer-group (respectively are HTML) Default properties for table, Row, tbody, thead, tfoot) or inline-table)
- Block elements whose overflow value is not visible
- The display value is an element of flow-root
- Contain elements with layout, content, or strict values
- Elastic elements (display is a direct child of a Flex or inline-Flex element)
- Grid element (display is a direct child of a Grid or inline-Grid element)
- Multi-column container (elements with column-count or column-width not auto, including column-count 1)
- An element with column-span for all will always create a new BFC, even if the element is not wrapped in a multi-column container (standard change, Chrome bug).
There is something to be said about the BFC
The BFC concept is fairly abstract. To be honest, I’m just getting the general idea myself. To dig deeper, take a look at the blogs written by the bigwigs and delve into the technical documentation. We’re all just on the road.