頁面基礎布局相關知識 --- 居中&經典布局

原创 Lin_Grady 教程 html/css 332阅读 2017-12-28 17:48:15 举报

##PS: 這些只是個人學習,僅供思路參考,可能會有缺陷,並且都在chrome中測試,不一定適用其他瀏覽器,而且不考慮IE的,切記!!
PS: 2018/03/23修改,重整了一下樣式,新增了一些方法原理介紹,

建議先了解一下基礎知識,實際上算深入基礎了,隨意門:
想要清晰的明白(一): CSS視覺格式化模型|盒模型|定位方案|BFC
想要清晰的明白(二)CSS 盒模型Block box與Line box

基礎配置如下,只是一個基本的父子嵌套元素

水平居中的各種方法優劣.

1,margin

因為B是塊狀,所以看不出效果,但是如果不設置寬度其實就默認占滿全屏
這是最基礎最簡單的寫法

缺點:
1) 需要設置寬度(包括百分比等非固定寬度也可以)

2,絕對定位

原理:父元素設置相對定位,子元素設置絕對定位,偏移一側父元素寬度50%,子元素外邊距反向負值調整自身寬度50%。重點是從中可以看出這個需要知道子元素的寬度;

缺點:
1) 需要設置子元素寬度(包括百分比等非固定寬度也可以)

原理:跟上面原理一樣,但是使用了css3的transform屬性可以自動計算子元素寬度調整

優點:
1) 不需要知道子元素具體寬度;
缺點:
1) transform,兼容性一般,IE9+;
頁面基礎布局相關知識---居中&經典布局

原理:設置方向值,同時給元素一個對應的高寬,它會自動補全margin,就能保持居中了。具體原理參見上面文章。

缺點:
1) 需要設置子元素寬度(包括百分比等非固定寬度也可以)

3,flex

原理:Flex是Flexible Box的縮寫,意為"彈性布局",用來為盒狀模型提供最大的靈活性。
隨意門:
Flex 布局教程:語法篇
Flex 布局教程:實例篇

真是前端救星,有了這個可以無視以前各種詭異屬性實現的居中
優點:
1) 布局靈活全面
缺點:
1) align-items默認stretch,如果項目未設置高度或設為auto會導致子元素高度占滿父元素
2) 兼容性一般
頁面基礎布局相關知識---居中&經典布局

4,inline-block+text-align

原理:子元素設置成行內塊狀元素,父元素設置文本居中對齊也能使其生效

優點:
1) 不需要設置子元素具體寬度;
2) 兼容性好,甚至可以兼容ie6、ie7;
缺點:
1) 因為text-align是繼承樣式,會導致下級所有元素文字生效

垂直居中的各種方法優劣.

1,table-cell+vertical-align

原理:table-cell屬性指讓標籤元素以表格單元格的形式呈現,類似於td標籤。然後讓子元素居中

CSS2.1表格模型中的元素,可能不會全部包含在除HTML之外的文檔語言中。這時,那些“丟失”的元素會被模擬出來,從而使得表格模型能夠正常工作。所有的表格元素將會自動在自身周圍生成所需的匿名table對象,使其符合table/inline-table、table-row、table- cell的三層嵌套關係。
特徵:
1) 同行等高;
2) 寬度自動調節;

缺點:
1) display類型有限制,只有一個元素屬於inline或是inline-block(table-cell也可以理解為inline-block水平)水平,其身上的vertical-align屬性才會起作用。;
2) 父元素不能使用浮動屬性;
3) IE8下需要特殊處理;
4) 這是一個很複雜的屬性組合,下面文章能看的你懷疑人生;

隨意門:
CSS深入研究:display的恐怖故事解密(1) - inline-block
CSS深入研究:display的恐怖故事解密(2) - table-cell
大小不固定的圖片、多行文字的水平垂直居中
我所知道的幾種display:table-cell的應用
我對CSS vertical-align的一些理解與認識(一)
CSS vertical-align的深入理解(二)之text-top篇
CSS深入理解vertical-align和line-height的基友關係

2,絕對定位

原優缺點都同上,就不再重復了:

3,flex

原理:Flex是Flexible Box的縮寫,意為"彈性布局",用來為盒狀模型提供最大的靈活性。上面也提到過它的交叉軸的起點對齊(即垂直定位)align-items;

優點:
1) 布局靈活全面
2) 即使不設置寬度也不會默認占滿全行
缺點:
1) 兼容性一般
頁面基礎布局相關知識---居中&經典布局

水平垂直居中的各種方法.

1,table-cell+inline-block+vertical-align+text-align

優缺點都已經總結過了,而且基本顛覆了父子元素表現形式還影響後代元素的樣式,唯一的優點只有兼容性好了

2,absolute+transform

雖然代碼量有點多,兼容性有點瑕疵,但還是相當不錯的

3,flex

完美布局,唯一能限制它的只有瀏覽器了

實戰:

定寬+自適應

1) float浮動屬性
原理:通過float浮動屬性讓元素脫離文檔流,後續元素不能定寬,也不能同使用浮動屬性,但可以根據需求決定是或否使用overflow防止內容溢出

2) table屬性
原理:通過模擬table表現形式達到效果,根據特性還能省略設置元素高寬就能自行占滿

3) flex布局
原理:Flex 布局,可以簡便、完整、響應式地實現各種頁面布局。

聖杯布局&雙飛翼布局(兩列定寬+一列自適應)

基礎結構

前期主要步驟:
1) content子元素浮動;
2) main寬度滿屏放在首位,中間欄要在瀏覽器中優先展示渲染(這裡我沒太懂有多大區別???);
3) left和right分別用負邊距強行並排;

到目前為止看起來效果已經滿足了,實際left和right這種玩法是覆蓋在main之上的,導致部分內容被遮蓋了;
然後聖杯布局&雙飛翼布局的差別就在後續步驟了

聖杯布局:
4) content加上內邊距padding;
5) left和right使用相對定位偏移;

雙飛翼布局:
4) main加上嵌套元素inner,並設置內邊距;

從中可以看出之間的分歧在於:
聖杯布局:父元素設置內邊距,子元素設置相對偏移,影響區域從上至下
雙飛翼布局:目標元素嵌套多層元素,該元素內部設置內邊距,影響區域僅限該元素

flex寫法:
1) contanier設置flex布局,至少高度滿屏,方向豎直,可以佔據全屏效果;
2) content 設置flex布局,方向水平,放大比例1,可以佔滿寬度;
3) main放大比例1,可以佔據剩餘空間;
4) left排列順序放前;

拋棄顏色形狀等幹擾代碼,實際布局用到的css

全程不需要計算數值,不需要偏移位置,用flex布局可以控制方向,比例,順序,自動計算樣式

上面的知識點可以讓你應該絕大多數的頁面布局了,移動端又會涉及更多知識點,隨意門:
viewports剖析

使用Flexible實現手淘H5頁面的終端適配

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复