超詳細經常使用css佈局

時間 2020-01-09

標籤詳細經常使用 css 佈局欄目 CSS 简体版

原文原文鏈接

1、垂直居中佈局

絕對定位佈局

.parent {
            position: relative;
        }
        .child {
            width: 200px;
            height: 200px;
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }
複製代碼

2.margin 負間距javascript

.child{
            width:200px;
            height: 200px;
            position: absolute;
            left:50%;
            top:50%;
            margin-left:-100px;
            margin-top:-100px;
        }
複製代碼

Transforms 變形

.child {
            width: 200px;
            height: 200px;
            position:absolute;
            left:50%;    /* 定位父級的50% */
            top:50%;
            transform: translate(-50%,-50%); /*本身的50% */
        }
複製代碼

flex佈局

.parent {
            display: flex;
            justify-content:center;
            align-items:center;
        }
複製代碼

.parent {
            display: flex;
        }
        .child {
            margin: auto
        }
複製代碼

table佈局

父元素設置teable-cell元素,利用三層結構模擬父子結構css

.parent {
            display: table;
            width: 200px;
            height: 200px;
        }

        .child {
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }

        .box {
            display: inline-block;
        }
複製代碼

grid佈局

.parent {
            display: grid;
        }

        .child {
            justify-self: center;
            align-self: center;
        }
複製代碼

.parent {
            display: grid;
        }

        .child {
            margin: auto;
        }
複製代碼

2、自適應佈局

右邊寬度固定，左邊自適應

float佈局實現方式
實現步驟：

給子元素設置相同高度，left元素向左浮動,設置固定寬度100px
right元素利用margin-left調整位置

<style>
        .container > div {
            height: 200px;
        }

        .left {
            background-color: #ce5a4b;
            float: left;
            width: 100px;
        }

        .right {
            background-color: #499e56;
            margin-left: 100px;
        }
    </style>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
複製代碼

flex實現方式：java

父元素設置display: flex,給left元素設置固定寬度
給right元素設置flex:1使其填充其他空間

<style>
        .container {
            display: flex;
        }

        .left {
            background-color: #ce5a4b;
            height: 200px;
            width: 100px;
        }

        .right {
            background-color: #499e56;
            height: 200px;
            flex: 1;
        }
    </style>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
複製代碼

上部高度固定，下部高度自適應

絕對定位實現方式：
實現步驟：

設置container元素高度與box-sizing屬性，使padding計算入container元素中
設置top元素高度，並使用絕對定位將其放置在container頭部
設置container元素內邊距padding-top爲top元素的高度，設置bottom元素高度爲100%

<style>
        .container {
            height: 100%;
            padding: 100px 0 0;
            box-sizing: border-box;
            position: relative;
        }

        .top {
            height: 100px;
            background: #ce5a4b;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
        }

        .bottom {
            height: 100%;
            background: #499e56;
        }
    </style>
<body>
    <div class="container">
        <div class="top"></div>
        <div class="bottom"></div>
    </div>
</body>
複製代碼

普通佈局實現：
實現步驟：web

設置container元素高度與box-sizing屬性，使padding計算入container元素中
設置top元素高度，使用margin移動元素位置到container元素頂部
設置container元素內邊距padding-top爲top元素的高度，設置bottom元素高度爲100%

<style>
        .container {
            height: 500px;
            padding-top: 100px;
            box-sizing: border-box;
        }

        .top {
            height: 100px;
            background: #ce5a4b;
            margin: -100px 0 0;
        }

        .bottom {
            height: 100%;
            background: #499e56;
        }
    </style>
<body>
    <div class="container">
        <div class="top"></div>
        <div class="bottom"></div>
    </div>
</body>
複製代碼

3、三欄式佈局

三欄式佈局的七種佈局方式：float佈局、絕對定位佈局、聖盃佈局、雙飛翼佈局、Flex佈局、表格佈局、網格佈局
segmentfault

float佈局

實現步驟：
1.左右兩欄設置float屬性使其脫離文檔流左邊欄設置 float:left, 右邊欄設置float: right
2.給中間元素設置margin-left、和margin-right，設置margin的緣由是當中間元素高度超出左右兩邊時，中間元素會被覆蓋
3.爲了避免影響其餘元素，給父元素清除浮動瀏覽器

