css各类布局总结

时间 2019-12-10

标签 css 各类布局总结栏目 CSS 繁體版

原文原文链接

一、水平居中

方法一：子元素设置margin:0 auto；css

但有其局限性：只能块级元素，已知宽度，父级元素有宽度的使用才有效。html

方法二：父元素text-align：center + 子元素display：inline-blockbash

在父级元素上设置text-align：center;将须要居中的元素设置为inline-blockapp

方法三：position绝对定位ide

子绝父相，子元素设置布局

position:absolute;(同时设置父级元素relative) 
left:50%;(包括了元素自己的宽度)
transform:translateX(-50%);
复制代码

方法四：flex弹性布局之justify-contentflex

父元素设置！！(可是得子元素有宽高才行，纯文字不可)ui

display:flex;
  justify-content:center;`
复制代码

垂直居中

方法一：设置父元素height和line-height值相同this

！注意：只适用于文字spa

方法二：只设置父元素table-cell + vertical-align

！注意：父子元素都得设置宽高！

display: table-cell;
          vertical-align: middle;
复制代码

方法三：父元素设置display：flex 子元素设置align-self：center

方法四：父元素设置display:flex;justify-content：center;align-items: center;

display:flex;
          justify-content:center;
          align-items: center;
复制代码

方法五：使用绝对定位和负边距

position：absolute； //子绝父相
            top: 50%;       //各设置为50%
            left: 50%;
            margin-left: -100px; //为宽高的一半
            margin-top: -100px;  //为宽高的一半
            height: 200px;
            width: 200px;
            background: yellow;
复制代码

BFC 两栏布局

左侧块浮动到左边，可是由于是浮动块，右侧块高度一旦超过左侧块后文字就会出如今左侧的下方，由于没有块把它挡住。

解决办法：让右侧块变为BFC文字就不会横过去。由于BFC元素不与Float元素相重叠。

使用BFC以后

三栏-浮动方案

.left,
        .right,
        .center {
            height: 200px;
        }
        .left {
            background-color: red;
            width: 300px;
            float: left;
        }
        .right {
            background-color: blue;
            width: 300px;
            float: right;
        }
        .center {
            background-color: orange;
            width: 100%;
        }
复制代码

三栏布局-flex

.left,
        .right,
        .center {
            min-height: 100px;
        }
        .wrapper {
            display: flex;
        }
        .left{
            background-color: red;
            width: 300px;
        }
        .center {
            background-color: orange;
            flex: 1;
        }
        .right {
            background-color: blue;
            width: 300px;
        }
复制代码

三栏-绝对定位

aside {
            position: absolute;
            width: 300px;
            min-height: 100px;
        }
        aside.left {
            left: 0;
            background-color: red;
        }
        aside.right {
            right: 0;
            background-color: blue;
        }
        main.center {
            position: absolute;
            left: 300px;
            right: 300px;
            background-color: orange;
        }
复制代码

grid网格布局

.wrapper {
        display: grid;
        width: 100%;
        grid-template-columns: 300px 1fr 300px;
      }
      
      .left {
        background-color: red;
      }
      .center {
        background-color: orange;
      }
      .right {
        background-color: blue;
      }
复制代码

表格布局

.wrapper {
        display: table;
        width: 100%;
      }
      .left,
      .right,
      .center {
        min-height: 100px;
        display: table-cell;
      }
      .left {
        width: 300px;
        background-color: red;
      }
      .center {
        background-color: orange;
      }
      .right {
        background-color: blue;
        width: 300px;
      }
    </style>
复制代码

双飞翼布局

原理：主体元素上设置左右边距，预留两翼位置。左右两栏使用浮动和负边距归位。

左翅left有200px,右翅right..220px.. 身体main自适应未知

1.html代码中，main要放最前边，left right

2.将main left right 都float:left

3.将main占满 width:100%

4.此时main占满了，因此要把left拉到最左边，使用margin-left:-100% 同理 right使用margin-left:-220px

（这时能够直接继续上边圣杯布局的步骤，也能够有所改动）

5.main内容被覆盖了吧，除了使用外围的padding，还能够考虑使用margin。

给main增长一个内层div-- main-inner, 而后margin:0 220px 0 200px

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>双飞翼布局</title>
    <style>
      .left,
      .right,
      .main {
        min-height: 200px;
      }
      .left {
        width: 200px;
        background-color: thistle;
      }
      .main {
        background: #999;
      }
      .right {
        width: 300px;
        background-color: violet;
      }
      /* 双飞翼布局重点 */
      .left,
      .main,
      .right {
        float: left;
      }
      .main {
        width: 100%;
      }
      .main-inner {
        margin-left: 200px;
        margin-right: 300px;
      }
      .left {
        margin-left: -100%;
      }
      .right {
        margin-left: -300px;
      }
    </style>
  </head>
  <body>
    <div class="main"><div class="main-inner">中心区</div></div>
    <div class="left">left</div>
    <div class="right">right</div>
  </body>
</html>
复制代码

圣杯布局

要求：三列布局；中间宽度自适应，两边内容定宽。

好处：重要的内容放在文档流前面能够优先渲染

原理：利用相对定位、浮动、负边距布局，而不添加额外标签

实现方式：

main部分首先要放在container的最前部分。而后是left,right

1.将三者都 float:left , 再加上一个position:relative (由于相对定位后面会用到）

2.main部分 width:100%占满

3.此时main占满了，因此要把left拉到最左边，使用margin-left:-100%

4.这时left拉回来了，但会覆盖main内容的左端，要把main内容拉出来，因此在外围container加上 padding:0 220px 0 200px

5.main内容拉回来了，但left也跟着过来了，因此要还原，就对left使用相对定位 left:-200px 同理，right也要相对定位还原 right:-220px

6.到这里大概就自适应好了。若是想container高度保持一致能够给left main right都加上min-height:130px

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>实现三栏水平布局之圣杯布局</title>
    <style type="text/css">
      /*基本样式*/
      .left, .right, .main {
        min-height: 300px;
      }
      .left {
        width: 200px;
        background-color:thistle;
      }
      .main {
        background-color: #999;
      }
      .right {
        width: 300px;
        background-color: violet;
      }
      /* 圣杯布局关键代码 */
      .left, .main, .right {
        float: left;
        position: relative;
      }
      .main {
        width: 100%;
      }
      .container {
        padding-left: 200px;
        padding-right: 300px;
      }
      .left {
        margin-left: -100%;
        left: -200px;
      }
      .right {
        margin-left: -300px;
        right: -300px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="main">main</div>
      <div class="left">left</div>
      <div class="right">right</div>
    </div>
  </body>
</html>
复制代码

一个高度自适应的 div，里面有两个 div，一个高度 100px，但愿另外一个填满剩下的高度

方案 1： .sub { height: calc(100%-100px); }

方案 2： .container { position:relative; } .sub { position: absolute; top: 100px; bottom: 0; }

方案 3： .container { display:flex; flex-direction:column; } .sub { flex:1; }

1. CSS布局总结
2. CSS各种布局
3. css布局方式总结
4. css布局基础总结
5. CSS 页面布局总结
6. css总结（1）flex布局
7. 【CSS】Grid 布局总结
8. Css居中布局总结
9. CSS布局技巧之——各类居中
10. CSS布局技巧之--各类居中
更多相关文章...
• jQuery Mobile CSS 类 - jQuery Mobile 教程
• ASP.NET Web Pages - 页面布局 - ASP.NET 教程
• 算法总结-双指针
• 算法总结-回溯法