current position:Home>What is the essence of CSS layout

What is the essence of CSS layout

2021-08-23 10:03:46 Tong ouba

UI The history of

Since the advent of graphical interface operating system , The interface of the application will be drawn basically , This is also the interface for users to use the software , be called UI (user interface). It's about user experience 、 Design 、 Development of specific interface , Is the closest part of the software and the user , It is also the part with the most overlapping positions of multiple functions .

Depending on the operating system , There will be different ways of developing interfaces . Android 、ios、windows And so on have their own creation ui The library of , But the lower drawing library has standards : Cross platform mapping api Interface standards OpenGL as well as windows Under the DirectX.

Because each operating system draws ui In different ways , Therefore, cross platform rendering schemes are becoming more and more popular , Browser . The software architecture based on browser server is called B/S framework , Client based is called C/S framework .

Over a period of time ,B/S More and more applications of Architecture ,C/S The application of architecture is also more mixed B/S To achieve .

After the advent of the mobile Internet era , We found that the experience of web pages is not as good as that of native web pages , Although later developed PWA ( Progressive type WebApp) Technology , But there is still a gap from the original experience , Therefore, the original development and application scheme has the upper hand .

But Android 、ios Drawing interface 、 Writing logic in different ways , The two ends shall be realized separately , Development 、 The manpower of the test is double , This cost is relatively high . In order to save cost , We have found out the scheme of cross end engine , In other words, the logic of rendering and interaction is still written through web pages , But for rendering api By Android 、ios respectively , This enables cross end rendering , The logical part is also composed of JS To write , Some required equipment capabilities api By Android 、ios The implementation is then injected into JS In the engine .

And android 、ios Cross end solutions are becoming more and more popular , The desktop side also appears electron The plan , Render the interface and write logic through web pages , Needed api Injection into JS In the engine , and electron It's to put Node.js Of api Into JS In the engine , When implementing some native functions in the web page, you can directly use Node.js Of api, Besides, there are some api yes elctron Extra injected , Like the clipboard 、 Power monitor, etc .

Up to now ,UI The drawing scheme is gradually closer to the web page , be based on html、css、js Of web Technology has become the creation of UI The mainstream solution of the interface .

The physical and logical layers of web pages

Everyone has used it. canvas Of api You should know , If you draw directly, you need to specify what content to draw to where , Each part has to be calculated , And this is more cumbersome , So the browser provides some styles for layout , And it provides css To describe , The content part is through html describe .

Developers just need to use html Describe the structure of the content , And then use css To describe the layout and how to render , You can complete the drawing of the interface . Web pages will put html It can be interpreted as dom Trees , hold css It can be interpreted as cssom Trees , Then combine the two into render Trees , Automatically calculate what content is drawn to what location , Achieve the final rendering .

dom Yes, there is id、class、tagName And so on , The logical part is given to the concrete through these identifications dom Bind some event handlers , Then operate in the function dom To realize the interaction of the interface .

dom api Is the build that the final browser provides to developers web Application interface , Count as web The physical layer of the application .

Of course , Now develop web Applications are not directly based on dom api, Instead, you will choose a front-end framework , such as vue、react、angular etc. .

These frameworks implement the functions of components , That is, the logical splitting of the page , Put the same function html、css、js Come together , Make it reusable . And it provides mvvm The function of , Automatically make data to specific dom Mapping , Instead of requiring developers to manually operate dom.

The front-end framework does the same thing web Application logic layer , The final rendering and interaction is through dom api, But users don't need to operate directly , Instead, components and data are described at the logical level , The front-end framework completes the data transfer to dom Automatic mapping of .

The current cross end solutions are basically for the physical layer dom api Made a replacement , Then the upper layer interfaces with a front-end framework of the logic layer to support cross end application development .

css The two part

css Is the way the browser provides a description interface to developers , The description interface is divided into two parts :

  • Where is the content drawn
  • How to draw the content

