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。