超詳細(xì)常用css布局

老三的休閑書屋 2020-02-14

展開全文

一、垂直居中布局絕對(duì)定位布局

        .parent {            position: relative;        }        .child {            width: 200px;            height: 200px;            position: absolute;            left: 0;            top: 0;            bottom: 0;            right: 0;            margin: auto;        }復(fù)制代碼

2.margin 負(fù)間距

       .child{            width:200px;            height: 200px;            position: absolute;            left:50%;            top:50%;            margin-left:-100px;            margin-top:-100px;        }復(fù)制代碼

Transforms 變形

      .child {            width: 200px;            height: 200px;            position:absolute;            left:50%;    /* 定位父級(jí)的50% */            top:50%;            transform: translate(-50%,-50%); /*自己的50% */        }復(fù)制代碼

flex布局

       .parent {            display: flex;            justify-content:center;            align-items:center;        }復(fù)制代碼

.parent { display: flex; } .child { margin: auto }復(fù)制代碼

table布局

父元素設(shè)置teable-cell元素,利用三層結(jié)構(gòu)模擬父子結(jié)構(gòu)

.parent {            display: table;            width: 200px;            height: 200px;        }        .child {            display: table-cell;            text-align: center;            vertical-align: middle;        }        .box {            display: inline-block;        }復(fù)制代碼

grid布局

.parent {            display: grid;        }        .child {            justify-self: center;            align-self: center;        }復(fù)制代碼

.parent {            display: grid;        }        .child {            margin: auto;        }復(fù)制代碼

二、自適應(yīng)布局右邊寬度固定，左邊自適應(yīng)

超詳細(xì)常用css布局

float布局實(shí)現(xiàn)方式
實(shí)現(xiàn)步驟：

給子元素設(shè)置相同高度，left元素向左浮動(dòng),設(shè)置固定寬度100px
right元素利用margin-left調(diào)整位置

    <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>復(fù)制代碼

flex實(shí)現(xiàn)方式：

父元素設(shè)置display: flex,給left元素設(shè)置固定寬度
給right元素設(shè)置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>復(fù)制代碼

上部高度固定，下部高度自適應(yīng)

超詳細(xì)常用css布局

絕對(duì)定位實(shí)現(xiàn)方式：
實(shí)現(xiàn)步驟：

設(shè)置container元素高度與box-sizing屬性，使padding計(jì)算入container元素中
設(shè)置top元素高度，并使用絕對(duì)定位將其放置在container頭部
設(shè)置container元素內(nèi)邊距padding-top為top元素的高度，設(shè)置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>復(fù)制代碼

普通布局實(shí)現(xiàn)：
實(shí)現(xiàn)步驟：

設(shè)置container元素高度與box-sizing屬性，使padding計(jì)算入container元素中
設(shè)置top元素高度，使用margin移動(dòng)元素位置到container元素頂部
設(shè)置container元素內(nèi)邊距padding-top為top元素的高度，設(shè)置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>復(fù)制代碼

三、三欄式布局

三欄式布局的七種布局方式：float布局、絕對(duì)定位布局、圣杯布局、雙飛翼布局、Flex布局、表格布局、網(wǎng)格布局

超詳細(xì)常用css布局

float布局

實(shí)現(xiàn)步驟：
1.左右兩欄設(shè)置float屬性使其脫離文檔流左邊欄設(shè)置 float:left, 右邊欄設(shè)置float: right
2.給中間元素設(shè)置margin-left、和margin-right，設(shè)置margin的原因是當(dāng)中間元素高度超出左右兩邊時(shí)，中間元素會(huì)被覆蓋
3.為了不影響其他元素，給父元素清除浮動(dòng)

    <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>復(fù)制代碼

缺點(diǎn)：使用的時(shí)候只需要注意一定要清除浮動(dòng)

position布局

實(shí)現(xiàn)步驟

給 container 設(shè)置position: relative，因?yàn)榻^對(duì)定位的元素的參照物為第一個(gè)postion不為static的父元素。
left 向左定位，right 向右定位。
main 使用絕對(duì)定位，通過設(shè)置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>復(fù)制代碼

缺點(diǎn)：絕對(duì)定位是脫離文檔流的，意味著下面的所有子元素也會(huì)脫離文檔流，導(dǎo)致了這種方法的有效性和可使用性是比較差的

float和BFC配合圣杯布局

實(shí)現(xiàn)步驟

使左、中、右三欄都通過float進(jìn)行浮動(dòng)。
將left的margin-left設(shè)置為-100%，此時(shí)左欄會(huì)移動(dòng)到第一行的首部。然后再將right的margin-left設(shè)置為其寬度的負(fù)值：-200px，則右欄也會(huì)移動(dòng)到和左、中欄一行中
給container一個(gè)padding，該padding應(yīng)該正好等于左、右欄的寬度
給左、右兩欄加上相對(duì)布局，然后再通過設(shè)置left和right值向外移動(dòng)。

    <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>復(fù)制代碼

雙飛翼布局

實(shí)現(xiàn)步驟

使左、中、右三欄都通過float進(jìn)行浮動(dòng)。
將left的margin-left設(shè)置為-100%，此時(shí)左欄會(huì)移動(dòng)到第一行的首部。然后再將right的margin-left設(shè)置為其寬度的負(fù)值：-200px，則右欄也會(huì)移動(dòng)到和左、中欄一行中
給 main 的子元素content設(shè)置margin: 0 220px 0 120px;，同時(shí)設(shè)置overflow: hidden使其成為一個(gè)BFC
為了不影響其他元素，給main清除浮動(dòng)

    <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>復(fù)制代碼

