Self-adaptive layout method based on BFC characteristics

Abstract

The invention discloses a self-adaptive layout method based on BFC characteristics, belongs to the field of data processing, and specifically comprises the following steps: realizing self-adaptive layout of pictures and texts; left and right two-column layout is realized; three-column self-adaption and classical holy grail layout is achieved, namely, the left side is fixed, the middle is enlargedand shrunk along with a page, and the right side is fixed; removing internal floating; more powerful and more intelligent multi-column adaptive layout is realized by utilizing the BFC characteristicsof blocky elements. According to the method, pure CSS control is adopted, the method is simpler and more universal, some responsive layouts can be controlled through JS, the webpage size is reduced byreducing DMO elements, the BFC achieves the effect by adding some styles capable of triggering the BFC to an existing layout DOM, and DOM elements are not newly added any more; the method is better in compatibility, and the BFC mainly utilizes the basic attributes of the box model, so that the BFC is compatible with all browsers.

Description

technical field [0001] The invention relates to the field of data processing, in particular to an adaptive layout method based on BFC characteristics. Background technique [0002] Layout is a very important part of web page CSS. The ultimate goal of layout is to build a complete page structure, and it is also an important part of page performance optimization, which will directly affect the user experience of the page. The Box box is the object and basic unit of CSS layout. To put it simply: a page is composed of many Box boxes. The type and display attribute of the element determine the type of the Box. Different types of Box will participate in different FormattingContext (a container that determines how to render the document), so the elements inside the Box will be rendered in different ways. Generally, there are two types of block-level book and inline-level box. In the early days, there were not many types of computer monitor resolutions, and web designers and de...

AI Technical Summary

Problems solved by technology

However, using the fluid properties of block elements to implement adaptive layout has obvious shortcomings, that is, you need to know the size of floating or absolutely positioned elements, and then the fluid content can have corresponding margin and padding, or border values ​​for position correction

However, there is no way to simply use a common class name (such as .clearfix) to achieve general adaptation of the whole site, because the blank space and the size of DOM elements are different in different scenarios

Images