您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)使用css怎么實(shí)現(xiàn)兩邊固定中間自適應(yīng)布局,文章內(nèi)容質(zhì)量較高,因此小編分享給大家做個(gè)參考,希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。
浮動(dòng)
<style type="text/css"> .wrap {background: #eee; padding: 20px; } p {margin: 0; } .left {width: 200px; height: 200px; float: left; background: coral; } .right {width: 200px; height: 200px; float: right; background: lightblue; } .middle {margin: 0 200px; background: lightpink; } </style> <div class="wrap"> <p class="left">我在左邊</p> <p class="right">我在右邊</p> <p class="middle">我排最后,但是跑到中間來了</p> </div>
原理:
浮動(dòng)元素和非浮動(dòng)元素不在同一個(gè)立體空間,如果不清浮動(dòng),位置在它下面的元素將往上浮。
浮動(dòng)元素高度為0,浮動(dòng)盒子層級(jí)比 block
塊級(jí)水平盒子高,比 inline/inline-block
水平盒子低。
浮動(dòng)內(nèi)嵌 div
<style type="text/css"> .wrap {background: #eee; padding: 20px; } p {margin: 0; } .left {width: 200px; height: 200px; float: left; background: coral; margin-left: -100%;} .right {width: 200px; height: 200px; float: left; background: lightblue; margin-left: -200px;} .middle {width: 100%; height: 200px;float: left; background: lightpink; } span{ display: inline-block; margin: 0 200px; } </style> <div class="wrap"> <p class="middle"> <span class="inner"> 我在中間 </span> </p> <p class="left">我在左邊</p> <p class="right">我在右邊</p> </div>
原理:
三個(gè)元素都浮動(dòng),其中主題元素沾滿一行 100% ,利用負(fù) margin
把左右兩邊的元素放好。
主題元素里面再套一個(gè)子元素,子元素 margin: 0 200px
,防止內(nèi)容跑到左右兩塊浮動(dòng)元素下面被遮蓋。
定位
<style type="text/css"> .wrap {background: #eee; position: relative;} p {margin: 0; } .left {width: 200px; height: 200px; background: coral; position: absolute;left: 0; top: 0;} .right {width: 200px; height: 200px; background: lightblue; position: absolute;right: 0; top: 0;} .middle {height: 200px; background: lightpink; margin: 0 200px;} </style> <div class="wrap"> <p class="middle">我在中間,我用 margin 抵消左右兩塊定位元素占據(jù)空間</p> <p class="left">我在左邊,我是定位元素</p> <p class="right">我在右邊,我是定位元素</p> </div>
原理:
左右兩個(gè)元素定位,可放任意位置。
中間元素用 margin: 0 200px
,防止內(nèi)容跑到左右兩塊定位元素下面被遮蓋。
flex
<style type="text/css"> .wrap {background: #eee; display: flex} p {margin: 0; } .left {width: 200px; height: 200px; background: coral; } .right {width: 200px; height: 200px; background: lightblue; } .middle {height: 200px; background: lightpink; flex: 1;} </style> <div class="wrap"> <p class="left">我在左邊</p> <p class="middle">我在中間,flex: 1 自動(dòng)占據(jù)剩余空間</p> <p class="right">我在右邊</p> </div>
原理:
flex
布局,子元素默認(rèn)水平排列。
flex: 0 1 auto
-> 默認(rèn),占據(jù)空間不跟隨父級(jí)放大,跟隨變小,自身本來寬度
flex: 1 1 auto
-> auto,占據(jù)空間跟隨父級(jí)放大,同時(shí)跟隨變小,自身本來寬度
flex: 0 0 auto
-> none,占據(jù)空間不跟隨父級(jí)放大,同時(shí)也不跟隨變小,自身本來寬度
flex: 1 1 1
-> auto,占據(jù)空間跟隨父級(jí)放大,同時(shí)跟隨變小,并且自動(dòng)占滿剩余空間
css的全稱是Cascading Style Sheets(層疊樣式表),它是一種用來表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁,還可以配合各種腳本語言動(dòng)態(tài)地對(duì)網(wǎng)頁各元素進(jìn)行格式化。
關(guān)于使用css怎么實(shí)現(xiàn)兩邊固定中間自適應(yīng)布局就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。