<style>
        .left {
            float: left;
            width: 100px;
            height: 200px;
            background: #ce5a4b;
        }

        .right {
            float: right;
            width: 200px;
            height: 200px;
            background: #499e56;
        }

        .main {
            margin-left: 120px;
            margin-right: 220px;
            height: 200px;
            background: #f8cf5f;
        }

        .container::after {
            content: '';
            display: block;
            clear: both;
        }
    </style>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
        <div class="main"></div>
    </div>
</body>
複製代碼

缺點：使用的時候只須要注意必定要清除浮動ide

position佈局

實現步驟佈局

給 container 設置position: relative，由於絕對定位的元素的參照物爲第一個postion不爲static的父元素。
left 向左定位，right 向右定位。
main 使用絕對定位，經過設置left和right並把兩邊撐開。

<style>
        .container {
            position: relative;
        }
        .left {
            position: absolute;
            left: 0;
            width: 100px;
            height: 300px;
            background-color: #ce5a4b;
        }

        .main {
            position: absolute;
            left: 120px;
            right: 220px;
            height: 300px;
            background-color: #f8cf5f;
        }

        .right {
            position: absolute;
            right: 0;
            width: 200px;
            height: 300px;
            background-color: #499e56;
        }
    </style>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="main"></div>
        <div class="right"></div>
    </div>
</body>
複製代碼

缺點：絕對定位是脫離文檔流的，意味着下面的全部子元素也會脫離文檔流，致使了這種方法的有效性和可以使用性是比較差的post

float和BFC配合聖盃佈局

實現步驟flex

使左、中、右三欄都經過float進行浮動。
將left的margin-left設置爲-100%，此時左欄會移動到第一行的首部。而後再將right的margin-left設置爲其寬度的負值：-200px，則右欄也會移動到和左、中欄一行中
給container一個padding，該padding應該正好等於左、右欄的寬度
給左、右兩欄加上相對佈局，而後再經過設置left和right值向外移動。

<style>
        .container {
            overflow: hidden;
            padding: 0 220px 0 120px;
        }

        .container>div {
            position: relative;
            float: left;
            height: 300px;
        }

        .main {
            width: 100%;
            background-color: #f8cf5f;
        }

        .left {
            width: 100px;
            margin-left: -100%;
            left: -120px;
            background-color: #ce5a4b;
        }

        .right {
            width: 200px;
            background-color: #499e56;
            margin-left: -200px;
            right: -220px;
        }
    </style>
    <div class="container">
        <div class="main"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
複製代碼

雙飛翼佈局

實現步驟

使左、中、右三欄都經過float進行浮動。
將left的margin-left設置爲-100%，此時左欄會移動到第一行的首部。而後再將right的margin-left設置爲其寬度的負值：-200px，則右欄也會移動到和左、中欄一行中
給 main 的子元素content設置margin: 0 220px 0 120px;，同時設置overflow: hidden使其成爲一個BFC
爲了避免影響其餘元素，給main清除浮動

<style>
        .container {
            overflow: hidden;
        }

        .container>div {
            position: relative;
            float: left;
            height: 300px;
        }

        .main {
            width: 100%;
        }

        .main::after {
            content: '';
            display: block;
            clear: both;
        }

        .left {
            width: 100px;
            background-color: #ce5a4b;
            margin-left: -100%;
        }

        .right {
            width: 200px;
            background-color: #499e56;
            margin-left: -200px;
        }

        .content {
            height: 100%;
            margin: 0 220px 0 120px;
            overflow: hidden;
            background-color: #f8cf5f;
        }
    </style>
    <div class="container">
        <div class="main">
            <div class="content"></div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
複製代碼

和聖盃佈局相似，只是處理中間欄部份內容被遮擋問題的解決方案有所不一樣

flex佈局

實現步驟

給 container 設置爲一個 flex 容器display: flex
main 的寬度設置爲width: 100%，left 和 right 分別設置爲width: 200px和width: 100px
爲了避免讓 left 和 right 收縮，給它們設置flex-shrink: 0
使用order屬性給三個部分的 DOM 結構進行排序：left：order: 1，main：order: 2，right：order: 3

