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

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