百度前端技術學院2017小薇學院階段性總結(task4-10小結)

在將小薇學院任務完成之後，對完成各任務期間所掌握的一些細節，以及部分任務要求掌握的系統知識進行了小結。以下這些內容主要涉及的是自己在製作過程中所遇到的問題，觸及的是一些點，如果需要系統的掌握結構樣式這方面的內容，還是需要多練。

task4：《定位與居中》。
各類情況下的居中，在以下的情況中，對涉及flex的描述可能不大恰當，因為對於flex而言，內部元素的排列是按主側軸定義的：

A:水平居中。

1.行內元素：在父元素中設定text-align；（包括flexbox）

2.單個塊級元素：a.令margin-left/margin-right:auto；b.定寬時，absolute定位，left:50%,margin-left:-1/2height

3.多個塊級元素：a.設定為inline-block，在父元素中使用text-align；b.設定父元素為伸縮容器，並設定justify-content:center。

B:豎直居中。

1.單行行內元素：當父元素不定高時，設定其padding-top/padding-bottom相等；此外，對於塊級元素中的單行文字，設定塊級元素line-height=height；

2.多行行內元素：
a.採用padding-top/padding-bottom相等；
b.使其處於表格中，自動居中；
c.使其父元素display為table，其自身display為table-cell，再設定父元素vertical-align:middle；
d.如果父元素為伸縮容器（定高），子元素自會豎直居中；
e.在父元素中使用偽元素撐高（height:100%），vertical-align:middle，此時子元素設為inline-block，vertical-align:middle。

3.塊級元素：a.定高時，absolute定位，top:50%,margin-top:-1/2height；b.不定高時，同a，此時將margin-top:-1/2height改為transform:translateY(-50%)；
c.設定父元素為伸縮容器，並設定align-content:center。

C:水平豎直居中（針對單個塊級元素）。

1.定高定寬：絕對定位，left/top:50%,margin-left/margin-top:-1/2height；

2.不定寬高時：同上理，此時使用translateX/translateY替代margin-left/margin-top即可；

3.設定父元素為伸縮容器，同時設定justify-content/align-content為center。

demo;

　　程式碼;

task6：《通過HTML及CSS模擬報紙排版》
本任務主要是各種字型大小顏色不同等的設定，以及涉及區塊定位問題：

1.對於首字下沉效果：需要注意此時切記設定首字行高等於font-size，如果不設定，在某些瀏覽器中會實現首字下沉效果（如火狐），另一些則不會；

2.如果文字中含有url地址等內容，需對其設定word-wrap:break-word，強制自動換行，否則某些瀏覽器中會出現該文字溢位容器的情況；

demo;

　　程式碼;

　　效果圖如下：

task7：《實現常見的技術產品官網的頁面架構及樣式佈局》
本任務涉及了使用ps切圖等一些ps基礎技能，在完成任務的過程中，應該考慮到官網實際應該是怎樣的，然後合理使用標籤，增加一些psd圖中不能看到的css效果：

1.對按鈕能元素合理使用transition屬性，使其效果平滑；

2.不能將塊級元素放進行內元素，即使是將行內元素設定為block也不行，因為此時對瀏覽器而言，其在解釋過程中，並未將該塊級元素放進行內元素，
則在這種情況下，某些選擇器會失效，對行內元素使用偽類來控制該塊級元素也會失效；

3.對行內元素，定位後，宜設為inline-block，並定高；

4.目前的css3標準下，偽類只能控制其本身和子元素。

demo;

　　程式碼;

　　效果圖如下：

task8：《響應式網格（柵格化）佈局》
瞭解其原理及bootstrap柵格化佈局原理：

1.響應式主要使用到了媒體查詢，@media；

2.柵格化原理：將父容器寬度平均化為n等份，其下子元素按照多少等分來分配寬度（不能超過n），在對子元素浮動之後，子元素即會進行合理排列；

3.bootstrap的柵格原理：其把父元素分成了12等份，最基本的情況下有三層結構，假設最外層為contain，中間層為row-1,最裡層為col-1-n，此時設定contain的padding值/row-1的margin絕對值/col-1-n的padding值三者相等，其中row-1的margin值為負值，這樣就能進行成功巢狀，如果還需在col-1-n層內部繼續柵格化，此時就可將col-1-n直接看作該柵格的contain層，在其中加入row-2和col-2-n即可（padding和margin等值分別與最外的柵格佈局相關層的值相等）。

demo;

　　程式碼;

>task9：《使用HTML/CSS實現一個複雜頁面》
對效果圖實現畫素級還原，通過該任務綜合練習html/css的相關知識，個人認為涉及到這樣一些東西：
table的複雜樣式設定；柵格化佈局；多個ul巢狀的下拉選單（需要考慮程式碼複用）；form的複雜樣式設定；選擇器的合理使用；類名的科學設定；程式碼的複用性。
下面幾點是實際遇到的問題：

1.使用tabel的時候，不管html結構中寫沒寫tbody，瀏覽器都認為table與tr之間包裹了一層tbody，因此，使用選擇器的時候，需要注意加入tbody；

2.假設有祖父子三個層，分別命名為abc，如果b絕對定位並使用了top/right/bottom/left等屬性定位，c也絕對定位並使用了top/right/bottom/left等屬性定位。
此時如果b的box-sizing為border-box，則當使用偽類hover使其邊框寬度發生了變化後，c在前後位置會相對b發生變化；當b的box-sizing為content-box，
則當使用偽類hover使其邊框寬度發生了變化後，b在前後位置會相對a發生變化。

demo;

　　程式碼;

　　效果圖如下：

task10是對flexbox進行學習，flexbox的原理較為系統，其各類屬性的作用也比較複雜，在小結中不能詳細敘述，需要做系統性總結。