Interviewer: How many three-column layouts do you know?

Three column layout of six implementation methods

Every bit is small, but it is important to accumulate

When I cannot do without JS every day, I do not want to go back to look at the most basic CSS, so I decided to start from scratch, from the shallow to the deep, to review what started from the beginning, review the previous knowledge, deepen the image, and also set a habit of writing notes for myself. If there are any mistakes, please correct them.

Front-end engineers in their daily development process, the first step is the layout, whether it is a web site, or a background management system, most of us cannot leave a two-column layout, three column layout, wing layout, single row layout, line layout, and so on, each has a different layout implementation method, today let’s look at three column layout, three column layout is a very short answer, It is often asked at the beginning of an interview. It can be called a basic question. It is not difficult to implement it, but how many ways can you do it?

You have several ways to achieve a three-column layout (known height) with around 300px width in the middle and adaptive

Float layout

Floating layout is the most used layout at the beginning, and it is also the simplest to implement. Three boxes in the middle of the left and right, each with a width of 300px and float around.

<section class="layout">
    <article class="float">
        <div class="float_left"></div>
        <div class="float_right"></div>
        <div class="float_center">
            <h1>Use a floating implementation to solve the three-column layout</h1>
        </div>
    </article>
</section>
Copy the code

/* float */
.layout article div {
    min-height: 100px;
}
  
.float_left {
    float: left;
    width: 300px;
    background-color: yellowgreen;
}
  
.float_right {
    float: right;
    width: 300px;
    background-color: yellowgreen;
}
  
.float_center {
    background-color: tomato;
}
Copy the code

Position Position layout

Using an absolutely positioned layout is also a simple layout. Give the left and right widths to zero, and position the boxes in the middle at 300px each

<article class="position">
    <div class="position_left"></div>
    <div class="position_right"></div>
    <div class="position_center">
        <h1>Use the absolute positioning implementation to solve the three-column layout</h1>
    </div>
</article>
Copy the code

/* position Position layout */
.layout .position div {
    position: absolute;
    min-height: 100px;
}
  
.layout .position .position_left {
    left: 0;
    width: 300px;
    background-color: violet;
}
  
.layout .position .position_right {
    right: 0;
    width: 300px;
    background-color: violet;
}
  
.layout .position .position_center {
    right: 300px;
    left: 300px;
    background-color: yellow
}
Copy the code

The Flex – box layout

This is the most popular layout and the layout most people use at work. The way to achieve a three-column layout in Flex is very simple. Use display for the outer box: the box inside Flex is about 300px, and the middle flex is 1

<section class="layout">
        <article class="flex">
            <div class="flex_left"></div>
            <div class="flex_center">
                <h1>Use flexBox implementation to solve the three-column layout</h1>
            </div>
            <div class="flex_right"></div>
        </article>
    </section>
Copy the code

/* Flex position layout */
.layout .flex {
    display: flex;
    min-height: 100px;
}
  
.flex_left {
    width: 300px;
    background-color: tomato;
}
  
.flex_right {
    width: 300px;
    background-color: tomato;
}
  
.flex_center {
    flex: 1;
    background-color: violet;
}
Copy the code

The table layout

Table layout is an obsolete layout. To use table layout, we need to define the outer box display:table, and the inner box diplay:table-cell, and then give the left and right width respectively, and the middle can be adaptive. We will summarize why it is obsolete and its advantages and disadvantages later. Now let’s see how we do that, okay

<section class="layout">
    <article class="table">
        <div class="table_left"></div>
        <div class="table_center">
            <h1>Use the table implementation to solve the three-column layout</h1>
        </div>
        <div class="table_right"></div>
    </article>
</section>
Copy the code

/* table layout */
.layout .table {
    display: table;
    width: 100%;
    height: 100px;
}
  
.layout .table div {
    display: table-cell;
}
  
.table_left {
    width: 300px;
    background-color: violet;
}
  
.table_right {
    width: 300px;
    background: blue;
}
  
.table_center {
    background: turquoise;
}
Copy the code

The grid layout

As for the Grid layout, I wrote a previous article about it. The reason the Grid is not popular as a two-dimensional layout is that it is not as compatible as flex layout, and flex can do most layouts now. Personally, I think the grid layout as the next generation OF CSS3 layout standard, many places are very magical and forward-looking, if not support, can be put into use. In particular, the Electron project can completely use the Grid characteristics of CSS (personal advice can have a look at the first understanding, very magical, also very interesting), no nonsense, on the code

<section class="layout">
    <article class="grid">
        <div class="grid_left"></div>
        <div class="grid_center">
            <h1>Use the Grid implementation to solve the three-column layout</h1>
        </div>
        <div class="grid_right"></div>
    </article>
