-
> 水平居中的第三種解決方案的優點和缺點
- 優點：
沒想過。如果現在想想的話，我的答案是相比第二種解決方案來說，可以抵抗float布局的影響，不至于設置float布局后，margin失效，就導致方案不可用。容錯性更好些?！@個理解，跟老師的總結差不多?？礃幼邮敲靼琢?。
反思補充：開啟定位就相當于脫離文檔流，這點我倒是沒有融會貫通想到，脫離文檔流的意思是啥？就是指高度塌陷嗎？那是不是先用第二種方案實現一下水平居中，然后設置float布局，或者設置開啟定位(絕對定位absolute，fixed固定定位)，效果應該是一樣的 ，都會令子集元素的水平居中效果失效。待制作demo驗證。
老師的回答：父級元素是否脫離文檔流，不影響子集元素的水平居中效果。
- 缺點：
沒想過。如果現在想的話，我覺得沒啥缺點。就是寫平移的時候，用成百分比更好，這樣即使后續子集元素width寬度改動后，平移不用跟著改。
老師的回答：transform屬性是CSS3中新增的屬性，瀏覽器支持情況不好。
反思補充：瀏覽器支撐情況，我覺得如果不考慮IE8的話，一般瀏覽器都支持。再者還是可以找找看，有沒相關的polyfill，也不算太大問題。這其實涉及到一個決策識別。如果要支持老版本瀏覽器的話，就不能采用第三種解決方案了，而是要采用第一種或者第二種解決方案了。
- 遺留的思考題：
能否舉一反三的，通過這3種，想到第4種，第n種呢?！@個等我把3個搞清楚了，再來好好整理想想。
查看全部 -
> 水平居中布局的第三種解決方案：
- 方法拆分：
html：兩層結構【父子級】
css：子集-absolute,left和transform；父級-開啟定位 [除static外都是開啟定位]
- 詳細說明
1.開啟absolute后，需要判斷直接父級元素是否開啟定位，如果開啟，當前元素就是 相對于父級元素定位，也就是說，天花板是他的父級元素；如果直接父級元素沒有開啟定位，那當前元素就是 相對于頁面定位的【其實這點我覺得僅適用于當前例子，如果body和直接父級節點還有包含節點的話，比如父級的父級節點，如果開啟定位的話，那就不是相對頁面定位了，而是父級的父級節點了。這點待補充例子證明】
2.translateX 表示平移， X表示水平方向的平移，左移動就是負值，右移動就是正值。想左邊移動子集元素的一半，那就是子集元素width的一半即可。
3.子集元素的平移寫法，可以寫具體值，也可以寫百分比。當寬度變的時候，平移如果寫具體值的話，也需要跟著變，這時候用百分比-50%【如果平移一半的話】，那無論子集元素的width如何變，平移的設置都不用跟著改了，相對來說，代碼更優。
查看全部 -
> 水平居中布局的第二種解決方案
1.優點
沒想過。
老師的回答：只需要對子集元素設置樣式即可。更簡單。相比第一種父級，子集，都需要設置來說，要簡單很多。
?
2.缺點
沒想過。
老師的回答：如果子集元素脫離文檔流，導致margin屬性的值無效。
補充：導致脫離文檔流的3種場景。
1)浮動float
2)絕對absolute定位
3)固定fixed定位
3.總結
第一種和第二種都有優缺點，所以沒有絕對的好，絕對的不好。還是要擇機而動，根據場景不同，來選擇合適的方案。
查看全部 -
>水平居中布局的第二種解決方案：
- 和第一種的差異：只需要在子集元素中設置樣式，而非父級，子集元素都設置。
- margin屬性外邊距的4個值。
技術實現分析：
1.margin: auto 表示根據瀏覽器自動分配
2.display: table/block，但是不能為inline。
但是對于第2點，我個人覺得inline-block應該也是可以的。因為inline-block也具有block的特性。但實際測試了下，是不行的?？赡芤驗橐矊儆趇nline，所以不行?？梢缘贸鼋Y論是margin:auto這種方式，必須配合塊級元素，不能是內聯塊級，或者是內聯元素。
查看全部 -
水平居中布局的第一種解決方案優缺點：
1.優點：
沒想過這個問題。都是想的能實現就完了，而且實現的也不明不白的。
老師的回答：IE6-9，css2(text-align和display:inline-block)，瀏覽器兼容性比較好
2.缺點：
沒想過。
老師的回答：text-align有繼承性。子集元素也會應用父級對齊方式。子集元素如果不想繼承，需要重置覆蓋父級元素的樣式【多加一行代碼，比如子集元素左對齊，text-align:left】
3.為啥要知道優缺點？
沒想過。
老師的回答：搞清楚優缺點，是為了識別場景后，用上合理的解決方案，沒有最好和最壞，而非生搬硬套過去，然后用的不明不白，糊里糊涂。
查看全部 -
> 水平居中布局的第一個解決方案
技術點：text-align:center(父級元素) + display:inline-block(子集元素)
技術說明：
text-align針對的是文本內容
inline內聯元素，也屬于文本內容。
之所以設置為inline-block，是因為inline下的width和height是無效的。
簡要概括：
組合拳，父容器設置text-align，子容器設置文本且支持寬高尺寸設置display:inline-block。
相當于是 text-align和inline的組合拳。inline-block相當于是一次polyfill補丁。
查看全部 -
> 水平居中布局的概念：
當前元素相對于誰水平居中?？梢允琼撁妫部梢允歉讣壴?。核心是左右方向放中間。
>水平居中布局：
-我知道的：
1.塊級元素：margin:0 auto;
2.行內元素：text-align:center
-課程中講的(常用的有3種，但不止這些)：
inline-block+text-align配合（其實跟"我知道的2"差不多，只不過是用css定義元素類型為內聯元素了。）
table+margin屬性配合使用(其實跟"我知道的1"差不多，只不過是用css定義元素類型為塊級元素了。)
absolute+transform配合使用(這個其實也知道，但是就是用的不太熟，百分比還是/2的數值應用在哪個樣式，老是整不明白)
查看全部 -
居中布局分類，3種：水平，垂直，水平+垂直
查看全部 -
> 布局為何頭疼：難
原因1：邏輯性及設計感強
原因2：不能debugger代碼定位(語言開發，比如JS，可以跟代碼)
原因3：沒有套路規律可行
> 布局不是技術內容(html和css)，而是一種設計思想(活學活用，而非只是語法堆砌)
需要不斷練習，才能融會貫通
查看全部 -
float + margin
查看全部 -
兩列布局的方式
查看全部 -
absolute + transform?實現垂直居中
查看全部 -
display:table-cell vertical-align?垂直居中
查看全部 -
垂直居中布局實現方式
查看全部 -
absolute + transform實現水平居中
查看全部
舉報
