前端开发常用布局
时间：2023-03-28 16:28:31
HTML
鍓嶇寮€鍙戝線寰€闇€瑕佹垜浠湪椤甸潰鏋勫缓鐨勫墠鏈熷氨鏈変竴涓€濈淮妗嗘灦锛屾寜鐓ц璁″浘鍒掑垎椤甸潰缁撴瀯锛屽鐞嗗ソ涓嶅悓灏哄璁惧涔嬮棿鐨勫樊寮傘€傛帉鎻′竴浜涘父鐢ㄧ殑甯冨眬鍙互璁╂垜浠簨鍗婂姛鍊嶃€傛湰鏂囧皢璁ㄨ灞呬腑甯冨眬銆傛枃鏈眳涓榻愭爣棰樹腑鎻愬埌鐨勫眳涓榻愭槸鎸嘾iv涓殑鏂囨湰鍦ㄦ按骞冲拰鍨傜洿鏂瑰悜涓婇兘灞呬腑銆傚亣璁炬湁濡備笅DOM缁撴瀯锛?divclass="wrap">Alignment:姘村钩鍜屽瀭鐩村眳涓?/span>
鏍峰紡浠ｇ爜濡備笅锛?wrap{height:100px;border:2pxsolidblueviolet;}in娴忚鍣ㄤ腑鐨勬覆鏌撴晥鏋滃涓嬶細鎴戜滑浣跨敤css鏍峰紡涓€姝ユ瀹炵幇灞呬腑瀵归綈鐨勬晥鏋溿€傛枃鏈按骞冲眳涓槸涓€涓緢鍩虹鐨勫墠绔煡璇嗐€備綘鍙渶瑕佸湪鏍峰紡涓坊鍔爐ext-align:center.wrap{height:100px;杈规锛?px绾摑绱壊锛泃ext-align:center;}娴忚鍣ㄧ粨鏋滐細鏂囨湰鍨傜洿灞呬腑銆傜幇鍦ㄩ渶瑕佹洿鏀归渶姹傘€傛枃鏈渶瑕佸湪瀹瑰櫒涓瀭鐩村眳涓€傛垜搴旇鎬庝箞鍔烇紵浣跨敤杈硅窛杩樻槸濉厖锛熻繕鏄娇鐢ㄥ畾浣嶏紵鍙兘杩樹笉澶熷ソ銆傚叾瀹炲氨鏄姞涓€琛屾牱寮弆ine-height:100px.wrap{height:100px;杈规锛?px绾摑绱壊锛涙枃鏈榻愶細灞呬腑锛沴ine-height:100px;}Browserresult:鍙锛屽彧鏄缃簡涓€涓鍣ㄨ褰?height涓巋eight涓€鏍峰ぇ鏃讹紝閲岄潰鐨勬枃瀛楀彲浠ュ瀭鐩村眳涓€傛灞炴€т篃閫傜敤浜庡叾浠栨爣绛撅紝渚嬪鏍囩銆傚綋缂栧啓鎸夐挳鏍峰紡鏃舵寜閽枃鏈渶瑕佸眳涓椂寰堟湁鐢ㄣ€傚潡鍏冪礌灞呬腑瀵归綈鑰冭檻濡備笅DOM缁撴瀯
鍧楀厓绱狅細鍨傜洿灞呬腑瀵归綈 鏍峰紡浠ｇ爜濡備笅锛屽叾涓祻瑙堝櫒鏁堟灉濡傚浘銆俻arent02{楂樺害锛?00px锛沚order:2pxsolidrgba(13,202,240,.8);}.child01{background-color:rgb(48,245,245);瀹藉害锛?0%锛沨eight:50%;}horizo鈥嬧€媙talcenteralignmentonlyAddalinemargin:0autoto.child01tocenterhorizo鈥嬧€媙tally.child01{background-color:rgb(48,245,245);}瀹藉害锛?0%锛涢珮搴︼細50%锛沵argin:0auto;}鍨傜洿灞呬腑骞朵粩缁嗗榻愪綘鍙兘宸茬粡娉ㄦ剰鍒颁笂闈㈢殑.child01鐨勯珮搴﹁缃负parent鐨?0%銆傛垜浠彲浠ヨ缃畠鐨刾arent02鐨刴argin-top鎴栬€卲adding-top鏉ヨ揪鍒板瀭鐩村眳涓殑鐩殑锛屼絾鏄鏋?parent02鍜?child01鐨勯珮搴﹂兘涓嶇‘瀹氬憿锛熸亹鎬曚綘闇€瑕佷笉鏂慨鏀规牱寮忋€傝繖鏃跺€檉lex甯冨眬灏辨淳涓婄敤鍦轰簡锛屽彧瑕佽缃湪parent绾у埆锛屾坊鍔犱笅闈袱琛岋紝涓嶇.parent02鍜?child01鐨勯珮搴︽€庝箞鍙樺寲锛岄兘鍙互淇濇寔灞呬腑銆俻arent02{楂樺害锛?00px锛涜竟妗嗭細2px瀹炲績rgba(13,202,240,.8)锛涙樉绀猴細寮规€э紱align-items:center;}澶у姛鍛婃垚锛佽嚦姝わ紝鏈枃瑕佽鐨勫眳涓竷灞€灏卞憡涓€娈佃惤浜嗐€傝鎴戜滑鍥為【涓€涓嬩富瑕佺殑鍏抽敭鐐广€備娇鐢╰ext-align鍜宭ine-height浣挎枃鏈眳涓€備娇鐢╩argin:0auto鍜宖lex浣挎枃鏈眳涓€傚笇鏈涜繖绡囨枃绔犺兘甯埌浣燸_^鏂囩珷棣栧彂浜嶪ICOOM-涓汉鍗氬|鎶€鏈崥瀹㈠墠绔紑鍙慍ommonLayout馃敆
