@[TOC]About front-end layout
The layout of the front-end can be divided into traditional layout and new layout according to the complexity of the writing process;
- Traditional layout
The so-called traditional layout does not depend on the framework. It is mainly a native layout written by programmers based on the use of CSS and HTML style attributes, such as display, position, float, etc.
This layout method requires a high level of basic knowledge for programmers, who must be able to use specific style attributes, and understand the precautions for its use or debug the impact on the layout later. However, the biggest advantage of the traditional layout method is its good compatibility, and it is also very compatible with IE6 and IE7 browsers.
- The new layout of the modern layout
is a solution to some problems left in the traditional layout. It can be said to be an optimization solution. Its representatives are flex layout, adaptive layout (adaptation), Grid layout, and the popular ones behind it. Responsive layout (BootStrap). Their biggest feature is their "intelligence". The position and size of page components will be dynamically adjusted according to the size of the browser's display area. These are developed by some major computer manufacturers to improve the simplicity of the layout.
If the interviewer asks which layout you will use, of course you can’t say which one is popular. If you say that you will choose according to the actual needs of project development, and mention that you also have a certain understanding of the current popular layout methods, then you The answer is basically full marks.
There are many layout methods, but I think that to learn something, you must understand its ins and outs. Although the market is not so enthusiastic about traditional layout methods, only when you understand its underlying principles can you use new things better, so I am writing When it comes to layout, I will rank the "flow layout" based on basic knowledge points first, and I will still explain other new layouts in detail later.
Basic concepts about "flow"
The so-called "flow" is believed to be a concept mentioned in many front-end books-"document flow". In practice, "document flow" is like water flow, water is a liquid that can automatically fill the bottom of a container, regardless of the size of the container, it can cover the bottom. And "document flow" is a general term for some block elements with "flow characteristics". By default, these block elements will automatically cover the entire browser line, which is not enough for automatic line wrapping.
Before understanding the "flow" feature, it is necessary to have a certain understanding of "block element", "box model", BFC, "containing block", and "stacking context". Let's briefly review these basic concepts:
-
Block element:
an element that can occupy one line by default in the browser. For a block element, it has fluidity only when its width:auto is set. Once the width is set to a specific value, its fluidity will disappear.
-
Box model
For every front-end person, the understanding of the box model should be familiar, and each element can be regarded as a box model. Each box model is composed of: content-box/padding-box/border-box/margin-box.
For a box model, familiarity with its content-box and border-box features is of great help in setting the size of elements during layout positioning.
It is worth noting that for IE browsers, the box-sizing property of a box is only available in CSS3, and it will only take effect in IE8 and above, and IE8 also needs to add the prefix -ms-, which is no longer needed in IE9 prefixed.
The difference between content-box and border-box:
For box-sizing: content-box; width: 100px; its width is the width of the box inside, and border-box is the width of the gray box including the outside.
- BFC
BFC (Block Fromatting Context): block-level context; in fact, it has a brother called IFC (Inline Fromatting Context): inline context, but IFC has a subtle impact on page layout and has little impact on elements. So little attention has been paid to it.
The official explanation of W3C is: BFC determines how elements are positioned, as well as the relationship and interaction of other elements. Prescribe layout; in other words, modularize page elements.
The CSS elements that trigger BFC are:
overflow:hidden;
display:inline-block;
position:flexd
position:absolute
display:table-cell display
:flex
When a non-block element is set to a BFC, it becomes a block-level element and has a block The properties of the element. - Containing block
What is a containing block, the size and position of an element are often affected by its containing block. The determination of the containing block is completely dependent on the position attribute of the element:
1. If the position attribute of the element is static, relative, sticky, the containing block is composed of the content-box edge of its nearest ancestor block element.
2. If the element's position attribute is absolute, the containing block consists of the padding-box edges of its nearest ancestor element whose position attribute value is not static.
3. If the position attribute of the element is fixed, the containing block is the viewport in the case of continuous media, and the containing block is the paging area in the case of paged media.
4. If the position attribute is absolute or fixed, the containing block may also be composed of the padding-box edge of the nearest parent element that meets the following conditions: (1) The value of transform
or perspective is not none;
(2) The value of will-change It is transform or perspective
(3) The value of filter is not none or the value of will-change is filter (only effective under firefox)
(4) The value of contain is paint;
it is worth noting that: the containing block where the root element is located is a called The rectangle that is the initial containing block. It's the size of viewport or page media. - Cascading context
For the cascading context, it is mainly the setting of the z-index attribute. By default, the value of z-index will be auto/0. If there is a value, it depends on the size of the value.
The use of "flow" layout
After understanding some basic characteristics of the above elements, the application of "flow layout" can begin.
If you want elements to show flow characteristics along with the browser's visual interface, you can not set the exact value of the width or height of the parent element, and let it dynamically add child elements, such as the most common "waterfall" in some shopping websites. "Flow" product information does not set the height of its parent element, its child elements increase infinitely, and the parent element can also contain it.
The most commonly used method in "flow layout" is the combination of positioning attributes and margin. In a module, set the positioning attribute of the target element to absolute, then according to the characteristics of absolute positioning, setting the margin value for it will be relative to the parent element. Offset margin:auto in the upper left corner of the element will automatically divide the remaining space equally.
For layouts with uncertain heights, the parent element generally does not set the height, even height:auto/0 does not need to be written, the child elements in the parent element are positioned in a floating layout, and finally the parent element can be cleared to float;
The last and most important point is that the flow layout, my personal understanding is to modularize the element components of the web page, turning each element into a module, if it is an inline element, it should be in its outer layer
The writing of the article may be a little superficial due to the author's experience. Everyone is welcome to criticize and correct.