從零開始學 Web 之 CSS（四）CSS初始化、定位、overflow、標籤規範

你們好，這裏是「 Daotin的夢囈 」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」公衆號，歡迎你們訂閱關注。在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的項目。如今就讓咱們一塊兒進入 Web 前端學習的冒險之旅吧！

---

1、CSS初始化

一、什麼是CSS初始化呢？

CSS初始化是指重設瀏覽器的樣式。不一樣的瀏覽器默認的樣式可能不盡相同，因此開發時的第一件事可能就是如何把它們統一。若是沒對CSS初始化每每會出現瀏覽器之間的頁面差別。每次新開發網站或新網頁時候經過初始化CSS樣式的屬性，爲咱們將用到的CSS或html標籤更加方便準確，使得咱們開發網頁內容時更加方便簡潔，同時減小CSS代碼量，節約網頁下載時間。

二、爲何要初始化CSS呢？

爲了考慮到瀏覽器的兼容問題，其實不一樣瀏覽器對有些標籤的默認值是不一樣的，若是沒對CSS初始化每每會出現瀏覽器之間的頁面差別。固然，初始化樣式會對SEO有必定的影響，但魚和熊掌不可兼得，但力求影響最小的狀況下初始化。

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

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

以上參考連接：Gavin_zhong

三、常見的一些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; }

---

2、overflow 屬性

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

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

​

---

3、定位

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

一、靜態定位（默認）

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

二、絕對定位

position:absolute;

而後使用left | right | top | bottom 來肯定具體位置。

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

三、相對定位

position: relative;

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

四、固定定位

position:fixed;

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

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

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

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

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

---

4、標籤包含規範

• div能夠包含全部的標籤。
• p標籤不能包含div， h1等標籤（通常包含行內元素）。
• h1能夠包含p，div等標籤（通常不這樣）。
• 行內元素儘可能包含行內元素，行內元素不要包含塊元素。

---

5、規避脫標流

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

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

---

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

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

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

---