用CSS實(shí)現(xiàn)幾種常見布局

左右布局

左右布局只要使左邊的塊級(jí)元素向左浮動(dòng)，右邊的向右浮動(dòng)即可。但要記得因?yàn)樽釉馗?dòng)會(huì)造成父元素的高度坍塌，所以需要在父元素上使用.clearfix:after清除浮動(dòng)。

左右1.jpg

左右2.jpg

左中右布局

左中右布局比左右布局多了中間一個(gè)元素，那么就只能全部向左浮動(dòng)了。這里為了演示令三個(gè)元素?fù)碛型瑯拥膶挾?，?shí)際使用需要根據(jù)內(nèi)容添加margin。同樣需要為父元素清除浮動(dòng)。

左中右1.jpg

左中右2.jpg

水平居中

  • 內(nèi)聯(lián)元素
    要使內(nèi)聯(lián)元素居中，為父元素添加text-align:center即可。

    水平居中-內(nèi)聯(lián).jpg

  • 塊級(jí)元素

  1. 不固定寬度
    要使不固定寬度的塊級(jí)元素居中，需要為父元素添加左右相等的padding。

    水平居中-塊級(jí)-不固定寬.jpg

  2. 固定寬度
    要使固定寬度的塊級(jí)元素居中，讓這個(gè)元素自動(dòng)計(jì)算水平方向的margin的值即可，左右margin值會(huì)相等。

    水平居中-塊級(jí)-固定寬.jpg

垂直居中

  • 內(nèi)聯(lián)元素
    要使內(nèi)聯(lián)元素垂直居中，需要為父元素添加上下相等的padding。
    垂直居中-內(nèi)聯(lián).jpg
  • 塊級(jí)元素
    塊級(jí)元素的垂直居中復(fù)雜一些，需要使用絕對定位，使它自己的頂部距離父元素頂部50%的距離，再使用tranform: translateY(-50%)使它自己向上縮進(jìn)自身高度的50%以實(shí)現(xiàn)視覺上的居中。
    垂直居中-塊級(jí).jpg
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 一、前言 HTML常用標(biāo)簽有 、 、 和 以及 、 、 和 等。雖然標(biāo)簽種類繁多，但通常分為兩類：塊級(jí)元素（blo...
    JaniceZD閱讀 794評論 3贊 3
  • 本文主要講述頁面布局樣式方面涉及的知識(shí)點(diǎn)，更全面的對CSS相應(yīng)的技術(shù)進(jìn)行歸類、整理、說明，沒有特別詳細(xì)的技術(shù)要點(diǎn)說...
    Joel_zh閱讀 1,163評論 0贊 1
  • 水平居中(1)內(nèi)聯(lián)元素 (2)塊級(jí)元素 (3)多個(gè)塊級(jí)元素第一種方法：我們將多個(gè)塊級(jí)元素運(yùn)用display：inl...
    Jason_Shu閱讀 200評論 0贊 0
  • 一，css常見問題： 一、margin問題 上下margin重疊問題，即給相鄰的兩個(gè)div設(shè)置margin-bot...
    _往后_閱讀 1,710評論 0贊 2
  • 1. 前言 前端圈有個(gè)“?！保涸诿嬖嚂r(shí)，問個(gè)css的position屬性能刷掉一半人，其中不乏工作四五年的同學(xué)。在...
    YjWorld閱讀 4,912評論 5贊 15

友情鏈接更多精彩內(nèi)容