和圣杯布局類似，只是處理中間欄部分內(nèi)容被遮擋問題的解決方案有所不同

flex布局

實(shí)現(xiàn)步驟

給 container 設(shè)置為一個(gè) flex 容器display: flex
main 的寬度設(shè)置為width: 100%，left 和 right 分別設(shè)置為width: 200px和width: 100px
為了不讓 left 和 right 收縮，給它們?cè)O(shè)置flex-shrink: 0
使用order屬性給三個(gè)部分的 DOM 結(jié)構(gòu)進(jìn)行排序：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>復(fù)制代碼

極其靈活(還有其他實(shí)現(xiàn)方式)，需要注意瀏覽器兼容性

table-cell布局

實(shí)現(xiàn)步驟

給三欄都設(shè)置為表格單元 display: table-cell
left 和 right分別設(shè)置 width: 100px和width: 200px，container設(shè)置 width: 100%
這時(shí) left 和 right 被擠到兩邊去了，因此要分別設(shè)置min-width確保不會(huì)被擠壓。

    <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>        <!-- 這時(shí)的main要放在中間 -->        <div class='main'>            <div class='content'></div>        </div>        <div class='right'></div>    </body>復(fù)制代碼

這種布局方式能使得三欄的高度是統(tǒng)一的，但不能使main放在最前面得到最先渲染

網(wǎng)格布局

實(shí)現(xiàn)步驟

給 container 設(shè)置為display: grid
設(shè)置三欄的高度：grid-template-rows: 300px
設(shè)置三欄的寬度，中間自適應(yīng)，兩邊固定：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>復(fù)制代碼

使用起來極其方便,代碼簡(jiǎn)介,但是兼容性很差

四、多列等高利用背景圖片

    <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>復(fù)制代碼

使用正padding和負(fù)margin對(duì)沖實(shí)現(xiàn)多列布局方法

實(shí)現(xiàn)步驟：

background 會(huì)填充內(nèi)邊距 padding，而不會(huì)填充外邊距 margin 。margin具有坍塌性，可以設(shè)置負(fù)值。
float:left。使用float，元素會(huì)脫離文檔流，使其浮動(dòng)至最近的文檔流元素。在這里的作用是，將三個(gè)div元素并排。
overflow:hidden; 設(shè)置overflow屬性為hidden，這樣會(huì)讓父容器產(chǎn)生BFC（Block Fromatting Context塊級(jí)格式化上下文）效果，消除float帶來的影響。同時(shí)，根據(jù)需要，會(huì)截取內(nèi)容以適應(yīng)填充框，將超出容器的部分隱藏。

    <style>        .container {            overflow: hidden;        }        .container>div {            /**            * padding-bottom 設(shè)置比較大的正值。            * margin-bottom 設(shè)置絕對(duì)值大的負(fù)值。            **/            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>復(fù)制代碼

布局 flex實(shí)現(xiàn)等高

實(shí)現(xiàn)思路：

父元素設(shè)置display:flex, 彈性盒子布局flex，默認(rèn)值就是自帶等高布局的特點(diǎn)

    <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>復(fù)制代碼

table-cell等高布局

實(shí)現(xiàn)步驟：
1.父元素設(shè)置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>復(fù)制代碼

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>復(fù)制代碼

五、品字形布局

超詳細(xì)常用css布局

inline或float布局方式

實(shí)現(xiàn)步驟：

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

實(shí)現(xiàn)方式一：

    <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>復(fù)制代碼

實(shí)現(xiàn)方式二：

//  與上述實(shí)現(xiàn)道理基本相同，不同的是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>復(fù)制代碼

缺點(diǎn)：使用inline-block會(huì)有小的間隙

全屏的品字布局

實(shí)現(xiàn)步驟：

上面的div寬100%，下面的兩個(gè)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>復(fù)制代碼

六、瀑布流布局

超詳細(xì)常用css布局

multi-columns 方式

實(shí)現(xiàn)步驟：

瀑布流容器中設(shè)置 column-count（列數(shù)）和 column-gap（列間距）
item 中設(shè)置 break-inside:avoid，這是為了控制文本塊分解成單獨(dú)的列，以免項(xiàng)目列表的內(nèi)容跨列，破壞整體的布局。
為了布局具有響應(yīng)式效果，可以借助媒體查詢屬性，在不同屏幕大小的條件下設(shè)置瀑布流容器 container 的 column-count 來自適應(yīng)改變列數(shù)

    <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>復(fù)制代碼

flex布局

實(shí)現(xiàn)步驟：

瀑布流容器設(shè)置dispaly:flex，并使用 flex-flow 來控制列，并且允許它換行
顯式的設(shè)置 height 屬性，當(dāng)然除了設(shè)置 px 值，還可以設(shè)置100vh，讓容器的高度和瀏覽器視窗高度一樣(注意：不能不顯式的設(shè)置，如果沒有顯式的設(shè)置，容器就無法包裹住項(xiàng)目列表)
為了布局具有響應(yīng)式效果，可以借助媒體查詢屬性顯示設(shè)置不同的高度值

    <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>復(fù)制代碼

缺點(diǎn)：兩種實(shí)現(xiàn)方式都只能從上往下排列，不能從左往右排列

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來自：老三的休閑書屋 > 《生活》

舉報(bào)/認(rèn)領(lǐng)