Where the content is drawn is part of the layout , Mainly display and position The style of . How to draw the content is related to the specific content ,font、text、image And other contents have their own styles .

In this paper, we mainly explore css Make part of the layout .

The box model

First , All content will have some white space and spacing with other elements , therefore css The concept of box model is abstracted , That is, any block is made of content、padding( blank )、border、margin( spacing ) These parts constitute .


But there are also differences between boxes , Some boxes can be displayed on the same line , Others are exclusive , And the location of the content is calculated differently . So... Is provided display Style to set the box type , such as block、inline、inline-block、flex、table-cell、grid etc. , Set to different box types , Different calculation rules will be used .

  • block The element of will be exclusive to one line 、 You can set the width and height of the content , The specific calculation rule is called BFC.
  • inline The width and height of the element are supported by the content and cannot be set , Don't monopolize a line , The specific calculation rule is called IFC.
  • flex The child element of can automatically calculate the blank part , from flex The style specifies the allocation scale , The specific calculation rule is called FFC.
  • grid The child element of can be split into multiple rows and columns to calculate the position , The specific calculation rules are called GFC.

These are the layout calculation rules of different box types .


According to the layout calculation rules of different box types, it is often not enough , Some user-defined layout rules are required in many scenarios , therefore css Provides position style , Include static、relative、absolute、fixed、sticky.


The default box positioning method is static, That is, streaming , The last box shows where , The next box continues to calculate the position below , Where is displayed depends on how much content .

In the beginning, web pages were mainly used to display some text , Therefore, the location calculation rules of flow are very convenient .


The flow rule is to automatically calculate the position of the next box according to the position of the previous box , But sometimes I want to do some offset , This can be done through relative To specify the , Set up position by relative, And then through top、bottom、left、right To specify how to offset .

Relative layout adds some flexibility to streaming layout , You can do some offsets based on the flow calculation rules .


The specific content and location of flow calculation rules are not fixed , Only suitable for text 、 Layout of pictures and other contents . But for example, some panels need to be fixed , It's in a position... Don't move , You can go through position Set to absolute, You can leave the document stream . At this time, according to the previous non streaming position To calculate the present position.


absolute It is based on the last one separated from the document flow position To calculate the position of , The outermost absolute The element is located according to the window . If you want to locate directly according to the window, you can specify position by fixed. At this time top、bottom、left、right Is relative to the window .


sticky If the effect exceeds a certain height when scrolling fixed In one place , Otherwise, it would be static. Equivalent to static and fixed Make a layer of packaging , To achieve the ceiling effect of the navigation bar, you can directly use .

Maybe it's because it's too common , To encapsulate such a position Property value of , It was through js Monitor the position of the scroll bar to set static and fixed Of .


The so-called layout is to determine the location of elements , Set the type of box (display) After that, there will be different rules for how to render the content , such as BFC、IFC、FFC、GFC etc. .

By default, flow mode is used between boxes , That is to say position by static, But sometimes I want to make an offset in the stream , use relative. When you don't want to follow the document flow , You can set absolute Relative to the last non static Position to calculate a fixed position , If you want to be directly relative to the window , Just use fixed.

When you need to do the ceiling effect , To switch according to the scroll position static and fixed, Now css One more sticky The positioning method can be directly used .

in other words , The layout calculation rules inside the box are based on display To make sure , You can also use position Make some adjustments .

vscode How is it laid out

Talked about it. css Layout method ( That is to say display coordination position) after , Let's look at a specific case :vscode How is it laid out .

vscode It's what we often use ide, It's based on electron, That is to draw the interface through web pages , So how is it laid out ?

vscode Divided into title blocks 、 status bar 、 Content area , It's an upper, middle and lower structure , The content area is divided into activity bar 、 Sidebar 、 Editing area , It's a left center right structure . The window can be resized , The structure of upper, middle and lower nested left, middle and right is unchanged .

How does this layout work ?

