当前位置: 首页 > Web前端 > CSS

典型的前端布局方案

时间:2023-03-31 02:05:33 CSS

鏈枃涓昏鎽樿嚜缃戞槗浜戣鍫?鍓嶇寰笓涓氶〉闈㈠埗浣済ithub鐩稿叧浠g爜锛歨ttps://github.com/Mirror1988...馃挭甯冨眬瑙e喅鏂规灞呬腑甯冨眬姘村钩灞呬腑鐖跺厓绱犲瓙鍏冪礌瀹藉害鍙彉demo

inline-block+text-align.parent1{text-align:center;}.child1{display:inline-鍧?}table+margin.parent2{}.child2{display:table;margin:0auto;}absolute+transform.parent3{position:relative;}.child3{position:absolute;left:50%;transform:translateX(-50%);}flex+justify-content.parent4{display:flex;justify-content:center;}鍨傜洿灞呬腑鐖跺厓绱犻珮搴︼紝瀛愬厓绱犲彲鍙榯able-cell+vertical-align.parent5{display:table-cell;vertical-align:middle;}absolute+transform.parent6{position:relative;}.child6{position:absolute;transform:translateY(-50%);top:50%;}flex+align-items.parent7{display:flex;align-items:center;}姘村钩鍜屽瀭鐩村眳涓璱nline-block+text-align+table-cell+vertical-align.parentT{height:200px;background-color:#ccc;width:500px;}.parent8{text-align:涓績锛涙樉绀猴細琛ㄦ牸鍗曞厓鏍硷紱vertical-align:middle;}.child8{display:inline-block;}absolute+transform.parent9{position:relative;}.child9{position:absolute;transform:translate(-50%,-50%);top:50%;left:50%;}flex+justify-content+align-items.parent10{display:flex;align-items:center;justify-content:center;}澶氬垪甯冨眬鍥哄畾瀹藉害+鑷€傚簲left

right

right

right

p>
float+margin锛堥棶棰橈細鏂囨。娴佸悜宸︽诞鍔級銆俵eft1{float:left;width:100px;}.right1{margin-left:120px}float+overflow锛堥棶棰橈細宸︽诞鍔ㄨ秴鍑烘枃妗f祦锛?left2{float:left;width:100px}.right2{overflow:hidden;}table(鍙互瀹炵幇宸﹀彸绛夐珮).left3{display:table-cell;width:100px;table-layout:fixed;}.right3{display:table-cell}flex(鍙互瀹炵幇宸﹁竟绛夐珮andright).parent4{display:flex}.left4{width:100px;margin-right:10px}.right4{flex:1;}鍙彉瀹藉害+鑷€傚簲娴姩+婧㈠嚭.left5{float:left;}.right5{婧㈠嚭:hidden;}table.parent6{display:table;width:100%}.left6{display:table-cell;width:0.1%;}.right6{display:table-cell}flex.parent7{display:flex}.left7{margin-right:10px}.right7{flex:1;}绛夊垎甯冨眬

column

column

column

column

float骞朵笉鎯?parent8{margin-left:-20px;}.column8{float:left;width:25%;padding-right:20px;box-sizing:border-box;}flex.parent9{display:flex}.column9{flex:1;}.column9+.column9{margin-left:20px;}绛夐珮甯冨眬table.parent10{display:table;width:100%;table-layout:fixed}.left10{display:table-cell;width:100px;}.right10{display:table-cell}flex.parent11{display:flex}.left11{margin-right:10px}.right11{flex:1;}float.parent12{婧㈠嚭锛氶殣钘忥紱}.left12{float:left;margin-right:10px}.right12{overflow:hidden}.left12,.right12{padding-bottom:9999px;margin-bottom:-9999px}鍏ㄥ眬甯冨眬positiontopleft

搴曢儴

搴曢儴

搴曢儴

搴曢儴

搴曢儴

搴曢儴

搴曢儴

搴曢儴

搴曢儴

搴曢儴.wrap{width:95%;height:500px;border:2pxdashed#333;margin:0auto;color:#fff;}.parent{width:100%;height:100%;}.top{height:50px;background-color:#ccc}.bottom{height:50px;background-color:#ccc}.left{background-color:#cf1200}.right{background-color:#4a7fc0;overflow:auto}.parent1{position:relative;}.top1{position:absolute;top:0;left:0;right:0}.bottom1{position:absolute;bottom:0;left:0;right:0}.left1{position:absolute;width:100px;top:50px;bottom:50px;}.right1{position:absolute;top:50px;bottom:50px;left:100px;right:0}flextopleft200px

搴曢儴

搴曢儴

搴曢儴

搴曢儴

搴曢儴

搴曢儴

搴曢儴

搴曢儴

搴曢儴

搴曢儴

搴曢儴

搴曢儴

搴曢儴

搴曢儴

搴曢儴

p>搴曢儴/*flex*/.parent2{display:flex;flex-direction:column;}.middle2{flex:1;display:flex}.left2{width:200px;}.right2{flex:1;}vh涔熷彲浠ラ€氳繃flex瀹炵幇鍏ㄥ睆甯冨眬vh鍗曞厓涓婇潰鐨勫竷灞€鍙互閫氳繃flex鏉ュ疄鐜般€傚脊鎬у竷灞€