關(guān)于CSS布局和居中的總結(jié)

CSS布局

一個元素在頁面中一般有4種狀態(tài):

  • 普通文檔流(默認(rèn)值)
  • 使用了float的浮動
  • relative或者absoult的定位, 相對于瀏覽器的flexd燎斩。

CSS定位只要依靠position屬性實現(xiàn)原环,該屬性有四個值:

float:

設(shè)置元素浮動涌萤, 該元素將脫離普通文檔流号坡。直到外邊緣或者另一個浮動塊的邊緣买羞。
注意爷光,浮動對于普通流元素會形成一個擠壓的狀態(tài)峻贮, 比如<a></a><div></div> 這樣一個布局席怪,
如果設(shè)置div元素浮動,那么a元素就會被擠壓到div元素的后面去纤控。
同時挂捻,float元素的尺寸講不會計入父元素的尺寸中, 所以船万, 這里就涉及到一個清除浮動的概念:
清楚浮動的幾種做法:
1.父元素設(shè)置ovflow:hidden;
2.在需要清除浮動的底部加一個div標(biāo)簽刻撒, 同時,將這個標(biāo)簽clear:both;
3.使用偽類清楚浮動:在父元素上添加一個clear類 同時耿导,講該類設(shè)置成:

            {
              clear: both;
              content: " ";
              display: block;
              height: 0;
             visibility: hidden;
          }
ralative

相對定位原有位置不脫離普通文檔流声怔,相對自己原有的位置進(jìn)行定位。

absolute

絕對定位舱呻, 脫離原有定位醋火,相對于祖先中,已經(jīng)定位的元素(相對和絕對)進(jìn)行定位箱吕。

flexd

相對于瀏覽器定位芥驳, 不會隨著滾動條滾動。
z-index: 對于relatvie absolute fixed 可以設(shè)置堆疊順序茬高。 值越大越在上面兆旬。

CSS中水平和垂直居中

水平居中:

1)行框: 只需要在父級元素中設(shè)置 text-align:center;
2)塊級框:父級元素 margin:0 aoto;或者設(shè)置父級框 text-align:center;

垂直居中:
  1. 單行框:一般設(shè)置子元素 height 和 line-height一致就可以實現(xiàn)。

  2. 多級行框: 借助vertical-align: middle; 實現(xiàn).

  3. 塊級框:
    a)知道height :子元素設(shè)置為

     position: absolute;
     top: 50%; 
     height: 100px; 
     margin-top: -50px;
    

b)不知道height:子元素設(shè)置為:
position: absolute;
top: 50%;
transform: translateY(-50%);

3.于此同時怎栽, 設(shè)置合適的內(nèi)邊距也可以實現(xiàn)垂直和水平居中丽猬。
4.flex布局對于實現(xiàn)垂直居中更加簡潔方便。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末婚瓜,一起剝皮案震驚了整個濱河市宝鼓,隨后出現(xiàn)的幾起案子刑棵,更是在濱河造成了極大的恐慌巴刻,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,865評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件蛉签,死亡現(xiàn)場離奇詭異胡陪,居然都是意外死亡沥寥,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,296評論 3 399
  • 文/潘曉璐 我一進(jìn)店門柠座,熙熙樓的掌柜王于貴愁眉苦臉地迎上來邑雅,“玉大人,你說我怎么就攤上這事妈经』匆埃” “怎么了?”我有些...
    開封第一講書人閱讀 169,631評論 0 364
  • 文/不壞的土叔 我叫張陵吹泡,是天一觀的道長骤星。 經(jīng)常有香客問我,道長爆哑,這世上最難降的妖魔是什么洞难? 我笑而不...
    開封第一講書人閱讀 60,199評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮揭朝,結(jié)果婚禮上队贱,老公的妹妹穿的比我還像新娘。我一直安慰自己潭袱,他們只是感情好柱嫌,可當(dāng)我...
    茶點故事閱讀 69,196評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著屯换,像睡著了一般慎式。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上趟径,一...
    開封第一講書人閱讀 52,793評論 1 314
  • 那天瘪吏,我揣著相機與錄音,去河邊找鬼蜗巧。 笑死掌眠,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的幕屹。 我是一名探鬼主播蓝丙,決...
    沈念sama閱讀 41,221評論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼望拖!你這毒婦竟也來了渺尘?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,174評論 0 277
  • 序言:老撾萬榮一對情侶失蹤说敏,失蹤者是張志新(化名)和其女友劉穎鸥跟,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,699評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡医咨,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,770評論 3 343
  • 正文 我和宋清朗相戀三年枫匾,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片拟淮。...
    茶點故事閱讀 40,918評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡干茉,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出很泊,到底是詐尸還是另有隱情角虫,我是刑警寧澤,帶...
    沈念sama閱讀 36,573評論 5 351
  • 正文 年R本政府宣布委造,位于F島的核電站上遥,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏争涌。R本人自食惡果不足惜粉楚,卻給世界環(huán)境...
    茶點故事閱讀 42,255評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望亮垫。 院中可真熱鬧模软,春花似錦、人聲如沸饮潦。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,749評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽继蜡。三九已至回俐,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間稀并,已是汗流浹背仅颇。 一陣腳步聲響...
    開封第一講書人閱讀 33,862評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留碘举,地道東北人忘瓦。 一個月前我還...
    沈念sama閱讀 49,364評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像引颈,于是被迫代替她去往敵國和親耕皮。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,926評論 2 361

推薦閱讀更多精彩內(nèi)容