This paper mainly introduces the implementation of the front-end layout scheme and the existing problems, involving the layout scheme includes:
- Fluid layout
- Float layout
- The table layout
- Locate the layout
- Flex layout
- Responsive layout
- The grid layout
Front-end layout from the beginning: Table layout => DIV+CSS layout => Flex layout => Grid layout has experienced a series of changes above, these changes are accompanied by the development of front-end technology and the program ape on the convenience of the pursuit of layout scheme, the final result is to let our web design becomes more and more convenient, fast, efficient, The web we see is increasingly diverse and personal. It has been twenty years since the birth of the Internet, so let’s look at how the front-end layout has grown step by step from the development of the Internet. First, let’s look at the evolution of the Web:In 1991, the web 
When Tim Berners-Lee and others invented the Web in 1990, it was really more like a giant file access system, and the web was just plain text, but over time, plain text was considered ugly, So he’s ready to dress up the web, which is only a few years old, in other languages. The language that was finally adopted was the style Grammar proposed by Hakon Wium in October 1994. It’s called a cascading style list, or CSS for short. At the time CSS was used more to decorate web pages than to lay them out. At this point the layout scheme is mainly: fluid layout
Fluid layout
Fluid layout is a normal layout flow, so what is a normal layout flow? Think of our layout page as an inverted square fish tank (HTML). When you add water (DIV), the water will fill the entire horizontal plane, and when you add water again, the water will fill the entire horizontal plane. If the tank becomes wider and narrower (assuming the tank is flexible), The water also widens, Narrows and spreads across the entire width of the tank. This is the fluid layout. The DIV mentioned above is a block tag in HTML, which is actually a box model, composed as follows:
In this image, the remaining width of the parent element is 200px, and the left and right margin is auto, so that the left and right are evenly divided. The remaining width of the parent element is 100px, so that the element is horizontally centered. We can also use margin to achieve vertical horizontal center, as follows:
Margin merge type:
- The adjacent elements
- Father and son elements
- Empty elements
Schematic diagram of adjacent elements:
Schematic diagram of empty elements:
Solution: parent trigger landing (grade block formatting context) not to tangle of landing the words explanation, just need to know the impact of landing a function is used to isolate elements, trigger, after landing the container element how casually thread will not affect the outside elements, elements outside how casually change will not affect the container element. It’s like adding a partition. BFC trigger mode:
- Body element
- Float to none
- Display: flex/inline – flex
- Position: Absolute, fixed, and table-cells
- Overflow values other than visible
———— Fluid layout complete —————-
Float layout
Float layouts were originally designed to wrap text around images, but float layouts have become popular for structural layouts. Implementation code:
Float: right/leftCopy the codeFloating elements float out of the document flow (above the normal document flow), and the text behind the floating element wraps around the image, but is not overwritten. This layout is simple, but the downside is that it affects subsequent elements, so we need to clear the float. Clear float:
Clear: left/right/bothCopy the codeBut do you really understand how Clear works? Take a look at the following clear float does it look the same as you thought it would?
The table layout
Fast forward to 1997, and there was a guy named David Siegel who creatively changed the way the Web was laid out, but at the same time “destroyed” the way the web was laid out: the table layout.
Table layout (HTML implementation) 
position: static/relative/absolute/fixed/sticky
static: Element default value, normal layoutrelativeThe left/right/top/bottom attribute is valid relative to its position in the document flow and does not leave the document flowabsolute: Relative to the first nonstaticThe left/right/top/bottom attributes are in effect, leaving the document flowfixed: The left/right/top/bottom attributes are valid relative to the window, leaving the document flowsticky: is the combination of "relative" and "fixed".//www.runoob.com/try/try.php?filename=trycss_position_sticky)
Copy the codeWith location layout, we can achieve all kinds of layout as long as we use it properly, but I want to ask a question here. When absolute positioning, left, right, or top, bottom exist at the same time, who should listen to? If you don’t know the answer, look at the picture:
Flex layout
Flex stands for Flexible Box, which I personally find a bit like an abacus:
.father {
height: 100px;
width: 800px;
display: flex;
background: gainsboro;
}
.child1,
.child2,
.child3,
.child4 {
height: 100px;
}
.child1 {
width: 50px;
background: tan;
}
.child2 {
flex-basis: 100px;
flex-grow: 1;
background: teal;
}
.child3 {
flex-basis: 150px;
flex-grow: 3;
background: thistle;
}
.child4 {
flex-basis: 200px;
flex-grow: 6;
background: tomato;
}
Copy the code
Responsive layout
Responsive layouts are essentially the same Web page that can be rendered perfectly on different devices (phone, tablet, PC). Why reactive layouts? The reason is that the web used to be tailored to the width of a computer (before smartphones, Ethan Marcotte proposed a responsive layout in 2010), and each type of computer could fit perfectly with a single web page, but with the development of smartphones, each phone came in different sizes. Making a Web page for every cell phone size would be too expensive. Wouldn’t it be nice if one page could fit all display devices? This is a responsive layout implementation:
Add the following meta tags to the HTML head to make the page width equal to the device width, with the original zoom ratio of1
<meta name="viewport" content="width=device-width, initial-scale=1" />
Copy the codeIn layout, we also need to pay attention to the following issues:
- Use relative units (%, Vh, VW, REM, em)
- Max-width: 100%, srcset
- Flow layout (Float, Flex)
- Media Enquiries (@media)
As long as you write your HTML and CSS code in this way, your web pages will be responsive. I have written a simple responsive demo for your reference. ———— Responsive layout complete —————-
The Grid layout
Grid layout is a new CSS layout model. It is currently the only 2D CSS layout, and I personally think it is the future of CSS layout (if compatibility is ok). I could write a new article about grid if I talked about it in detail, because it’s too much, andA great godI’ve made that very clear. I just want to give an example of how powerful a Grid layout can be.
display: grid;
grid-template-columns: 100px 100px 100px // Create three columns, each 100px wide
grid-template-rows: 100px 100px; // Create two rows, each 100px wide
Copy the codeThe above code creates a two-dimensional layout of two rows and three columns, which looks like this:
conclusion
Here we introduce several common ways of Web layout from the development of the Internet. Each way has its advantages and disadvantages, and each way also has its historical significance. We may not use or recommend some layouts any more because of better layouts (such as semantic layout). Some of the layouts I’ve introduced today may be a product of the past, but it’s enough that they’ve lived their lives. I hope that after reading this article, you will have a clear understanding of how the Web should be laid out, and will be pleased to know what works best when it comes to layout and where the holes are.
Due to my limited level, it is inevitable to make mistakes in the process of writing. Please help me to point out that part of the pictures used in the article are found on the Internet. If there is infringement, please contact me.