css The layout is display coordination position To determine the location of each piece of content . Our requirement is to zoom the window, but the relative position of each block remains the same , This kind of use absolute The layout can be realized .

First , The outermost layer is the upper, middle and lower structure , You can set each block to absolute, And then set the top value , Then the middle part is divided into left, middle and right , You can set the left, middle and right parts respectively left value , This completes the layout of each block .

This is the overall layout , The interior of each block uses streaming according to different layout requirements 、 Elastic and other different boxes , Absolute fit 、 Relatively equal positioning method to layout .

however , Absolute positioning is to specify specific top、bottom、left、right value , Is static , When the window size changes, you need to dynamically set specific values . At this time, you need to monitor the window resize Events to rearrange , Calculate the positions of different blocks respectively .

and vscode The size of each block can be changed by dragging , Also recalculate when dragging left、top Value .


Modern software basically has a user interface , And build under different operating systems UI In different ways , Therefore, the browser scheme of cross platform rendering is becoming more and more popular . After the mobile Internet era , In order to integrate the native experience and the cross platform of web pages , There is a cross end engine solution , That is, based on Android 、ios respectively dom api And inject some equipment capabilities api to JS engine , Business code through dom api To describe UI.

dom api Is the description provided by the browser to the developer UI The way , It's the physical layer . The current front-end framework can complete the encapsulation of components and data to dom Mapping , No direct operation is required dom, It's a logical layer .

Because the cross end engine implements dom api, Therefore, the upper layer can be connected to the front-end frame .

UI It's through css To describe the , and css It can be divided into two parts : Layout and rendering of concrete elements .

Specifically font、text、image There are different styles to describe how to render , The layout is to determine the location of each element , from display coordination position To make sure .

Every content of the web page is a box , from content、padding、border、margin constitute , and display Is the type of setting box , Different boxes have different layout rules , such as BFC、IFC、FFC、GFC etc. .

When there are some layout rules that need to be customized , have access to position. default position yes static, That is, streaming , Determine the position of the next box according to the previous box , have access to relative Do some offsets , If you want to be fixed relative to a certain position , have access to absolute, Use... When directly facing the window fixed. Besides , When doing the ceiling effect , have access to sticky, It is based on static and fixed Encapsulation .

got it display and position How to do the layout , That is, after calculating the position of the box , Let's have a look at vscode How it's laid out .

vscode It is a structure of upper, middle and lower nested left, middle and right , The size of each block can be adjusted by changing or dragging the window , So use nested absolute The way to do the overall layout . The interior of each block uses a combination of flow 、 Elasticity, etc position Make a more detailed layout .

css The essence of layout is to calculate the position of elements . Web page css Layout schemes have been applied in more and more fields , For example, cross end engine through Android 、ios Realization css,kraken be based on flutter Realization css, therefore css The layout is a skill we must master . I hope this article can help you sort out css The idea of layout , Be able to analyze the characteristics of various layouts , Then use the appropriate scheme to realize .

Recommended reading :

Get some new books of sister Xuan's architecture and send them ~

official account : Front end canteen

You know : Tong ouba

Nuggets : Tong ouba

This is a lifelong learning man , He's sticking to what he loves , Welcome to the front end canteen , Get fat with this man ~

“ If you think you can gain from reading this article, you can click here and let me see . Any questions during reading 、 Thoughts or feelings are also welcome to leave a message below , You can also reply to the communication group of the canteen in the background . Communication creates value , Sharing brings happiness . You are also welcome to share with the students in need , Altruism is the best self-interest . ”

This article is from WeChat official account. - Front end canteen (webcanteen)

The source and reprint of the original text are detailed in the text , If there is any infringement , Please contact the [email protected] Delete .

Original publication time : 2021-08-06

Participation of this paper Tencent cloud media sharing plan , You are welcome to join us , share .

copyright notice
author[Tong ouba],Please bring the original link to reprint, thank you.

Random recommended