<style>
        .container {
            display: flex;
        }

        .main {
            background-color: #f8cf5f;
            width: 100%;
            height: 300px;
            order: 2;
        }

        .left {
            background-color: #ce5a4b;
            width: 100px;
            height: 300px;
            margin-right: 20px;
            flex-shrink: 0;
            order: 1;
        }

        .right {
            background-color: #499e56;
            width: 200px;
            height: 300px;
            flex-shrink: 0;
            margin-left: 20px;
            order: 3;
        }
    </style>
<body>
    <div class="container">
        <div class="main"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
複製代碼

極其靈活(還有其餘實現方式)，須要注意瀏覽器兼容性

table-cell佈局

實現步驟

給三欄都設置爲表格單元 display: table-cell
left 和 right分別設置 width: 100px和width: 200px，container設置 width: 100%
這時 left 和 right 被擠到兩邊去了，所以要分別設置min-width確保不會被擠壓。

<style>
        .container {
            width: 100%;
            display: table;
        }
        .container > div {
            display: table-cell;
            height: 300px;
        }

        .content {
            height: 100%;
            margin: 0 20px;
            background: #f8cf5f;
        }

        .left {
            width: 100px;
            min-width: 100px;
            background-color: #ce5a4b;
        }

        .right {
            width: 200px;
            min-width: 200px;
            background-color: #499e56;
        }
    </style>
    <body>
        <div class="left"></div>
        <!-- 這時的main要放在中間 -->
        <div class="main">
            <div class="content"></div>
        </div>
        <div class="right"></div>
    </body>
複製代碼

這種佈局方式能使得三欄的高度是統一的，但不能使main放在最前面獲得最早渲染

網格佈局

實現步驟

給 container 設置爲display: grid
設置三欄的高度：grid-template-rows: 300px
設置三欄的寬度，中間自適應，兩邊固定：grid-template-columns: 100px auto 200px;

<style>
        .container {
            display: grid;
            width: 100%;
            grid-template-rows: 300px;
            grid-template-columns: 100px auto 200px;
        }
        .left {
            background-color: #ce5a4b;
            margin-right: 20px;
        }
        .main {
            background-color: #f8cf5f;
        }
        .right {
            background-color: #499e56;
            margin-left: 20px;
        }
    </style>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="main"></div>
        <div class="right"></div>
    </div>
</body>
複製代碼

使用起來極其方便,代碼簡介,可是兼容性不好

4、多列等高

利用背景圖片

<style>
        .container {
            background: url("column.png") repeat-y;
            width: 960px;
            margin: 0 auto;
        }

        .left {
            float: left;
            width: 220px;
        }

        .main {
            float: left;
            width: 480px;
        }

        .right {
            float: left;
            width: 220px;
        }
    </style>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="main"></div>
        <div class="right"></div>
    </div>
</body>
複製代碼

使用正padding和負margin對衝實現多列布局方法

實現步驟：

background 會填充內邊距 padding，而不會填充外邊距 margin 。margin具備坍塌性，能夠設置負值。
float:left。使用float，元素會脫離文檔流，使其浮動至最近的文檔流元素。在這裏的做用是，將三個div元素並排。
overflow:hidden; 設置overflow屬性爲hidden，這樣會讓父容器產生BFC（Block Fromatting Context塊級格式化上下文）效果，消除float帶來的影響。同時，根據須要，會截取內容以適應填充框，將超出容器的部分隱藏。

<style>
        .container {
            overflow: hidden;
        }

        .container>div {
            /**
            * padding-bottom 設置比較大的正值。
            * margin-bottom 設置絕對值大的負值。
            **/
            padding-bottom: 10000px;
            margin-bottom: -10000px;
            float: left;
            width: 30%;
        }

        .left {
            background-color: #ce5a4b;
        }

        .main {
            background-color: #f8cf5f;
        }

        .right {
            background-color: #499e56;
        }
    </style>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="main"></div>
        <div class="right"></div>
    </div>
</body>
複製代碼

佈局 flex實現等高

實現思路：

父元素設置display:flex, 彈性盒子佈局flex，默認值就是自帶等高佈局的特色

<style>
        .container {
            display: flex;
        }

        .left {
            width: 200px;
            background-color: #ce5a4b;
        }

        .main {
            flex: 1;
            height: 400px;
            background: #f8cf5f;
        }

        .right {
            width: 300px;
            background: #499e56;
        }
    </style>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="main"></div>
        <div class="right"></div>
    </div>
