What are the CSS layouts? Common CSS layout methods (with code)

What are the css layouts? CSS layout can make the page look more beautiful and tidy. The following article summarizes several common layout methods in CSS, let us take a look in detail.

Horizontal centered layout

1. Margin fixed width

<div>
  <div>Demo</div>
</div>

<style>
  .child {
    width: 50px;
    margin: 0 auto;
  }
</style>

Running results ：

Everyone must have seen it on the front end. The fixed width is horizontally centered. We can also use the following to achieve variable width

2. table margin

<div>
  <div>Demo</div>
</div>

<style>
  .child {
    display: table;
    margin: 0 auto;
  }
</style>

Run result:

display: The table is similar to the block element in performance, but the width is the width of the content.

No need to set the parent element style (supports IE 8 and above) compatible with IE 8. The following versions need to be adjusted to

3, inline-block text-align

<div>
  <div>Demo</div>
</div>

<style>
  .child {
    display: inline-block;
  }
  .parent {
    text-align: center;
  }
</style>

Good compatibility (even compatible with IE 6 and IE 7)

4. absolute margin-left

<div>
  <div>Demo</div>
</div>

<style>
.parent {
    position: relative;
  }
  .child {
    position: absolute;
    left: 50%;
    width: 100px;
    margin-left: -50px;  /* width/2 */
  }
  </style>

Fixed width

Compared with using transform, it has better compatibility

5. Absolute transform

<div>
  <div>Demo</div>
</div>

<style>
  .parent {
    position: relative;
  }
  .child {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
</style>

Absolute positioning is out of the document flow and will not affect subsequent elements The layout is affected.

transform is a CSS3 property and has compatibility issues

6, flex justify-content

<div>
  <div>Demo</div>
</div>

<style>
  .parent {
    display: flex;
    justify-content: center;
  }
</style>

You only need to set the parent node attribute, no need to set the child Element

flex has compatibility issues

Vertical centering:

1, table-cell vertical-align

<div>
  <div>Demo</div>
</div>

<style>
  .parent {
    display: table-cell;
    vertical-align: middle;
  }
</style>

Good compatibility (versions below IE 8 need to adjust the page structure to table

2, absolute transform

Powerful absolute for Of course, this small problem is also very simple

<div>
  <div>Demo</div>
</div>

<style>
  .parent {
    position: relative;
  }
  .child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
</style>

Absolute positioning is out of the document flow and will not affect the layout of subsequent elements. But if the absolutely positioned element is the only element, the parent element will also lose its height.

Transform is a CSS3 attribute and has compatibility issues
Horizontal centering, which can also be achieved with margin-top, the principle is horizontal centering

3. flex align-items

If absolute is powerful, then flex is just smiling, because he is the strongest...but it has compatibility issues

<div>
  <div>Demo</div>
</div>

<style>
  .parent {
    display: flex;
    align-items: center;
  }
</style>

Horizontal and vertical centering ：

1. Absolute transform

<div>
  <div>Demo</div>
</div>

<style>
  .parent {
    position: relative;
  }
  .child {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
</style>

Absolute positioning is out of the document flow and will not affect the layout of subsequent elements.

transform is a CSS3 attribute and has compatibility issues

2. inline-block text-align table-cell vertical-align

<div>
  <div>Demo</div>
</div>

<style>
  .parent {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
  }
  .child {
    display: inline-block;
  }
</style>

Good compatibility

3. flex justify-content align-items

<div>
  <div>Demo</div>
</div>

<style>
  .parent {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /*垂直居中*/
  }
</style>

You only need to set the parent node attributes, no need to set the child elements

Painful compatibility issues

One column has a fixed width and one column is adaptive

1. float margin

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

<style>
  .left {
    float: left;
    width: 100px;
  }
  .right {
    margin-left: 100px
    /*间距可再加入 margin-left */
  }
</style>

<span style="font-family: 微软雅黑, Microsoft YaHei;">IE 6 will have a 3-pixel BUG. The solution can be to add margin-left:-3px to .left. Of course, there are also solutions to solve this small bug as follows: </span>

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

<style>
  .left {
    float: left;
    width: 100px;
  }
  .right-fix {
    float: right;
    width: 100%;
    margin-left: -100px;
  }
  .right {
    margin-left: 100px
    /*间距可再加入 margin-left */
  }
</style>

This method There will be no 3-pixel BUG in IE 6, but .left cannot be selected, and .left {position: relative} needs to be set to increase the level. Note that this method adds unnecessary structure to the HTML text.
Arrogant programmers should give up browsers that are too low version

2. float overflow

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

<style>
  .left {
    float: left;
    width: 100px;
  }
  .right {
    overflow: hidden;
  }
</style>

Setting overflow: hidden will trigger BFC mode (Block Formatting Context) block-level format context. What is BFC? In layman's terms, no matter what you do inside BFC, the outside world will not be affected. This method has a simple style but does not support IE 6

3. The display characteristics of table

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

<style>
  .parent {
    display: table;
    width: 100%;
    table-layout: fixed;
  }
  .left {
    display: table-cell;
    width: 100px;
  }
  .right {
    display: table-cell;
    /*宽度为剩余宽度*/
  }
</style>

table are the cell width of each column and must be equal to the table width. table-layout: fixed can speed up rendering and also set layout priority. Margin cannot be set in table-cell, but the spacing can be set through padding

4, flex

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

<style>
  .parent {
    display: flex;
  }
  .left {
    width: 100px;
    margin-left: 20px;
  }
  .right {
    flex: 1;
  }
</style>

Low version browser compatibility issues

Performance The problem is that it is only suitable for small-scale layout
After we learn the layout of one column with fixed width and one column with adaptive layout, we can also easily implement multiple columns with fixed width, one column with adaptive multiple columns with variable width and one column with adaptive layout. We will not explain them one by one here. , you can try it yourself, or you can consolidate the

etc. distribution pattern you learned earlier:

1, float

<div>
  <div>
    <p>1</p>
  </div>
  <div>
    <p>2</p>
  </div>
  <div>
    <p>3</p>
  </div>
  <div>
    <p>4</p>
  </div>
</div>
<style>
  .parent {
    margin-left: -20px;
  }
  .column {
    float: left;
    width: 25%;
    padding-left: 20px;
    box-sizing: border-box;
  }
</style>

This method is perfectly compatible with IE8 and above versions

2, flex

<div>
  <div>
    <p>1</p>
  </div>
  <div>
    <p>2</p>
  </div>
  <div>
    <p>3</p>
  </div>
  <div>
    <p>4</p>
  </div>
</div>


<style>
  .parent {
    display: flex;
  }
  .column {
    flex: 1;
  }
  .column+.column { /* 相邻兄弟选择器 */
    margin-left: 20px;
  }
</style>

is powerful and simple, but has compatibility issues

3. table

<div>
  <div>
    <div>
      <p>1</p>
    </div>
    <div>
      <p>2</p>
    </div>
    <div>
      <p>3</p>
    </div>
    <div>
      <p>4</p>
    </div>
  </div>
</div>

<style>
  .parent-fix {
    margin-left: -20px;
  }
  .parent {
    display: table;
    width: 100%;
    /*可以布局优先，也可以单元格宽度平分在没有设置的情况下*/
    table-layout: fixed;
  }
  .column {
    display: table-cell;
    padding-left: 20px;
  }
</style>

Contour layout

##1、table

table The characteristics of each column are equal width and each row are equal height, which can be used to solve this requirement

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

<style>
  .parent {
    display: table;
    width: 100%;
    table-layout: fixed;
  }
  .left {
    display: table-cell;
    width: 100px;
  }
  .right {
    display: table-cell
    /*宽度为剩余宽度*/
  }
</style>

2, flex

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

<style>
  .parent {
    display: flex;
  }
  .left {
    width: 100px;
    margin-left: 20px;
  }
  .right {
    flex: 1;
  }
</style>

注意这里实际上使用了 align-items: stretch，flex 默认的 align-items 的值为 stretch

3、float

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

<style>
  .parent {
    overflow: hidden;
  }
  .left,
  .right {
    padding-bottom: 9999px;
    margin-bottom: -9999px;
  }
  .left {
    float: left;
    width: 100px;
    margin-right: 20px;
  }
  .right {
    overflow: hidden;
  }
</style>

此方法为伪等高（只有背景显示高度相等），左右真实的高度其实不相等。 兼容性较好。

到此，我们了解常见的布局解决方案，这些只是参考，一样的布局实现方式多种多样。主要就使用position、flex 、table（从很久很久以前起，我们就抛弃了table布局页面，但display: table;是异常强大）、float等属性目前flex兼容性较差。

相关文章推荐：

常见css水平自适应布局_html/css_WEB-ITnose

DIV+CSS布局中常见的10大错误_html/css_WEB-ITnose

CSS常用布局实现方法_html/css_WEB-ITnose

The above is the detailed content of What are the CSS layouts? Common CSS layout methods (with code). For more information, please follow other related articles on the PHP Chinese website!