国产99精品一区二区三区免费,婷婷综合国产激情在线,丝袜制服亚洲91av

一、垂直居中布局絕對(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)

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)

絕對(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)格布局

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ì)定位，通過(guò)設(shè)置left和right并把兩邊撐開(kāi)。

    <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)步驟

使左、中、右三欄都通過(guò)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ì)布局，然后再通過(guò)設(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)步驟

使左、中、右三欄都通過(guò)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ù)制代碼

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

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

使用起來(lái)極其方便,代碼簡(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帶來(lái)的影響。同時(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ù)制代碼

五、品字形布局

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

六、瀑布流布局

multi-columns 方式

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

瀑布流容器中設(shè)置 column-count（列數(shù)）和 column-gap（列間距）
item 中設(shè)置 break-inside:avoid，這是為了控制文本塊分解成單獨(dú)的列，以免項(xiàng)目列表的內(nèi)容跨列，破壞整體的布局。
為了布局具有響應(yīng)式效果，可以借助媒體查詢(xún)屬性，在不同屏幕大小的條件下設(shè)置瀑布流容器 container 的 column-count 來(lái)自適應(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 來(lái)控制列，并且允許它換行
顯式的設(shè)置 height 屬性，當(dāng)然除了設(shè)置 px 值，還可以設(shè)置100vh，讓容器的高度和瀏覽器視窗高度一樣(注意：不能不顯式的設(shè)置，如果沒(méi)有顯式的設(shè)置，容器就無(wú)法包裹住項(xiàng)目列表)
為了布局具有響應(yīng)式效果，可以借助媒體查詢(xún)屬性顯示設(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)方式都只能從上往下排列，不能從左往右排列

本站僅提供存儲(chǔ)服務(wù)，所有內(nèi)容均由用戶(hù)發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊舉報(bào)。

免费视频淫片aa毛片_日韩高清在线亚洲专区vr_日韩大片免费观看视频播放_亚洲欧美国产精品完整版