</body>
複製代碼

table-cell等高佈局

實現步驟：
1.父元素設置dispaly:table, table佈局自然就具備等高的特性。

<style>
        .container {
            display: table;
        }
        .left {
            display: table-cell;
            width: 300px;
            background-color: #ce5a4b;
        }

        .main {
            display: table-cell;
            width: 300px;
            height: 400px;
            background: #f8cf5f;
        }

        .right {
            display: table-cell;
            width: 300px;
            background: #499e56;
        }
    </style>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="main"></div>
        <div class="right"></div>
    </div>
</body>
複製代碼

grid佈局

<style>
        .container {
            display: grid;
            grid-auto-flow: column;
        }

        .left {
            background-color: #ce5a4b;
        }

        .main {
            background-color: #f8cf5f;
            height: 300px;
        }

        .right {
            background-color: #499e56;
        }
    </style>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="main"></div>
        <div class="right"></div>
    </div>
</body>
複製代碼

5、品字形佈局

inline或float佈局方式

實現步驟：

三塊高寬是肯定的；
上面那塊用margin: 0 auto;居中；
下面兩塊用inline-block或者float不換行
用margin調整位置使他們居中(使left元素margin-left爲寬度的通常則可居中)

實現方式一：

<style>
        .container > div {
            height: 300px;
            width: 300px;
        }

        .top {
            margin: 0 auto;
            background-color: #f8cf5f;
        }

        .left {
            display: inline-block;
            // float: left;
            margin-left: 150px;
            background-color: #499e56;
        }

        .right {
            display: inline-block;
            // float: left;
            background-color: #ce5a4b;
        }
    </style>
<body>
    <div class="container">
        <div class="top">上</div>
        <div class="left">左</div>
        <div class="right">右</div>
    </div>
</body>
複製代碼

實現方式二：

//  與上述實現道理基本相同，不一樣的是left和right元素佈局     
    <style> 
        .container>div {
            height: 300px;
            width: 300px;
        }

        .top {
            margin: 0 auto;
            background-color: #f8cf5f;
        }

        .left {
            display: inline-block;
            // float: left;
            margin-left: -600px;
            background-color: #499e56;
        }

        .right {
            display: inline-block;
            // float: left;
            margin-left: 50%;
            background-color: #ce5a4b;
        }
    </style>
<body>
    <div class="container">
        <div class="top">上</div>
        <div class="right">右</div>
        <div class="left">左</div>
    </div>
</body>
複製代碼

缺點：使用inline-block會有小的間隙

全屏的品字佈局

實現步驟：

上面的div寬100%，下面的兩個div分別寬50%，而後用float或者inline使其不換行便可

<style>
        .container>div {
            height: 200px;
        }

        .top {
            width: 100%;
            background-color: #f8cf5f;
        }

        .left {
            // display: inline-block
            float: left;
            width: 50%;
            background-color: #499e56;
        }

        .right {
            // display: inline-block
            float: left;
            width: 50%;
            background-color: #ce5a4b;
        }
    </style>
<body>
    <div class="container">
        <div class="top">上</div>
        <div class="left">左</div>
        <div class="right">右</div>
    </div>
</body>
複製代碼

6、瀑布流佈局

multi-columns 方式

實現步驟：

瀑布流容器中設置 column-count（列數）和 column-gap（列間距）
item 中設置 break-inside:avoid，這是爲了控制文本塊分解成單獨的列，以避免項目列表的內容跨列，破壞總體的佈局。
爲了佈局具備響應式效果，能夠藉助媒體查詢屬性，在不一樣屏幕大小的條件下設置瀑布流容器 container 的 column-count 來自適應改變列數

<style>
        .container {
            -moz-column-count: 3;
            /* Firefox */
            -webkit-column-count: 3;
            /* Safari 和 Chrome */
            column-count: 3;
            -moz-column-gap: 2em;
            -webkit-column-gap: 2em;
            column-gap: 2em;
            width: 70%;
            margin: 2em auto;
        }

        .item {
            padding: 2em;
            margin-bottom: 2em;
            -moz-page-break-inside: avoid;
            -webkit-column-break-inside: avoid;
            break-inside: avoid;
            background: #ce5a4b;
            color: #fff;
            text-align: center;
        }

        .item .content-lar {
            height: 200px;
        }

        .item .content-mid {
            height: 100px;
        }

        .item .content-sma {
            height: 50px;
        }

        @media screen and (max-width: 800px) {
            .container {
                column-count: 2;
                /* two columns on larger phones */
            }
        }

        @media screen and (max-width: 500px) {
            .container {
                column-count: 1;
                /* two columns on larger phones */
            }
        }
    </style>    
