首頁  >  文章  >  web前端  >  CSS佈局方式有哪些? css佈局方式的總結

CSS佈局方式有哪些? css佈局方式的總結

不言
不言原創
2018-08-02 16:22:222625瀏覽

css頁面佈局在網頁中的用處是十分大的,css頁面佈局可以控制網頁相對正常佈局流、週邊元素、父容器或主視窗/視窗的位置,那麼,css佈局方式有哪些呢?下面我們就來具體看看css頁面佈局的方式。

css實作左右佈局

css實作左右佈局的方式大概有六種:

1. table的li實作

table標籤是能夠具有實作左右佈局的屬性,tr表示一行,td表示一列,tr中可以加入td實作盒子的左右佈局.

2 . inline-block

display:inline-block屬性是介於行級元素(display:inline)和區塊級元素(display:block)之間的屬性,它可以像行級元素一樣水平佈局,也可以像區塊級元素設定寬高屬性,所以可以進行左右佈局。

3. float實作左右佈局

float浮動,將該區塊狀區域脫離父級標籤的文件流,left屬性值使該區域向父級標籤區域的左側邊界放置,right屬性值使該區域區塊向父級標籤的右側邊界放置,如是利用此屬性可以實現左右佈局。

float佈局對於後面節點的佈局採用交錯性的佈局,inline-block採用正常式的佈局。

4. flexbox屬性實作左右佈局

flexbox彈性盒子佈局,display:box; 此種佈局主要用於移動前端開發。

5. float margin實作左右佈局

float能夠使得元素向左或向右靠邊佈局,如果在同級元素中設定一個正常流的區域與浮動塊並列,則浮動塊會在該正常流同級區域的邊界處,只是浮動塊會影響該區域塊的佈局,所以要清除浮動塊的影響,所以此時將正常流區域塊外的盒子設置margin等於浮動區塊的寬度既可以清除影響。

6. position:absolute左右佈局

絕對定位,產生脫離文件流的佈局現象。 absolute可以覆蓋任何位置的元素且不會影響正常流的佈局,但是會產生遮蓋。

css左中右佈局

三欄自適應佈局:兩邊定寬,中間block寬度自適應。

1.絕對定位法

將左右兩邊使用absolute定位,因為絕對定位脫離文檔流,後面的center會自然流動到上面,然後使用margin屬性,留出左右元素的寬度,既可以使中間元素自適應螢幕寬度。

2. 使用自身浮動法

對左右使用分別使用float:left和float:right,float使左右兩個元素脫離文檔流,中間元素正常在正常文件流程中,使用margin指定左右外邊距對其進行一個定位。同時父盒子設定 overflow: auto; 來避免子盒子溢出

3. 聖杯佈局

聖杯佈局的原理是margin負值法。使用聖杯佈局首先需要在center元素外部包含一個p,包含p需要設定float屬性使其形成一個BFC,並設定寬度,並且這個寬度要和left塊的margin負值進行配合。

css居中佈局

#水平居中

對於行內元素(inline):text- align: center;

對於區塊級元素(block):設定寬度且marigin-left 和margin-right 是設為auto,使用max-width 取代width。

對於多個區塊級元素:對父元素設定text-align: center;,對子元素設定display: inline-block;(vertical-alinga:top);或使用flex 佈局

#flex 版面: display:flex;  justify-content:center

#垂直居中

對於行內元素(inline)

# 單行:設定上下pandding 相等(或設定line-height 和height 相等)

多行:設定上下pandding 相等;或設定display: table-cell; 和vertical-align: middle;;或使用flex 版面;或使用偽元素

對於區塊級元素(block):(下面前兩種方案,父元素需使用相對佈局)

已知高度:子元素使用絕對佈局top: 50%;,再用負的margin-top 把子元素往上拉一半的高度

未知高度:子元素使用絕對佈局position: absolute; top: 50%; transform: translateY(-50%);

使用Flexbox:選擇方向,justify-content: center;

css實作水平垂直居中佈局

定高定寬:先用絕對佈局top: 50 %; left: 50%;,再用和寬高的一半相等的負margin 把子元素回拉

高度和寬度未知:先用絕對佈局top: 50%; left: 50%;,再設定transform: translate(-50%, -50%);

使用Flexbox:justify-content: center; align-items: center。

box-sizing

當你設定一個元素為box-sizing: border-box; 時,此元素的內邊距和邊框不再會增加它的寬度。

百分比寬度

#

百分比是一種相對於包含區塊的計量單位。它對圖片和盒子模很有用:例如實現圖片寬度始終是容器寬度的50%,即使視窗縮小。

css實作inline-block 佈局

inline-block 元素 影響垂直居中,加上vertical-align:top。

相關文章推薦:

 CSS佈局聖杯佈局& 雙飛翼佈局_html/css_WEB-ITnose

#CSS佈局之佈局模型

CSS佈局有哪些技巧

以上是CSS佈局方式有哪些? css佈局方式的總結的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn