What are the common layouts in CSS? Introduction to 5 common layouts

What this article brings to you is what are the common layouts in CSS? An introduction to 5 common layouts. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

This article will introduce the following 5 common layouts:

• Single column layout

• Two columns Adaptive layout

• Shengfei layout and double-flying wing layout

• Pseudo-contour layout

• Glue layout

1. Single column layout

# #1. Common single-column layout:

• Single-column layout with equal width of header, content and footer

• header and A single-column layout with equal footer width and slightly narrower content

2. How to implement

For the first type, first By uniformly setting width: 1000px for header, content, and footer; or max-width: 1000px (the difference between the two is that when the screen is smaller than 1000px, the former will have a scroll bar, while the latter will not, and the actual width will be displayed); Then set margin:auto to achieve centering.

<p></p>
<p></p>
<p></p>

.header{
    margin:0 auto; 
    max-width: 960px;
    height:100px;
    background-color: blue;
}
.content{
    margin: 0 auto;
    max-width: 960px;
    height: 400px;
    background-color: aquamarine;
}
.footer{
    margin: 0 auto;
    max-width: 960px;
    height: 100px;
    background-color: aqua;
}

For the second type, the content width of the header and footer is not set, and the block-level elements fill the entire screen, but the content areas of the header, content, and footer are set to the same width, and centered through margin:auto.

<p>
    </p><p></p>

<p></p>
<p></p>

.header{
    margin:0 auto;
    max-width: 960px;
    height:100px;
    background-color: blue;
}
.nav{
    margin: 0 auto;
    max-width: 800px;
    background-color: darkgray;
    height: 50px;
}
.content{
    margin: 0 auto;
    max-width: 800px;
    height: 400px;
    background-color: aquamarine;
}
.footer{
    margin: 0 auto;
    max-width: 960px;
    height: 100px;
    background-color: aqua;
}

2. Two-column adaptive layout

Two-column adaptive layout means that one column is stretched by the content and the other column is filled with the remaining content. Width layout method

1.float overflow:hidden

If it is an ordinary two-column layout,

float the margin of ordinary elements can be implemented, but if it is an adaptive two-column layout, it can be implemented using float overflow:hidden. This method mainly triggers BFC through overflow, and BFC will not overlap floating elements. Since setting overflow:hidden will not trigger the haslayout attribute of IE6-browser, zoom:1 needs to be set to be compatible with IE6-browser. The specific code is as follows:

<p>
    </p><p>
        </p><p>left</p>
    
    <p>
        </p><p>right</p>
        <p>right</p>
            

.parent {
  overflow: hidden;
  zoom: 1;
}
.left {
  float: left;
  margin-right: 20px;
}
.right {
  overflow: hidden;
  zoom: 1;
}

Note: If the sidebar is on the right, pay attention to the rendering order. That is, in HTML, write the sidebar first and then the main content

2. Flex layout

Flex layout, also called flexible box layout , you can realize the layout of various pages with just a few lines of code.

//html部分同上
.parent {
  display:flex;
}  
.right {
  margin-left:20px; 
  flex:1;
}

3.grid layout

Grid layout is a two-dimensional grid-based layout system designed to optimize the user interface design.

//html部分同上
.parent {
  display:grid;
  grid-template-columns:auto 1fr;
  grid-gap:20px
}

Three-column layout

Features: adaptive width of the middle column, fixed width on both sides, There are many ways to implement a three-column layout (you can click on several methods to achieve a three-column layout). This article focuses on the Holy Grail layout and the double-wing layout.

1. Holy Grail Layout

① Features

A special three-column layout, the same It is also fixed width on both sides and adaptive in the middle. The only difference is that the DOM structure must be written first in the middle column, so that the middle column can be loaded first.

  .container {
    padding-left: 220px;//为左右栏腾出空间
    padding-right: 220px;
  }
  .left {
    float: left;
    width: 200px;
    height: 400px;
    background: red;
    margin-left: -100%;
    position: relative;
    left: -220px;
  }
  .center {
    float: left;
    width: 100%;
    height: 500px;
    background: yellow;
  }
  .right {
    float: left;
    width: 200px;
    height: 400px;
    background: blue;
    margin-left: -200px;
    position: relative;
    right: -220px;
  }

  <article>
    <p>
      </p>
<p>圣杯布局</p>
    
    <p></p>
    <p></p>
  </article>

② Implementation steps

• All three parts are set to left floating,

  Otherwise the content on the left and right sides cannot be uploaded, so It is impossible to on the same row as the middle column. Then set the width of the center to 100% (realize adaptive content of the middle column). At this time, the left and right parts will jump to the next line

