時(shí)間：2023-09-19 08:36:01 | 來源：網(wǎng)站運(yùn)營
時(shí)間：2023-09-19 08:36:01 來源：網(wǎng)站運(yùn)營
給你一份詳細(xì)的CSS布局指南，請查收：在我們前端開發(fā)過程中，寫
在線咨詢
css（包括sass, less, stylus這樣的預(yù)處理器）進(jìn)行設(shè)計(jì)稿的樣式還原是一項(xiàng)重要的工作，而其中，關(guān)于頁面布局的部分，又是書寫樣式代碼時(shí)候的重點(diǎn)和難點(diǎn)，這篇文章就盡可能的去總結(jié)常見的一些頁面布局實(shí)現(xiàn)方案(并不是全部，布局實(shí)現(xiàn)方法太多了)，希望能夠?qū)Υ蠹矣兴鶐椭?br>css布局中遇到的一個(gè)繞不開的問題就是瀏覽器兼容性，下面方案會遇到類似transform, flex等的兼容性問題，且由于grid布局兼容性問題，暫不涉及grid布局內(nèi)容，在不同場景，大家選擇合適的布局實(shí)現(xiàn)方案即可。inline-block + text-aligndisplay設(shè)置為inline-block的元素，具有文本元素的性質(zhì)，其父元素可以通過設(shè)置文本對齊屬性text-align來控制其在行內(nèi)的對齊方式，text-align: center即為水平對齊text-align屬性是具有繼承性的，會導(dǎo)致自己元素內(nèi)部的文本也是居中顯示的，需要自身設(shè)置text-align覆蓋<style> .wrap { width: 100%; height: 200px; background-color: aqua; text-align: center; } .content { width: 200px; height: 200px; background-color: blueviolet; display: inline-block; }</style><body> <div class="wrap"> <div class="content"></div> </div></body>transformabsolute后，left設(shè)置為50%，再使用transform: translateX(-50%)將子元素往反方向移動自身寬度的50%，便完成水平居中。transform是css3屬性，存在瀏覽器兼容問題<style> .wrap { position: relative; width: 100%; height: 200px; background-color: aqua; } .content { position: absolute; left: 50%; transform: translateX(-50%); width: 200px; height: 200px; background-color: blueviolet; }</style><body> <div class="wrap"> <div class="content"></div> </div></body>display: block + margin: 0 autodisplay為block或者table都是可以的，如果子元素脫離文檔流（浮動，定位），會導(dǎo)致margin屬性的值無效。<style> .wrap { width: 100%; height: 200px; background-color: aqua; } .content { width: 200px; height: 200px; background-color: blueviolet; display: table; margin: 0 auto; }</style><body> <div class="wrap"> <div class="content"></div> </div></body>transform<style> .wrap { position: relative; width: 200px; height: 600px; background-color: aqua; } .content { position: absolute; top: 50%; transform: translateY(-50%); width: 200px; height: 200px; background-color: blueviolet; }</style><body> <div class="wrap"> <div class="content"></div> </div></body>display: table-cell + vertical-aligndisplay: table-cell的元素具有td元素的行為，它的子元素布局方式類似文本元素，可以在父元素使用vertical-align: middle;實(shí)現(xiàn)子元素的垂直居中。vertical-align屬性具有繼承性，導(dǎo)致父元素內(nèi)文本也是垂直居中顯示的。<style> .wrap { display: table-cell; vertical-align: middle; width: 200px; height: 600px; background-color: aqua; } .content { width: 200px; height: 200px; background-color: blueviolet; }</style><body> <div class="wrap"> <div class="content"></div> </div></body>transform<style> .wrap { position: relative; width: 1200px; height: 800px; background-color: aqua; } .content { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 200px; height: 200px; background-color: blueviolet; }</style><body> <div class="wrap"> <div class="content"></div> </div></body> 方案二. 結(jié)合水平布局方案三，垂直布局方案二<style> .wrap { display: table-cell; vertical-align: middle; width: 1200px; height: 800px; background-color: aqua; } .content { margin: 0 auto; width: 200px; height: 200px; background-color: blueviolet; }</style><body> <div class="wrap"> <div class="content"></div> </div></body>flex進(jìn)行居中布局flex，水平垂直居中會變得非常容易，默認(rèn)情況下，align-items: center垂直居中（交叉軸排列方式），justify-content: center水平居中（主軸排列方式） 注意：需要考慮瀏覽器兼容性問題。<style> .wrap { display: flex; align-items: center; justify-content: center; width: 1200px; height: 800px; background-color: aqua; } .content { width: 200px; height: 200px; background-color: blueviolet; }</style> <body> <div class="wrap"> <div class="content"></div> </div> </body>margin-leftmargin-left設(shè)置為左邊元素寬度大小，可以實(shí)現(xiàn)效果。<style> .l, .r { height: 600px; } .l { width: 400px; background-color: aqua; float: left; } .r { background-color: blueviolet; margin-left: 400px; }</style><body> <div class="l">定寬</div> <div class="r">自適應(yīng)</div></body>overflow:hiddenoverflow:hidden開啟BFC，與外界隔離，所以能實(shí)現(xiàn)效果overflow:hidden的設(shè)置也使得右邊元素內(nèi)容超出隱藏。這里如果不設(shè)置overflow:hidden，右邊元素的寬度是100%，有一部分被左邊浮動元素蓋住，不是我們要的結(jié)果，雖然看起來沒什么區(qū)別。<style> .l, .r { height: 600px; } .l { width: 400px; background-color: aqua; float: left; } .r { background-color: blueviolet; overflow: hidden; }</style><body> <div class="l">定寬</div> <div class="r">自適應(yīng)</div></body>display:table的元素包裹，左右元素設(shè)置為display: table-cell<style> .w { display: table; table-layout: fixed; width: 100%; } .l, .r { display: table-cell; height: 600px; } .l { width: 400px; background-color: aqua; } .r { background-color: blueviolet; }</style><body> <div class="w"> <div class="l">定寬</div> <div class="r">自適應(yīng)</div> </div></body>flex布局flex布局，左邊元素定寬之后，右邊元素，因?yàn)橹挥幸粋€(gè)，所以flex屬性設(shè)置為不是0的正值（也就是設(shè)置flex-grow），都會占滿剩余空間。 <style> .p { display: flex; height: 600px; } .l { background-color: aqua; width: 400px; } .r { flex: 1; background-color: blueviolet; }</style> <body> <div class="p"> <div class="l">定寬</div> <div class="r">自適應(yīng)</div> </div> </body>兩者都是實(shí)現(xiàn)一個(gè)兩側(cè)寬度固定，中間寬度自適應(yīng)的三列布局，區(qū)別在于雙飛翼布局比起圣杯布局，中間元素會多一個(gè)子元素，而左右元素需要定位relative）overflow:hidden<style> .l, .c, .r { height: 600px; } .l { width: 400px; background-color: aqua; float: left; } .c { width: 400px; background-color: blueviolet; float: left; } .r { background-color: brown; overflow: hidden; }</style><body> <div class="l">定寬</div> <div class="c">定寬</div> <div class="r">自適應(yīng)</div></body>flex布局flex布局方式是相同的。<style> .w { display: flex; height: 600px; } .l { width: 400px; background-color: aqua; } .c { width: 400px; background-color: blueviolet; } .r { flex: 1; background-color: brown; }</style> <body> <div class="w"> <div class="l">定寬</div> <div class="c">定寬</div> <div class="r">自適應(yīng)</div> </div> </body>中間元素不需要嵌套子元素）marginmargin空出左右兩邊元素的位置，實(shí)現(xiàn)比較簡單。html結(jié)構(gòu)時(shí)，將右側(cè)元素寫在中間元素的前面，因?yàn)槿绻覀?cè)元素在中間元素后面，由于浮動元素位置上不能高于（或平級）前面的非浮動元素，導(dǎo)致右側(cè)元素會下沉。但是，中間元素一般都是頁面的核心部分，放在比較后面的位置，不利于SEO。<style> .l, .c, .r { height: 600px; } .l { width: 400px; background-color: aqua; float: left; } .c { background-color: blueviolet; margin-left: 400px; margin-right: 400px; } .r { width: 400px; background-color: brown; float: right; }</style><body> <div class="l">定寬</div> <div class="r">定寬</div> <div class="c">自適應(yīng)</div></body>margin，左中右元素均浮動，利用定位和margin移動到正確位置SEO。<style> .w { /* margin-left對應(yīng)左邊元素l的寬度，margin-right對應(yīng)右邊元素r的寬度 */ margin-left: 400px; margin-right: 400px; } .l, .c, .r { height: 600px; float: left; } .l { width: 400px; background-color: aqua; position: relative; /* 為了讓l元素從當(dāng)前行移動到第一行同一位置*/ margin-left: -100%; /* 移動到中間元素左側(cè)正確位置 */ left: -400px; } .c { width: 100%; background-color: blueviolet; } .r { width: 400px; background-color: brown; position: relative; /* 為了讓l元素從當(dāng)前行移動到上一行*/ margin-left: -400px; right: -400px; }</style><body> <div class="w"> <div class="c">自適應(yīng)</div> <div class="l">定寬</div> <div class="r">定寬</div> </div></body>中間元素內(nèi)部增加子元素用于放置內(nèi)容）margin，左中右元素均設(shè)置浮動，左右元素通過margin移動到正確位置margin完成。<style> .l, .c, .r { height: 600px; float: left; } .l { width: 400px; background-color: aqua; /* 為了讓l元素從當(dāng)前行移動到第一行同一位置*/ margin-left: -100%; } .c { width: 100%; background-color: blue; } .i { height: 600px; background-color: blueviolet; margin-left: 400px; margin-right: 400px; } .r { width: 400px; background-color: brown; /* 為了讓r元素移動到第一行*/ margin-left: -400px; }</style><body> <div class="c"> <div class="i">自適應(yīng)</div> </div> <div class="l">定寬</div> <div class="r">定寬</div></body>flex布局實(shí)現(xiàn)（中間自適應(yīng)，左右等寬）flex實(shí)現(xiàn)就很簡單了，可以參照普通三列布局flex實(shí)現(xiàn)。<style> .w { display: flex; height: 600px; } .l { width: 400px; background-color: aqua; } .c { flex: 1; background-color: blueviolet; } .r { width: 400px; background-color: brown; }</style><body> <div class="w"> <div class="l">定寬</div> <div class="c">自適應(yīng)</div> <div class="r">定寬</div> </div></body><style> .col { float: left; width: 20%; height: 300px; } .col1 { background-color: blue; } .col2 { background-color: blueviolet; } .col3 { background-color: aqua; } .col4 { background-color: beige; } .col5 { background-color: salmon; }</style><body> <div class="w"> <div class="col col1"></div> <div class="col col2"></div> <div class="col col3"></div> <div class="col col4"></div> <div class="col col5"></div> </div></body>display: table布局display: table，設(shè)置布局行為table-layout: fixed，指定每個(gè)表格等寬。table-layout: fixed是需要設(shè)置的，默認(rèn)情況下，列寬度由單元格內(nèi)容設(shè)定，設(shè)置之后，列寬由表格寬度和列寬度設(shè)定。<style> .w { display: table; /* 列寬由表格寬度和列寬度設(shè)定 */ table-layout: fixed; width: 100%; } .col { display: table-cell; height: 300px; } .col1 { background-color: blue; } .col2 { background-color: blueviolet; } .col3 { background-color: aqua; } .col4 { background-color: beige; } .col5 { background-color: salmon; }</style><body> <div class="w"> <div class="col col1"></div> <div class="col col2"></div> <div class="col col3"></div> <div class="col col4"></div> <div class="col col5"></div> </div></body>column布局column布局，指定內(nèi)容區(qū)域需要分為5列即可。<style> .w { /* 指定列數(shù) */ column-count: 5; /* 指定列與列之間的間隙，默認(rèn)1em */ column-gap: 0; } .col { height: 300px; } .col1 { background-color: blue; } .col2 { background-color: blueviolet; } .col3 { background-color: aqua; } .col4 { background-color: beige; } .col5 { background-color: salmon; }</style> <body> <div class="w"> <div class="col col1"></div> <div class="col col2"></div> <div class="col col3"></div> <div class="col col4"></div> <div class="col col5"></div> </div> </body>flex布局flex布局十分簡單，指定每一列所占空間相同即可<style> .w { display: flex; } .col { height: 300px; flex: 1; } .col1 { background-color: blue; } .col2 { background-color: blueviolet; } .col3 { background-color: aqua; } .col4 { background-color: beige; } .col5 { background-color: salmon; }</style> <body> <div class="w"> <div class="col col1"></div> <div class="col col2"></div> <div class="col col3"></div> <div class="col col4"></div> <div class="col col5"></div> </div> </body> </html>這個(gè)高度應(yīng)該由內(nèi)容最多的那一列決定。display: table布局display: table，子元素設(shè)置display: table-cell，這樣布局就是按照表格行為布局，表格單元格默認(rèn)等高。<style> .w { display: table; } .col { display: table-cell; width: 20%; } .col1 { background-color: blue; } .col2 { background-color: blueviolet; } .col3 { background-color: aqua; } .col4 { background-color: beige; } .col5 { background-color: salmon; }</style> <body> <div class="w"> <div class="col col1">啊啊啊啊啊啊啊啊啊啊啊啊</div> <div class="col col2">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div> <div class="col col3">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div> <div class="col col4"></div> <div class="col col5">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div> </div> </body>flex布局display: flex的元素align-items屬性值為stretch，如果項(xiàng)目未設(shè)置高度或設(shè)為auto，將占滿整個(gè)容器的高度。<style> .w { display: flex; } .col { flex: 1; } .col1 { background-color: blue; } .col2 { background-color: blueviolet; } .col3 { background-color: aqua; } .col4 { background-color: beige; } .col5 { background-color: salmon; }</style> <body> <div class="w"> <div class="col col1">啊啊啊啊啊啊啊啊啊啊啊啊</div> <div class="col col2">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div> <div class="col col3">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div> <div class="col col4"></div> <div class="col col5">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div> </div> </body>header, footer標(biāo)簽，內(nèi)容區(qū)域結(jié)構(gòu)與布局都是多種多樣的。 <style> html, body { margin: 0; overflow: hidden; } .header { position: fixed; left: 0; top: 0; right: 0; height: 100px; background-color: salmon; } .w { position: fixed; left: 0; right: 0; top: 100px; bottom: 100px; overflow: auto; background-color: palevioletred; } .w .l { width: 400px; /* height: 100%; */ position: fixed; left: 0; top: 100px; bottom: 100px; background-color: greenyellow; } .w .r { position: fixed; left: 400px; right: 0; top: 100px; bottom: 100px; background-color: blueviolet; } .footer { position: fixed; left: 0; right: 0; bottom: 0; height: 100px; background-color: goldenrod; }</style> <body> <div class="header"></div> <div class="w"> <div class="l"></div> <div class="r"></div> </div> <div class="footer"></div> </body>本篇文章總結(jié)了一些常見布局的實(shí)現(xiàn)方案，css布局的實(shí)現(xiàn)方案很多，需要我們平時(shí)多去積累，選擇合適的方案。原作者姓名：catboy
原出處：https://juejin.im/post/5e91a8a56fb9a03c9037928f
原文鏈接：https://juejin.im/post/5e91a8a56fb9a03c9037928f
關(guān)鍵詞：指南,布局,詳細(xì)
客戶&案例
營銷資訊
關(guān)于我們
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