</section>
Copy the code

/* Grid layout */
.layout .grid {
    display: grid;
    grid-template-rows: 100px;
    grid-template-columns: 300px auto 300px;
}
  
.grid_left {
    background-color: #cf54cf;
}
  
.grid_right {
    background: #0202bb;
}
  
.grid_center {
    background: #0fdf43;
}
Copy the code

The actual effect

Analysis of the

Pros and cons of Float

Advantages simple, as one of the earliest layout methods, its compatibility is indisputable, and the layout is simple.

The disadvantages are also obvious. Float layouts need to be cleared of floats, because floats can fall out of the flow of the document and cause a height collapse, so you need to take that into account when using float.
Position Position layout

It’s quick, it’s easy to set up, it’s not a problem, you can come up with this layout pretty quickly.

The disadvantage is that the absolute location is out of the document flow, meaning that all of the following child elements are also out of the document flow, which leads to poor effectiveness and usability of this approach.
Flex layout

Felxbox layout is a new one in CSS3, it is to solve the shortcomings of the above two ways, is a more perfect one. The current mobile layout is also flexbox. Also a personal favorite layout

Disadvantages It is not compatible with Internet Explorer 8 or the following browsers.
Table layout

Advantages table layout is called the obsolete layout, including now should also be rarely used, including flex layout is not compatible with the case of table can also try, similar to this three-column layout, table implementation is also very simple, this thing I think see personal favorite, can meet the daily use of the use of it

The disadvantages of table layout are obvious, which is equivalent to other layouts. It is relatively cumbersome to use and has a large amount of code. At the same time, it also has defects.
The grid layout

Grid layout as a more advanced layout naturally has its unique charm, its layout way layout thinking can make your eyes a bright, there is a new idea.

Disadvantages The current compatibility is not up to the point of widespread promotion, there are bugs in Chrome Firefox and other browsers have not been fixed

extension

If you serious about this article, I believe that the three column layout is a basic have more understanding, learn the five kinds of writing is also in the layout provides a new thinking for himself, but this is not enough, we should think about is, the topic of the current is given a known height, if the height is also unknown, how to implement, if the fixed up and down, Middle adaptive, two-column layout, up and down and left and right mixed layout, these are all should learn, the basic layout everyone can, but if you want to go deep, I believe that you need to look carefully.

Here are some interesting but not commonly used CSS knowledge

Caret-color can change the cursor color. Try adding this attribute to the input
Shape-outside can change the shape of the box to change the layout.
Display: flow-root BFC clear float. The common float is clear:both overflower:hidden
Text-size-adjust Resolves the problem that the browser allows the minimum font size to be set to 12px
Margin: Auto is not new, but it is amazing when you use it with Flex: display:flex: all boxes maegin: Auto is equivalent to *justify-content*: space-around; *align-items*: center;
Justice-content *: Space-around This is a perfectly evenly split sub-box, which will come in handy in some scenarios
Flex-grow When the sum of flex-grow is less than 1, only part of the remaining space can be allocated proportionally, not all of it
The width of the input is not changed by post-block assignment, but by the value of size
Position Setting both left and right for absolute and fixed positioning is equivalent to implicitly setting the width
Position: Sticky sticky positioning, positioning at a certain height, for some DOM to reach the top of the window positioning is very convenient
Rgba When setting opacity background, background can be directly set rGBA equivalent to background + opacity
Transparent means transparent color equivalent to rgba(0,0,0,0). For example, when writing a triangle, set the transparent color of the three sides of the border to have a triangle
Text-indent. You can hide text with negative values. You can hide text with fong-size:0px
Background: Concic-gradient (Red 0 30%, Green 30% 60%, Blue 60% 100%) Can be used to draw pie charts with CSS
Background-attachment specifies how the background is attached to the container. It can be fixed and does not slide with the height of the window
Outline differs from border in that it does not hold space equivalent to overlay and does not increase the width and height of the box. It can be inside and outside.
Animation-delay delay loading of animation, which can achieve many crossover effects
A fixed width and height can be used to maintain proportion, as can a cintain
Cursor :not-allowed Sets the disabled state of the mouse. When button is in the disabled state, do not forget to add it
Sometimes it’s convenient to blur the background
Fill -available fill width,

Later can be added, all kinds of good and not commonly used CSS properties, if you have a question, welcome to correct

Interviewer: How many three-column layouts do you know?

Three column layout of six implementation methods

Analysis of the

extension

Related Posts

How does the Vue Router use params Query to pass parameters, and what is the difference

WebComponent+WebGl real-time image processing danmu player

Search box hidden animation implementation | August more text challenge