絕對布局優勢 史上最全TML與CSS布局技巧總結

2021-10-25 13:30:34 字數 3439 閱讀 3453

單列布局
水平居中水平居中的布局方式是最常見的一種，常常用於頭部、內容區、頁尾，它主要的作用是控制盒子在整個頁面以水平居中的方式呈現。

使用margin：0 auto來實現
.child
優勢：相容性好劣勢：需要指定盒子 寬度1.使用table來實現

.child
優勢：不需要父容器parent，只需要對自身進行設定劣勢：ie6、7需要調整結構2.使用inline-block和text-align來實現

.parent


.child
優勢：相容性好劣勢：需要同時設定子元素和父元素3.使用絕對定位absolute來實現

使用絕對定位來實現水平居中布局有兩種情況，一種子容器無寬度，另一種子容器有寬度。無寬度可以用一下**，如果是有寬度，則可以設定margin-left負值為容器寬度的一半。

.parent


.child
優勢：無需設定容器寬度，在移動端可以使用劣勢：相容性差，需要ie9及以上瀏覽器的支援4.使用flex布局來實現

flex有兩種方法來實現水平居中，父容器設定display：flex， 一種直接在父容器中設定justify-content屬性值center。第二種在子容器中使用margin： 0 auto

.parent


.parent


.child
優勢：實現起來簡單，尤其是使用在響應式布局中劣勢：相容性差，如果大面積的使用該布局可能會影響效率垂直居中

這邊說的垂直居中是子容器無高的垂直居中，並非單行文字垂直居中line-height

1.使用絕對定位absolute來實現（同水平居中的使用方法，優劣一樣）

.parent


.child
2.使用flex來實現

.parent
3.使用display：table-cell來實現

.parent
總結：將水平居中和垂直居中兩種布局方法相互的結合起來就可以實現水平居中布局。這邊只舉乙個用絕對定位來實現水平垂直居中布局的方法，別的方法大家可以嘗試自己練習。（以下介紹各種布局時都是基於上面水平和垂直居中的方法，所有對於它們的優劣就不再分析。）

.parent


.child

多列布局
多列布局也是非常常見的，適用於一側定寬，另一側自適應的布局。

浮動布局

前段時間我總結過關於兩列浮動布局方法，這裡我就不再從新總結了。

多列等分布局

多列等分布局常常出現在內容中，多數為同功能、同階級內容的併排顯示。

41.使用flex來實現多列布局

.parent


.column


.column+ .column
2.使用table來實現多列布局

.parent


.column
3.使用float來實現多列布局

.column
提示：使用table和float實現多列布局的時候需要注意，如果要設定背景顏色則必須將.column盒子作為父容器在其裡面新增乙個子容器，在設定背景顏色，如果直接在.column容器中設定背景顏色會由於padding而無法產生盒子之間的間距。

九宮格布局

html**
1.使用flex來實現九宮格布局

.parent


.row


.item
2.使用table來實現九宮格布局

.parent


.row


.item

全屏布局

html**
使用絕對定位實現全屏布局

html,body,.parent


.top


.left


.right


.bottom

響應式布局
meta標籤的使用

使用**查詢

@media screen and (max-width: 480px)
總結：這些布局方法有些經常用到，有些由於相容性的問題在具體專案相中使用的情況相對較少，不過對於移動端來說，以上總結的布局都是實用。今天特意花些時間來整理這些布局，一是為了鞏固知識，二是希望這些方法能夠分享給前端的初學者，讓他們對布局有更深入的了解，當然這些並非是css中的所有布局方法，以後發現有什麼布局沒有總結到的，會繼續更新、分享，如果哪位同行對布局方法有所補充，或者發現存在問題，歡迎相互交流。

如有侵權刪

史上最全scss教程

1.資料型別 sassscript 支援 6 種主要的資料型別 將帶引號的字串轉化為無引號字串 mixin b selector includeb header 2.變數 通常在專案中會建立variable.scss用來儲存一些全域性變數 普通變數 g primary 409eff 解構 value...

linux命令史上最全

關閉檔案 q 退出，沒動過檔案 w 儲存 wq 儲存並退出，q！不儲存並退出 w 強行儲存 開啟檔案 vi 開啟檔案，定位至最後一行 vi 開啟檔案，定位到 行 壓縮檔案命令 gzip 解壓檔案命令 gunzip 打包命令 tar cvf a.tar 打包進去的檔案,資料夾名 解包命令 tar xc...

史上最全講解 IOC

spring ioc自動注入 spring ioc掃瞄器 bean的作用域 bean的生命週期 通俗易懂的理解ioc 由於引進了中間位置的 第三方 也就是ioc容器，使得a b c d這4個物件沒有了耦合關係，齒輪之間的傳動全部依靠 第三方 了，全部物件的控制權全部上繳給 第三方 ioc容器，所以，...