Preface
I have been looking at the CSS specification in the past few weeks, and I feel that I am really confused. That is to say, CSS is really simple, really, you say you are a JS giant, I worship, an HTML master, I respect, a CSS expert, uh, do you write a specification? Come out, let’s make a gesture, don’t blame me for not using martial arts Germany.
For CSS itself, it can really be strategically despised. As long as you have a logically reasonable and basically complete understanding of its knowledge system, all the problems are merely technical.
Of course, since the browser has the final say on how CSS works and how it behaves, it is impossible to obtain complete application knowledge from the perspective of CSS language alone. This is a later story, not for the time being. In this article, we mainly Let's talk about the knowledge of layout.
1 What are the layout modes of CSS?
Taking into account the (early) needs of web page layout, the "visual formatting model" is described in the CSS2 specification . In this model, each element on the document tree generates zero or more boxes based on the "box model" , and these boxes are typeset according to the following content:
- The dimension attributes (dimensions, that is, the width and height margins) and type (type, determined by the display attribute) of the box
- Position constraints (normal flow, floating, absolute positioning)
- The relationship of elements in the document tree (descendants, children, sibling, preceding)
- External information (such as viewport size, image dimensions, etc.)
In fact, this set of things is enough in theory, but you need to use various complexities to achieve certain effects.