-
> 圣杯布局的核心
自適應位置不同，會不會導致最終實現(xiàn)方案不同，我們通過代碼驗證一下。
通過基礎代碼[html和css代碼，寬度和背景色]。
拆解。三列。先實現(xiàn) 兩列(定寬+自適應)。然后在實現(xiàn)兩列（自適應+定寬）
效果：中間是自適應了。但是最后一列，折到第二行了。
原因就是因為中間一列，和最后一列的問題。兄弟元素中，中間沒浮動，右邊的浮動。
A.浮動的元素是不允許超過前面的元素的。所以依舊是垂直方向排列，而不能呈現(xiàn)水平方向
B.不動的元素是不允許超過前面的元素的。所以依舊是垂直方向排列，而不能呈現(xiàn)水平方向
吐字不清還是我耳朵沒聽清呢。不知道說的是A還是B。
前面浮動，后面不浮動，后面是可以向前占有位置的。根據(jù)這句來說，可以推理出來，應該說的是B。
推理：前面不浮動，后面浮動。前面不能覆蓋后面，是沒覆蓋啊，所以折到第二行也是對的。所以還是不太明白。
剖析結果：浮動在前面沒事，不會折行，后面就不行。那就想法兒把浮動放在前面。
解決的方法就是，改動下html的結構，將right改到center的前面去。
> 總結
盡管這種三列布局，和之前的三列布局不一樣，但用的處理辦法還是曾經用過的兩列布局的招數(shù)，依舊沿用的是之前的解決方案。只不過進行了拆分，然后重新進行了整合和調整，最終依舊可以實現(xiàn)了這種情況?！靖惺埽赫娴氖菍⒁呀洉模缓笾匦陆M合拆分，好像真的能煥發(fā)新的生命力。推陳出新，也就是這個意思吧。所以不能單純一味的相信喜新厭舊，因為舊的東西用好了，也是可以發(fā)揮很大能量，解決更多新問題，實現(xiàn)新功能的?！?/p>
缺點：
能實現(xiàn)不就好了嗎，但不行，還要考慮另外一種情況。我們做網站，都需要被搜索引擎抓取
center自適應的放在了最后面。但搜索引擎是按照解析html的順序來抓取的，也就是誰在前，優(yōu)先抓取誰。
但頁面的主要內容都在center，卻在最后才被抓取。對搜索引擎并不友好，真正友好的應該是放在left和right的前面。
但如果真的是 center放在第一個的話【由于html的結構順序改了，導致頁面的布局也改變了】
布局就成了 center中間獨占一行，然后left,right左右兩列都被折到第二行了。
當前的center也只能放在最后了。
因此，當頁面的結構不同的話，解決方案也是不同的。這塊兒在實際開發(fā)中，一定要注意。
查看全部 -
> 圣杯布局
- 概念：也叫三行三列。
需要注意的是這個”三列“，一般多出現(xiàn)在第2行中。
圣杯布局的示例，其實是一個完整頁面的布局。
三行，可以用3個div，div本來就是垂直方向排列
三列，和之前討論的三列布局有些不同。不同在自適應這一列出現(xiàn)的位置上。
之前討論的三列布局是定寬+定寬+自適應，也就是自適應是在左邊還是右邊(可以試試看，示例中，自適應是在右邊，自己可以試試自適應在左邊該如何寫)，而現(xiàn)在這個布局，自適應是在中間的，也就是可以總結為，定寬+自適應+定寬的情況。
疑問：僅僅是位置變化了。影響應該問題不大吧？
還真不是，位置不同，實現(xiàn)方式方案整個就完全不一樣了。
圣杯布局最核心的是指三行三列的第二行的三列【左右定寬+中間自適應】的具體實現(xiàn)。
圣杯的解決重點就是三列問題，只不過是對應自適應在中間的這種情況。
這個重點搞定了。圣杯布局也就算是學會了。
- 特點。
自適應處在中間，而非兩邊。
查看全部 -
> 三列布局的實現(xiàn)方式
- 代碼驗證
先3列統(tǒng)一設置高度。左中設置定寬。右邊只設置背景色，默認是width:100%自適應。
如果換成4列布局[也就是最后一列自適應，第三列還是定寬這類]的話，方案依舊可適用。
學習要摸索規(guī)律，舉一反三。多多思考。
查看全部 -
> 三列布局。
-概念：左邊兩列定寬，右邊自適應。
差異點，相比兩列布局，只是增加了一個定寬的列而已。復雜度沒有增加多少。
-實現(xiàn)方法，仍然有3種方式。定寬+定寬+自適應。
除此之外，還有 定寬+自適應+定寬的這種情況，區(qū)別就在于
自適應是在兩邊，還是在中間排列。
如果是中間的話，就變得相對復雜了。
查看全部 -
> 兩列布局的第三種解決方案優(yōu)缺點
- 優(yōu)點
瀏覽器兼容性好
- 缺點
但會收到table的制約。寬度自動分配。會出現(xiàn)表格單元格雙邊框的問題。
解決方法就是通過parent元素上設置table-layout:fixed。
- 總結
第一種方法能用。但問題比較多。
第二種方法問題少很多了。
第三種更優(yōu)一些。
講解方式上可以認為是遞進的，但實際開發(fā)中其實沒太大關聯(lián)，還是要分場景應用合適的方法。
查看全部 -
> 兩列布局的第三種解決方案
- 概述
html=>有一個變化，會在left和right外圍增加一個parent父級元素。
css =>parent應用table效果，left/right左右應用表格的td單元格效果。left左側定寬。
- 邏輯梳理
但是右邊right沒有width。解決是width為100%（為啥要顯式聲明呢？）。
table-layout:fixed(留個思考題，是干啥的。)
解決：table特性-表格的單元格的寬度會自動分配，也就是說沒有設置width值的時候，單元格的width會等分。如果有一列定寬，則將其余寬度自動分配給另一列。
查看全部 -
> 兩列布局的第二種解決方案的優(yōu)點和缺點
優(yōu)點：
簡單易用。沒有第一種方案的3個bug問題。
缺點：
overflow開啟BFC，同時還處理了內容溢出。會導致溢出內存想顯示但卻顯示不了的問題。同時一個元素開啟浮動，同級的另一個元素不開啟浮動，老版本瀏覽器會出現(xiàn)之間有空白區(qū)域瀏覽器兼容性問題【留懸念，用IETest試試。結論是不存在此問題。但還是值得一試，印象會更深刻?！?/p>
查看全部 -
> 兩列布局的第二種解決方案
* 概述
- html結構：還是兩層結構，1個父級，2個子集元素。
- css代碼：float和overflow
* 驗證
- 大概思路：左側left定寬，右側right自適應width:100%(默認值如此，可以不用設置)，然后左側left 設置浮動float，此時看似已經實現(xiàn)左右兩列布局，但實際左側left覆蓋了右側自適應right的部分布局（也就是右側自適應被左側擋住的那部分），解決方法是設置右側自適應right的overflow為hidden。
- 主要核心點是overflow。表示一初始隱藏。但還有另外一個作用。就是 開啟BFC模式。
- 開啟BFC：也就是說當前元素的內部環(huán)境與外界完全隔離，即內部環(huán)境和外界完全沒關系了。需要注意的是開啟BFC模式的，不僅僅只通過overflow:hidden這一種方式。
* 總結
- 和第一種解決方案的相似之處是簡單易用。只是將margin-left改為overflow而已。
查看全部 -
> 兩列布局的第一種解決方案的優(yōu)化版
- 目的：fix第一種解決方案的缺點。
缺點1-left開啟浮動，right不開啟浮動，瀏覽器兼容性不好，老版本瀏覽器里，兩個元素會產生空白區(qū)域。
缺點2-
缺點3-
- 做法：
為自適應元素定位父級元素(right這一層，外圍再包一層right-fix)，然后給right-fix設置float:right，同時寬度width默認100%，也就是自適應。這樣就保證了兄弟節(jié)點元素都是浮動?！?/p>
執(zhí)行1設置right-fix浮動后，會導致默認寬度值為0。也就是說，right-fix設置浮動后，默認寬度就不是父級的百分百了，而是(后代元素之和)實際內容填充起來的。比如后代元素設置了margin-left:400，所以right-fix的寬度就為400(這點真挺神奇，不設置width，只設置margin也可以給父級設置寬度)
處理2的問題，就是為right-fix顯示聲明寬度width為100%，也就是父級元素的百分百寬度。
但是會最終顯示right的背景色，因為存在顏色覆蓋的問題。right-fix的寬度自適應父級body的總寬度，然后right的寬度自適應父級right-fix的寬度，最終顯示為right的顏色。right-fix相當于確定了位置，而right確定了最終顯示的背景色。如果把right背景色注釋掉，則會看到right-fix設置的背景色就顯示出來了。證明了的確是顏色覆蓋了。
但是兩列布局還是不對，水平排列還是錯顯示為垂直排列。因為設置浮動后，div就不是默認的文檔流排列規(guī)則(默認是水平排列)了。right的寬度復用了body的寬度，一行放不下了，被擠到下一行了。
解決5被擠到下一行的辦法是設置margin-left。水平方向設置負值，表示向左移動，正值右移。不過同樣左移的寬度值依賴于left的寬度。
執(zhí)行6發(fā)現(xiàn)，左右兩列布局，最后只剩下右列的父級元素了。原因在于被覆蓋了？右列父級的層級高于左列？但是說不太過去啊，不是已經設置margin-left了嗎？margin-left不會導致背景縮減嗎？看來不會，背景色不是在右側子集right設置的，而是在設置左移的右側父級right-fix里面的，也就是margin-left和background-color同時設置的話，不會導致寬度發(fā)生變化?！具@塊兒不是太懂，需要自己實際再試試，不過好的地方是，引發(fā)自己的好奇心，一個小小的左右兩列布局，就出這么多幺蛾子，一波未平一波又起的，挺有意思的?！?/p>
解決7右側父級元素層級覆蓋左側導致左側無法正常顯示的問題的辦法是設置z-index（我的想法應該也有效，老師的做法是設置左側left元素的position值為relative，可以提升顯示層級。為何能提升呢？原因不是很清楚。老師的解釋是，定位position的顯示層級 高于浮動float。怎么證明呢？就看是否7的左側left無法顯示被解決就可以了。）
目前來說，相比第一種解決方案，多了一層right-fix元素，以及基于當前場景下的css polyfill。但好處是，解決了一個浮動，一個不浮動的布局不一致問題。右側左移的固定寬度還是要依賴左側width，依舊沒解決；如果右列right里面定義子集元素inner，并且子集元素inner設置clear:both（外加background-color:greeen，目的是更容易看效果，方便調試，還是看不到效果，因為inner沒有設置高度height），是否會影響左右布局塌陷錯位。目前來說，不受影響。
總結來看。3個問題，解決掉2個。只剩下width寬度高耦合的問題了。但是為了解決問題，付出的代價也是比較大的，多增加了不少代碼。我自己的感受就是，CSS很強調的能力是就事論事，抓住問題，然后一個一個處理。想形成套路，不那么容易，只能碎片化一個個掌握小技巧，然后根據(jù)實際場景，逐個擊破，打游擊戰(zhàn)，組合拳。
查看全部 -
> 兩列布局的第一種解決方案優(yōu)缺點。
- 優(yōu)點：簡單
- 缺點：
1.自適應值要依賴于定寬的寬度，改動不靈活，高耦合；
2.定寬元素浮動與自適應元素不浮動處在兩個不同層次，導致瀏覽器兼容性不好，兩個元素之間會有空白區(qū)域；
3.不在同一層級的元素設置clear:both清除浮動時，會有影響。比如right下的inner設置清除浮動，會影響left的浮動。
- 啟示：方法越簡單，其影響產生的問題也是相對較多的。
查看全部 -
> 兩列布局的第一種解決方案
- 結構：parent + left和right
css: float+margin-left
- 代碼驗證
左側浮動float脫離文檔流，右邊左側保持距離margin-left:左列的寬度。
查看全部 -
> 兩列布局的第一種情況
- 概念：什么是兩列布局（一類定寬，一類自適應）
- 實現(xiàn)方式：3種實現(xiàn)方式~4種
查看全部 -
> 多列布局。
居中布局-水平，垂直，水平垂直居中。這3類布局方式。
塊級元素，內聯(lián)元素，行內塊級元素。
- 分類（變化最復雜，CSS3多列布局屬性）
兩列布局（定寬[固定值]+自適應[剩余的列])
三列布局（定寬定寬自適應；定寬自適應自適應，圣杯之后是雙飛翼）
等分布局。
等高布局。
查看全部 -
> 垂直居中的第二種解決方案
- 概述
父子結構的元素+css樣式(absolute+transform)
垂直移動translateY，向上移動是負值，向下移動是正值。
和水平居中的其中一個解決方案很類似。
查看全部 -
> 垂直居中布局的第一種解決方案的優(yōu)缺點
- 優(yōu)點
沒想過。反正是能實現(xiàn)就行。利用display轉變成表格的單元格，然后設置verticle-align文本對齊方式為middle垂直居中，打的一套組合拳。
老師的回答：瀏覽器兼容性比較好，因為table-cell和verticle-align都是css2中就已經有的。對于老瀏覽器普遍都支持。
- 缺點
沒想過，應該沒啥缺點吧。
老師的回答：verticle-align屬性具有繼承性，導致父級元素的文本也是居中顯示的。也就是說，將來在遇到 父級元素中包含除子集元素以外的文本內容的話，但是這些文本內容不需要居中的話，此時就不適合用這種方案了，或者說需要為當前方案增加polyfil，去調整文本內容的對齊方式。
查看全部 -
>垂直居中布局的第一種解決方案
- 概要分析
dom設置：父子級嵌套
css設置：display(table-cell)和verticle-align(middle)
差異點(相比之前的水平垂直居中方案來說)，設置樣式在父級元素上，子集樣式無需設置
-方法生效原因解析
自我分析：塊級元素+居中文本對齊？不太明白
老師解釋：
verticle-align-文本內容的垂直方向對齊方式，常用3個值，top頂部對齊，middle居中對齊，bottom，底部對齊。
table-cell:td[單元格](設置當前元素為<td>元素)，table:table元素[表格]
整合一下去理解：相當于把父級元素設置為了表格中的單元格，單元格的內容只可以有2種方式[水平/垂直]對齊的[這點待驗證]；而verticle-align的middle則相當于設置了垂直居中。
查看全部 -
>垂直居中布局
- 概念/定義:
自我理解-就是讓自身上下居中的一種布局設置方式。
- 實現(xiàn)方式：提供2種解決方案
自我理解：能想到的就是height和line-height等值，以及verticle-align的等值(兄弟節(jié)點及父級元素設置)
查看全部
舉報
