css布局的方法有哪些

發(fā)布時(shí)間：2022-03-11 14:46:57 來源：億速云閱讀：109 作者：iii 欄目：web開發(fā)

本篇內(nèi)容主要講解“css布局的方法有哪些”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“css布局的方法有哪些”吧!

設(shè)置元素的現(xiàn)實(shí)方式

display：block

默認(rèn)寬度為父級(jí)元素寬度

可設(shè)置寬高

換行顯示

display：inline

默認(rèn)寬度為內(nèi)容寬度

不可設(shè)置寬高

同行顯示

display：inline-block

默認(rèn)寬度為內(nèi)容寬度

可以設(shè)置高寬

同行顯示

整塊換行，inline行間換行

默認(rèn)標(biāo)簽有表單標(biāo)簽

display：none

設(shè)置元素不顯示

與visibility：hidden的區(qū)別

visibility：hidden僅僅隱藏元素不可見，但是后面元素不能占據(jù)他的位置。

塊級(jí)元素水平居中

1	`.content{margin:auto; with:990px;}`

居中導(dǎo)航

<ul>

</ul>

float:right

默認(rèn)寬帶為內(nèi)容寬度

脫離文檔流

向指定方向一直移動(dòng)

float元素在同一文檔流

float元素半脫離文檔流（對(duì)元素，脫離文檔流，對(duì)內(nèi)容在文檔流）

清除浮動(dòng)

clearfix

.clearfix:after{content:".";display:block;clear:both;height:0; overflow:hidden;visibility:hidden;}

.clearfix{zoom:1;}

到此，相信大家對(duì)“css布局的方法有哪些”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

向AI問一下細(xì)節(jié)

猜你喜歡