在將小薇學院任務完成之后，對完成各任務期間所掌握的一些細節，以及部分任務要求掌握的系統知識進行了小結。以下這些內容主要涉及的是自己在制作過程中所遇到的問題，觸及的是一些點，如果需要系統的掌握結構樣式這方面的內容，還是需要多練。
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。
task6：《通過HTML及CSS模擬報紙排版》
本任務主要是各種字體大小顏色不同等的設置，以及涉及區塊定位問題：
1.對于首字下沉效果：需要注意此時切記設置首字行高等于font-size，如果不設置，在某些瀏覽器中會實現首字下沉效果（如火狐），另一些則不會；
2.如果文本中含有url地址等內容，需對其設置word-wrap:break-word，強制自動換行，否則某些瀏覽器中會出現該文本溢出容器的情況；
task7：《實現常見的技術產品官網的頁面架構及樣式布局》
本任務涉及了使用ps切圖等一些ps基礎技能，在完成任務的過程中，應該考慮到官網實際應該是怎樣的，然后合理使用標簽，增加一些psd圖中不能看到的css效果：
1.對按鈕能元素合理使用transition屬性，使其效果平滑；
2.不能將塊級元素放進行內元素，即使是將行內元素設置為block也不行，因為此時對瀏覽器而言，其在解釋過程中，并未將該塊級元素放進行內元素，
則在這種情況下，某些選擇器會失效，對行內元素使用偽類來控制該塊級元素也會失效；
3.對行內元素，定位后，宜設為inline-block，并定高；
4.目前的css3標準下，偽類只能控制其本身和子元素。
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等值分別與最外的柵格布局相關層的值相等）。
>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發生變化。
task10是對flexbox進行學習，flexbox的原理較為系統，其各類屬性的作用也比較復雜，在小結中不能詳細敘述，需要做系統性總結。