<body>
    <div class="container">
        <div class="item">
            <div class="item_content content-lar"> 1 我最大 </div>
        </div>
        <div class="item">
            <div class="item_content content-sma"> 2 我最小 </div>
        </div>
        <div class="item">
            <div class="item_content content-mid"> 3 我中等 </div>
        </div>
        <div class="item">
            <div class="item_content content-sma"> 4 我最小 </div>
        </div>
        <div class="item">
            <div class="item_content content-mid"> 5 我中等 </div>
        </div>
        <div class="item">
            <div class="item_content content-lar"> 6 我最大 </div>
        </div>
        <div class="item">
            <div class="item_content content-sma"> 7 我最小 </div>
        </div>
        <div class="item">
            <div class="item_content content-lar"> 8 我最大 </div>
        </div>
        <div class="item">
            <div class="item_content content-lar"> 9 我最大 </div>
        </div>
        <div class="item">
            <div class="item_content content-sma"> 10 我最小 </div>
        </div>
        <div class="item">
            <div class="item_content content-mid"> 11 我中等 </div>
        </div>
        <div class="item">
            <div class="item_content content-mid"> 12 我中等 </div>
        </div>
        <!-- more items -->
    </div>
</body>
複製代碼

flex佈局

實現步驟：

瀑布流容器設置dispaly:flex，並使用 flex-flow 來控制列，而且容許它換行
顯式的設置 height 屬性，固然除了設置 px 值，還能夠設置100vh，讓容器的高度和瀏覽器視窗高度同樣(注意：不能不顯式的設置，若是沒有顯式的設置，容器就沒法包裹住項目列表)
爲了佈局具備響應式效果，能夠藉助媒體查詢屬性顯示設置不一樣的高度值

<style>
        .container {
            height: 800px;
            display: flex;
            flex-flow: column wrap;
            width: 70%;
            margin: 2em auto;
        }

        .item {
            padding: 2em;
            margin-bottom: 2em;
            break-inside: avoid;
            background: #f60;
            color: #fff;
            text-align: center;
            margin: 10px;
        }

        .item .content-lar {
            height: 200px;
        }

        .item .content-mid {
            height: 100px;
        }

        .item .content-sma {
            height: 50px;
        }

        @media screen and (max-width: 1100px) {
            .masonry {
                height: 800px;
            }
        }

        @media screen and (max-width: 800px) {
            .masonry {
                height: 1100px;
            }
        }

        @media screen and (max-width: 600px) {
            .masonry {
                height: 1300px;
            }
        }

        @media screen and (max-width: 460px) {
            .masonry {
                height: 1600px;
            }
        }
    </style>
<body>
    <div class="container">
        <div class="item">
            <div class="item_content content-lar"> 1 我最大 </div>
        </div>
        <div class="item">
            <div class="item_content content-sma"> 2 我最小 </div>
        </div>
        <div class="item">
            <div class="item_content content-mid"> 3 我中等 </div>
        </div>
        <div class="item">
            <div class="item_content content-sma"> 4 我最小 </div>
        </div>
        <div class="item">
            <div class="item_content content-mid"> 5 我中等 </div>
        </div>
        <div class="item">
            <div class="item_content content-lar"> 6 我最大 </div>
        </div>
        <div class="item">
            <div class="item_content content-sma"> 7 我最小 </div>
        </div>
        <div class="item">
            <div class="item_content content-lar"> 8 我最大 </div>
        </div>
        <div class="item">
            <div class="item_content content-lar"> 9 我最大 </div>
        </div>
        <div class="item">
            <div class="item_content content-sma"> 10 我最小 </div>
        </div>
        <div class="item">
            <div class="item_content content-mid"> 11 我中等 </div>
        </div>
        <div class="item">
            <div class="item_content content-mid"> 12 我中等 </div>
        </div>
        <!-- more items -->
    </div>
</body>
複製代碼