There are many ways to achieve page layout, but I am used to using only one of my own more accustomed method, as long as there is not a compatibility problem generally will not use other methods, but also to know what some methods can be implemented, really forget I will use search to solve the problem quickly. Here’s how I combed through the various layouts.

Three column layout: left and right fixed width middle adaptive

Use the float property

Using the float property floats the left and right divs. The middle DIV doesn’t need to do anything else. It is placed directly between the two divs.

article{
    width: 100%;
    height: 200px;
    background-color: antiquewhite;
}
.left{
    float: left;
    width: 200px;
    height: 100%;
    background-color: aqua;
}
.right{
    float: right;
    width: 200px;
    height: 100%;
    background-color: aqua;
}
.center{
    height: 100%;
    background-color: blueviolet;
}
Copy the code
<article>
    <section class="left">left</section>
    <section class="right">right</section>
    <section class="center">center</section>
</article>
Copy the code

As shown in figure:

This method used to be used, but is now mostly unused. I’m not a big fan of the float property. Using float takes the element out of the document flow, and you can have other problems later if you don’t handle it well, and you have child elements that are out of the document flow, which isn’t very nice. But it has the advantage of being compatible.

And the other thing is, this is in the case of fixed height, so if it overflows or doesn’t go high, float will also have content offset and you’ll have to do something about that.

Use the absolute positioning method

The method of using absolute positioning is to set all three containers as absolute positioning. The left and right divs are absolutely positioned and of fixed width, and the middle distance is equal to the width of left and right.

.wrapper-1{
    position: relative;
    width: 100%;
    height: 200px;
    background-color: antiquewhite;
}
.wrapper-1 .left-1{
    position: absolute;
    left: 0;
    top: 0;
    width: 200px;
    height: 100%;
    background-color: aqua;
}
.wrapper-1 .right-1{
    position: absolute;
    right: 0;
    top: 0;
    width: 200px;
    height: 100%;
    background-color: aqua;
}
.wrapper-1 .center-1{
    position: absolute;
    left: 200px;
    right: 200px;
    height: 100%;
    background-color: blueviolet;
}
Copy the code
<article class="wrapper-1">
    <section class="left-1">left</section>
    <section class="center-1">center</section>
    <section class="right-1">right</section>
</article>
Copy the code

The advantage of the absolute location approach is still compatibility, but the separation from document flow is a problem. The absolute positioning method, in which all of the sub-elements below the layout are removed from the document flow, is not a good way to use the basic layout. Even if the float is cleared well, this method is not recommended.

Use grid layout

This may be a bit of a compatibility problem, but you can try to use it slowly. Currently, this method is not generally used on projects. But this method is really easy to use, just a few lines of code.

.wrapper-3{
    position: relative;
    display: grid;
    width: 100%;
    grid-template-rows: 100px;
    grid-template-columns: 200px auto 200px;
    background-color: antiquewhite;
    margin-top: 20px;
}
.wrapper-3 .left-3{
    height: 100%;
    background-color: aqua;
}
.wrapper-3 .right-3{
    height: 100%;
    background-color: aqua;
}
.wrapper-3 .center-3{
    height: 100%;
    background-color: blueviolet;
}
Copy the code
<article class="wrapper-3">
    <section class="left-3">
        left
    </section>
    <section class="center-3">
        center
    </section>
    <section class="right-3">
        right
    </section>
</article>
Copy the code

As shown in figure:

Using Flex layouts (common)

The Flex layout is basically what I use now, and it used to be that some devices didn’t support it, but today’s devices run flex almost without problem. His method is to set all divs to Flex, requiring a fixed width, and setting them to flex :1 if not required.

