時間：2023-08-30 01:30:01 | 來源：網(wǎng)站運(yùn)營
時間：2023-08-30 01:30:01 來源：網(wǎng)站運(yùn)營
css常見布局實(shí)戰(zhàn)：一、使用flex實(shí)現(xiàn)頭部，腳部定高；中部高度自適應(yīng)，左右兩列定寬不可伸縮，中間內(nèi)容區(qū)自適應(yīng)布局
在線咨詢
6個容器屬性:1.flex-direction:row/column 橫軸為主軸/縱軸為主軸2.flex-wrap:nowarp/warp 換行/不換行3.flex-flow:direction|| warp縮寫4.justify-content:定義子項(xiàng)在主軸上的對齊方式 flex-start左對齊 flex-end右對齊 center水平居中 space-between每項(xiàng)間隔相等不循環(huán) space-around每項(xiàng)間隔相等循環(huán)5.align-items:交叉軸對齊方式flex-start上對齊 flex-end下對齊 center垂直居中 baseline: 項(xiàng)目的第一行文字的基線對齊stretch（默認(rèn)值）：如果項(xiàng)目未設(shè)置高度或設(shè)為auto，將占滿整個容器的高度6.align-content:多根軸線的對齊方式2個項(xiàng)目屬性1.order：數(shù)值越小，排列越靠前，默認(rèn)為02.align-self：允許容器中某個項(xiàng)目有與其他項(xiàng)目不一樣的對齊方式，auto,flex-start,flex-end,center,baseline,stretch2.元素尺寸或自適應(yīng)能力：由4個項(xiàng)目屬性控制flex-grow:剩余空間放大比例flex-shrink:空間不足縮小比例flex-basis:分配多余空間之前項(xiàng)目占據(jù)的主軸空間flex:flex-grow flex-shrink flex-basis代碼：<!DOCTYPE html><html> <style> body{ display: flex; flex-direction: column; } #header,#footer{ flex:0 0 30px; background-color: hotpink; } #center { display: flex; /* flex:1 == 1 1 auto auto指的是項(xiàng)目本來大小，因未給center設(shè)置高度,center高度由子元素最高者決定 flex-direction默認(rèn)為row */ flex:1; } #dyleft, #dyright { flex: 0 0 100px; height: 300px; background-color: pink; } #dyleft{ order: -1; } #dycenter { flex: 1; height: 600px; background-color: yellow; } </style> <body> <div id="header">頭部</div> <div id="center"> <div id="dycenter">dycenter</div> <div id="dyleft">左欄div</div> <div id="dyright">右欄divx</div> </div> <div id="footer">尾部</div> </body></html>二、使用float實(shí)現(xiàn)此布局<!DOCTYPE html><html> <style> #header{ height: 50px; background-color: hotpink; } #center { padding:0 200px 0 180px; height:100px; } #dyleft{ float:left; margin-left:-100%; /*中間欄的位置擺正之后，左欄的位置也相應(yīng)右移，通過相對定位的left恢復(fù)到正確位置*/ position:relative; left:-180px; width:180px; height:100px; background-color: #0c9; } #dyright { float:left; margin-left:-200px; position: relative; /*中間欄的位置擺正之后，右欄的位置也相應(yīng)左移，通過相對定位的right恢復(fù)到正確位置*/ right:-200px; width:200px; height:100px; background-color: #0c9; } #dycenter { float:left; width:100%;/*左欄上去到第一行*/ height:100px; background-color: yellow; } #footer{ clear: both; height:50px; background-color: hotpink; } </style> <body> <div id="header">頭部</div> <div id="center"> <div id="dycenter">dycenter</div> <div id="dyleft">左欄div</div> <div id="dyright">右欄divx</div> </div> <div id="footer">尾部</div> </body></html>雙飛翼布局：為了中間div內(nèi)容不被遮擋，直接在中間div內(nèi)部創(chuàng)建子div用于放置內(nèi)容，在該子div里用margin-left和margin-right為左右兩欄div留出位置。<!DOCTYPE html><html> <style> #header{ height: 50px; background-color: hotpink; } #center { height:100px; } #dyleft{ float:left; margin-left:-100%; width:180px; height:100px; background-color: #0c9; } #dyright { float:left; margin-left:-200px; position: relative; width:200px; height:100px; background-color: #0c9; } #dycenter { float:left; width:100%; height:100px; background-color: yellow; } #inside { margin:0 200px 0 180px; } #footer{ clear: both; height:50px; background-color: hotpink; } </style> <body> <div id="header">頭部</div> <div id="center"> <div id="dycenter"> <div id="inside">dycenter</div> </div> <div id="dyleft">左欄div</div> <div id="dyright">右欄divx</div> </div> <div id="footer">尾部</div> </body></html>[css] 第1天 圣杯布局和雙飛翼布局的理解和區(qū)別，并用代碼實(shí)現(xiàn) · Issue #2 · haizlin/fe-interview關(guān)鍵詞：實(shí)戰(zhàn),布局
客戶&案例
營銷資訊
關(guān)于我們
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
