Web前端 自適應居中方法總結

2021-08-09 08:56:51 字數 682 閱讀 9501

1、這是一種簡單的方法,但是稍有侷限性,設定了盒子的寬高

2、這種方法不需要計算,盒子的寬高也不影響,但是ie7及以下的瀏覽器並不支援

3、table布局,display:table-cell,將整個介面模擬成乙個**單元格,**的居中特性就可以很好利用了,但是ie7及以下的瀏覽器仍然是不支援的

4、這個方法是css3盒模型中的很好用的一種,但是相容性並不好。其中justify-content代表主軸(橫向)居中,align-items則是輔軸(豎向)居中

自適應居中的方法還有很多,以後再總結給大家啦!前端的每一種實現方法都比較靈活,要結合相容性要求等情況,選擇最適合的那種。

前端 自適應布局方法總結

一欄固定一欄自適應 實現 left 固定寬度 main 自適應寬度 左右兩欄固定,中間自適應 自身浮動法的原理就是使用對左右使用分別使用float left和float right,float使左右兩個元素脫離文件流,中間元素正常在正常文件流中,使用margin指定左右外邊距對其進行乙個定位。lef...

居中方法總結

居中分為水平居中和垂直居中 1 水平居中 1 行內元素居中 行內元素居中是只針對行內元素的,比如文字 text img 按鈕等行內元素,可通過給父元素設定 text align center 來實現。另外,如果塊狀元素屬性display 被設定為inline時,也是可以使用這種方法。但有個首要條件是...

移動前端自適應適配方法總結

所謂前端適配,就是為了讓移動設計稿在大部分的移動裝置上看起來有一致的展示效果,目前比較流行的方法有兩種。一種是強制meta viewport寬度為設計稿寬度,一種是使用rem 自適應布局的flexible.js。各有利弊,使用第一種在某些瀏覽器的webview裡面會出現相容問題,而且對於1畫素會無法...