.wrapper-2{
    position: relative;
    display: flex;
    width: 100%;
    height: 200px;
    background-color: antiquewhite;
}
.wrapper-2 .left-2{
    width: 200px;
    height: 100%;
    background-color: aqua;
}
.wrapper-2 .right-2{
    width: 200px;
    height: 100%;
    background-color: aqua;
}
.wrapper-2 .center-2{
    flex: 1;
    height: 100%;
    background-color: blueviolet;
}
Copy the code
<article class="wrapper-2">
    <section class="flex left-2">
        left
    </section>
    <section class="flex center-2">
        center
    </section>
    <section class="flex right-2">
        right
    </section>
</article>
Copy the code

Today’s mobile devices are very suitable for this method. A year or two ago, some phones were incompatible, but now they are not. I remember making an H5 using Flex. Miraculously, all the phones were fine, except the iPhone 6 of the product manager responsible for this H5, which showed compatibility problems. I was also drunk, but now I basically ignore the very old devices.

Table layout

Its advantage is that compatibility is the best of the layout methods, but the writing method looks very old, and this method is outdated and can be ignored.

Three column layout: up and down fixed width middle adaptive

This kind of general use in mobile terminal is very much especially the top fixed content adaptive or content adaptive bottom fixed, the layout method and the above is very similar, but there are not places.

Layout using calc functions (common)

This method is easier, just subtract the height of the top and bottom, and is more compatible.

html.body {
    width: 100%;
    height: 100%;
}

.wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: antiquewhite;
}

.wrapper header {
    width: 100%;
    height: 200px;
    background-color: aqua;
}

.wrapper section {
    height: calc(100% - 400px);
    background-color: brown;
}

.wrapper footer {
    height: 200px;
    background-color: blueviolet;
}
Copy the code
<article class="wrapper">
    <header>At the top of the</header>
    <section>
        <div class="center">In the middle</div>
    </section>
    <footer class="footer">At the bottom of the</footer>
</article>
Copy the code

As shown in figure:

Using Flex layouts (common)

The Flex layout is similar to landscape, except that it is recommended to use min-height to avoid some problems with smaller models, which can be ignored for now.

html.body {
    width: 100%;
    height: 100%;
}

.wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: antiquewhite;
}

.wrapper header {
    width: 100%;
    min-height: 100px;
    background-color: aqua;
}

.wrapper section {
    width: 100%;
    min-height: 100px;
    flex: 1;
    background-color: rgb(70.67.67);
}

.wrapper footer {
    width: 100%;
    min-height: 100px;
    background-color: blueviolet;
}
Copy the code
<article class="wrapper">
    <header>At the top of the</header>
    <section>In the middle</section>
    <footer>At the bottom of the</footer>
</article>
Copy the code

As shown in figure:

Vertically centered layout

Center (height) using Position

I personally used this approach most of the time before USING Flex layouts.

.wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: antiquewhite;
}
.wrapper section{
    position:absolute;
    width: 100px;
    height: 100px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background-color: brown;
}
Copy the code
<article class="wrapper">
    <section></section>
</article>
Copy the code

As shown in figure:

Center with transform (variable height)

Variable height During a period of front-end interviews, that is a must-ask question in every meeting. But there are not many people asking this question now.

.wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: antiquewhite;
}
.wrapper section{
    position:absolute;
    top:50%;
    left:50%;
    width: 100px;
    height: 100px;
    transform:translate(-50%, -50%);
    background-color: brown;
}
Copy the code
<article class="wrapper">
    <section></section>
</article>
Copy the code

As shown in figure

Center with Flex (recommended)

Using Flex is by far the most convenient, with just a few lines of code and no need to worry about whether the box is high or not.

.wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: antiquewhite;
}
.wrapper section{
    width: 100px;
    height: 100px;
    background-color: brown;
}
Copy the code
<article class="wrapper">
    <section></section>
</article>
Copy the code

Let’s just say it’s perfect.In this middle paragraph, there are some methods in the middle that I’ve left out. There are other ways of doing things like vertical centring of variable height, but I don’t think it’s necessary to write it down like a dictionary, it’s not necessary at all, just use the most appropriate method, and then use a quick search if necessary.

So that’s sort of the layout of the page,