• By setting margin-left to a negative value, the left and right parts return to the same line as the center part

• By setting the padding-left and padding-right of the parent container, leave a gap on the left and right sides.

• By setting relative positioning, move the left and right parts to both sides.

③ Disadvantages

• The minimum width of the center part cannot be smaller than the left part width, otherwise the left part will fall to the next line

• 如果其中一列内容高度拉长(如下图)，其他两列的背景并不会自动填充。(借助伪等高布局可解决)

④ 伪等高布局

等高布局是指子元素在父元素中高度相等的布局方式。等高布局的实现包括伪等高和真等高,伪等高只是看上去等高而已,真等高是实实在在的等高。

此处我们通过伪等布局便可解决圣杯布局的第二点缺点，因为背景是在padding区域显示的，设置一个大数值的padding-bottom，再设置相同数值的负的margin-bottom，并在所有列外面加上一个容器，并设置overflow:hidden把溢出背景切掉。这种可能实现多列等高布局，并且也能实现列与列之间分隔线效果，结构简单，兼容所有浏览器。新增代码如下：

      .center,
      .left,
      .right {
        padding-bottom: 10000px;
        margin-bottom: -10000px;
      }
      .container {
        padding-left: 220px;
        padding-right: 220px;
        overflow: hidden;//把溢出背景切掉
      }

2.双飞翼布局

① 特点

同样也是三栏布局，在圣杯布局基础上进一步优化，解决了圣杯布局错乱问题，实现了内容与布局的分离。而且任何一栏都可以是最高栏，不会出问题。

    .container {
        min-width: 600px;//确保中间内容可以显示出来，两倍left宽+right宽
    }
    .left {
        float: left;
        width: 200px;
        height: 400px;
        background: red;
        margin-left: -100%;
    }
    .center {
        float: left;
        width: 100%;
        height: 500px;
        background: yellow;
    }
    .center .inner {
        margin: 0 200px; //新增部分
    }
    .right {
        float: left;
        width: 200px;
        height: 400px;
        background: blue;
        margin-left: -200px;
    }

    <article>
        <p>
            </p>
<p>双飞翼布局</p>
        
        <p></p>
        <p></p>
    </article>

② 实现步骤(前两步与圣杯布局一样)

• 三个部分都设定为左浮动，然后设置center的宽度为100%，此时，left和right部分会跳到下一行；

• 通过设置margin-left为负值让left和right部分回到与center部分同一行；

• center部分增加一个内层p，并设margin: 0 200px；

③ 缺点

多加一层 dom 树节点，增加渲染树生成的计算量。

3.两种布局实现方式对比:

• 两种布局方式都是把主列放在文档流最前面，使主列优先加载。

• 两种布局方式在实现上也有相同之处，都是让三列浮动，然后通过负外边距形成三列布局。

• 两种布局方式的不同之处在于如何处理中间主列的位置：
  圣杯布局是利用父容器的左、右内边距+两个从列相对定位；
  双飞翼布局是把主列嵌套在一个新的父级块中利用主列的左、右外边距进行布局调整

四、粘连布局

1.特点

• 有一块内容<main></main>，当<main></main>的高康足够长的时候，紧跟在<main></main>后面的元素<footer></footer>会跟在<main></main>元素的后面。

• 当<main></main>元素比较短的时候(比如小于屏幕的高度),我们期望这个<footer></footer>元素能够“粘连”在屏幕的底部

当main足够长时

当main比较短时

具体代码如下：

    <p>
      </p><p>
        main <br>
        main <br>
        main <br>
      </p>
    
    <p>footer</p>

   * {
        margin: 0;
        padding: 0;
      }
      html,
      body {
        height: 100%;//高度一层层继承下来
      }
      #wrap {
        min-height: 100%;
        background: pink;
        text-align: center;
        overflow: hidden;
      }
      #wrap .main {
        padding-bottom: 50px;
      }
      #footer {
        height: 50px;
        line-height: 50px;
        background: deeppink;
        text-align: center;
        margin-top: -50px;
      }

2.实现步骤

(1)footer必须是一个独立的结构，与wrap没有任何嵌套关系

(2)wrap区域的高度通过设置min-height，变为视口高度

(3)footer要使用margin为负来确定自己的位置

(4)在main区域需要设置 padding-bottom。这也是为了防止负 margin 导致 footer 覆盖任何实际内容。

The above is the detailed content of What are the common layouts in CSS? Introduction to 5 common layouts. For more information, please follow other related articles on the PHP Chinese website!