大家好，這裡是「 Daotin的夢囈 」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」公眾號，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！

一、CSS初始化

1、什麼是CSS初始化呢？

CSS初始化是指重設瀏覽器的樣式。不同的瀏覽器預設的樣式可能不盡相同，所以開發時的第一件事可能就是如何把它們統一。如果沒對CSS初始化往往會出現瀏覽器之間的頁面差異。每次新開發網站或新網頁時候通過初始化CSS樣式的屬性，為我們將用到的CSS或html標籤更加方便準確，使得我們開發網頁內容時更加方便簡潔，同時減少CSS程式碼量，節約網頁下載時間。

2、為什麼要初始化CSS呢？

為了考慮到瀏覽器的相容問題，其實不同瀏覽器對有些標籤的預設值是不同的，如果沒對CSS初始化往往會出現瀏覽器之間的頁面差異。當然，初始化樣式會對SEO有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化。

最簡單的初始化方法就是：* {padding: 0; margin: 0;} 。有很多人也是這樣寫的。這確實很簡單，但有人就會感到疑問：*號這樣一個通用符在編寫程式碼的時候是快，但如果網站很大，CSS樣式表文件很大，這樣寫的話，他會把所有的標籤都初始化一遍，這樣就大大的加強了網站執行的負載，會使網站載入的時候需要很長一段時間。

寫過css的都知道每個網頁引進的css首先都需要初始化，而出名的css reset有YUI css reset（QQ、淘寶等都出現他的影子），業內用的最多的還有Erik Meyer’s CSS Reset。

3、常見的一些CSS初始化程式碼

• 騰訊

body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0} 
body{font:12px"宋體","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%;} 
a{color:#2d374b;text-decoration:none} 
a:hover{color:#cd0200;text-decoration:underline} 
em{font-style:normal} 
li{list-style:none} 
img{border:0;vertical-align:middle} 
table{border-collapse:collapse;border-spacing:0} 
p{word-wrap:break-word}
 

• 新浪

body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;} 
body{background:#fff;color:#333;font-size:12px; margin-top:5px;font-family:"SimSun","宋體","Arial Narrow";}
ul,ol{list-style-type:none;} 
select,input,img,select{vertical-align:middle;} 
a{text-decoration:none;} 
a:link{color:#009;} 
a:visited{color:#800080;} 
a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}

• 淘寶

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; } 
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; } 
h1, h2, h3, h4, h5, h6{ font-size:100%; } 
address, cite, dfn, em, var { font-style:normal; } 
code, kbd, pre, samp { font-family:couriernew, courier, monospace; } 
small{ font-size:12px; } 
ul, ol { list-style:none; } 
a { text-decoration:none; } 
a:hover { text-decoration:underline; } 
sup { vertical-align:text-top; } 
sub{ vertical-align:text-bottom; } 
legend { color:#000; } 
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; } 
table { border-collapse:collapse; border-spacing:0; } 

二、overflow 屬性

overflow 屬性規定當內容溢位元素框時發生的事情.

visible: 預設值。如果內容超出了元素框，則會在框外顯示。
hidden: 如果內容超出了元素框，則會隱藏超出的內容。
scroll：不管內容有沒有超出元素框，一直顯示滾動條.
auto：只有內容出了盒子才顯示滾動條。
inherit: 規定應該從父元素繼承 overflow 屬性的值。

​

三、定位

定位有四個方向: left | right | top | bottom

1、靜態定位（預設）

position: static; // 就是文件流模式的定位。

2、絕對定位

position:absolute;

然後使用left | right | top | bottom 來確定具體位置。

特點：
1.元素使用絕對定位之後不佔據原來的位置（脫標）
2.元素使用絕對定位，位置是從瀏覽器出發。
3.巢狀的盒子，父盒子沒有使用定位，子盒子絕對定位，子盒子位置是從瀏覽器出發。
4.巢狀的盒子，父盒子使用定位，子盒子絕對定位，子盒子位置是從父元素位置出發。
5.給行內元素使用絕對定位之後，轉換為行內塊。（不推薦使用，推薦使用display:inline-block;）

3、相對定位

position: relative;

特點：
1.使用相對定位，位置從自身出發。
2.不脫標，其他的元素不能佔有其原來的位置。
3.子絕父相（父元素相對定位，子元素絕對定位），用的最多的場景。
4.行內元素使用相對定位不能轉行內塊元素。

4、固定定位

position:fixed;

特點：
1.固定定位之後，不佔據原來的位置（脫標）
2.元素使用固定定位之後，位置從瀏覽器出發。
3.元素使用固定定位之後，會轉化為行內塊（不推薦，推薦使用display:inline-block;）

5、定位（脫標）的盒子居中對齊

margin:0 auto; 只能讓標準流的盒子居中對齊

定位的盒子居中：子絕父相，然後子盒子先往右走父盒子的一半50%，在向左走子盒子的一半(margin-left:負值。

PS：z-index:10改變層疊優先順序，值越大優先順序越高

四、標籤包含規範

• div可以包含所有的標籤。
• p標籤不能包含div， h1等標籤（一般包含行內元素）。
• h1可以包含p，div等標籤（一般不這樣）。
• 行內元素儘量包含行內元素，行內元素不要包含塊元素。

五、規避脫標流

1. 儘量使用標準流。
2. 標準流解決不了的使用浮動。
3. 浮動解決不了的使用定位。

margin-left:auto; //盒子一直往右衝，一直衝不動為止。也是 margin:0 auto; 的由來。

六、圖片和文字垂直居中對齊

vertical-align 主要用在 inline-block 標籤上，效果最好。
預設屬性是: vertical-align:baseline;

baseline: 預設。元素放置在父元素的基線上。
sub: 垂直對齊文字的下標。
super: 垂直對齊文字的上標
top: 把元素的頂端與行中最高元素的頂端對齊
text-top: 把元素的頂端與父元素字型的頂端對齊
middle: 把此元素放置在父元素的中部。
bottom: 把元素的頂端與行中最低的元素的頂端對齊。
text-bottom: 把元素的底端與父元素字型的底端對齊。
length:
%: 使用 "line-height" 屬性的百分比值來排列此元素。允許使用負值。
inherit: 規定應該從父元素繼承 vertical-align 屬性的值。