居中顯示and自適應布局

2021-07-11 10:12:17 字數 2184 閱讀 4885

一、水平居中div

給div設定乙個寬度，然後新增margin:0 auto屬性

div
設定塊級元素的width可以阻止它從左到右撐滿容器。然後你就可以設定左右外邊距為auto來使其水平居中。元素會佔據你所指定的寬度，然後剩餘的寬度會一分為二成為左右外邊距。

不過，當瀏覽器視窗比元素的寬度還要窄時，瀏覽器會顯示乙個水平滾動條來容納頁面。

div
在這種情況下使用max-width替代width可以使瀏覽器更好地處理小視窗的情況。

二、水平垂直居中

法1、 

.align-center
負邊距+定位：水平垂直居中，使用絕對定位將content的定點定位到body的中心，然後使用負margin（content寬高的一半），將content的中心拉回到body的中心，已達到水平垂直居中的效果法2、

#content
這個方法使用了乙個position:absolute，有固定寬度和高度的div。這個div被設定為top:0; bottom:0;。但是因為它有固定高度，其實並不能和上下都間距為 0，因此margin:auto;會使它居中。這裡就是使用margin:auto;使塊級元素垂直居中。

法3、利用相對定位：

.main
但會出現乙個問題：

在嘗試把.main這個父元素在瀏覽器居中顯示時發現，如果設定position:relative;


top屬性值以百分號（percentage）為單位時，會失效。此時元素會貼在瀏覽器；


而left以百分號為單位卻能正常顯示


如果設定position:absolute;百分號為單位可以正常顯示。如法2
經查證經驗需新增父元素寬高 

.container


.main
新增父元素層container後發現效果有些奇怪：

問題也並沒有得到解決。。。

三、如何居中乙個浮動元素

test float element center
原理：父元素和子元素同時左浮動，然後父元素相對左移動50%，子元素相對右移動50%，或者子元素相對左移動-50%

四、三欄布局，中間自適應

法1、自身浮動法。左邊左浮動，右邊右浮動

.left .right


.right


.left


.middle
法2、margin負值法

.left .right


.right


.left


.middle
middle放第一行：
法3、絕對定位法。左右兩欄採用絕對定位，分別固定於頁面的左右兩側，中間的主體欄用左右margin值撐開距離

.left .right


.right


.left


.middle

自適應布局

請你說一說你知道的所有web布局方式？1.浮動 float left right 2.inline block display inline block 行內塊級 3.flexible box 彈性盒子 display flex 4.grid display grid 5.絕對 相對布局 posit...

CSS布局 自適應布局

網易雲課堂學習筆記二 自適應布局 1.float absolute margin left right2.float overflow left right 產生bfc3.table left,right 預設均分 left margin失效 4.flex left right 由 定寬 自適應 類...

右邊自適應 左右布局 css左右自適應布局

如果有這麼乙個表單需求，前面是乙個名稱，中間是乙個表單，右側是乙個按鈕或者乙個字串。需要自適應布局，名稱為固定長度，右側也是固定，中間部分自適應整個width。先來看看html標籤1 6 年齡歲 首先，我想到的有這麼幾種display，乙個是inline block。於是css就變成這樣1.name...