一、單列布局：?

? ? ?margin：0 auto；將div模塊居中

?

二、兩列布局：(float標(biāo)簽將div進(jìn)行浮動(dòng)）

? float:left;

? ? float:right;

?

三、三列布局：

?①、利用float直接對(duì)三個(gè)div模塊進(jìn)行浮動(dòng)；

? ②、左右兩邊div固定，中間自適應(yīng)（利用position:absolute;上 右 下 左）絕對(duì)定位來進(jìn)行固定

? ? ? 左邊：position：absolute;left：0；top: 0;

? ? ? ? ? 右邊：position：absolute;right：0；top: 0;

? ? ? ? ? 中間：margin：上 右 下 左;< 自適應(yīng) >

?

?注意：如果三個(gè)都是自適應(yīng)就用 float：left，但是此時(shí)的寬度應(yīng)該設(shè)成百分比的形式

?

四、混合布局

? ?代碼演示：

? ? htnl文件：

? ?

? ?css樣式文件：

? ? ?

顯示結(jié)果：

?

?

? ? ? ? ? ? ? ? ? ? ? ? ? ?

轉(zhuǎn)載于:https://www.cnblogs.com/ericjava123/p/5647090.html

與50位技術(shù)專家面對(duì)面20年技術(shù)見證，附贈(zèng)技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的CSS对 网页进行布局的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。