瀏覽器默認樣式及reset

寫在前面

首先糾正一個易錯概念。div並不是生來就是塊元素，而是每一個瀏覽器都有一套默認的css樣式（優先級最低），默認樣式裏會把div設置成display: block;還有margin，padding等。這就是不一樣瀏覽器初始化樣式不一樣的緣由。也是爲何要作css reset的緣由。

注：chrome等能夠在調試工具裏看到默認樣式，是不可修改的，置灰的，以下圖。各瀏覽器默認樣式詳情請參考《瀏覽器默認樣式對比表》。

一、瀏覽器默認樣式

這裏無需過多贅述，最直觀的就是上表，給你們幾個地址：

一、瀏覽器默認樣式對比表 很是詳細的表格，不過貌似仍是暴力reset比較省力。。。

二、css知多少（4）——解讀瀏覽器默認樣式 裏面有一部分摺疊起來的代碼（仔細找，要點開纔看獲得），解讀的很是詳細。另外，強烈推薦閱讀整個系列，後面會附上目錄連接

三、瀏覽器默認樣式表.xlsx 我的將1當中的圖表作成了excel，更方便篩選與查看，有興趣的同窗能夠下載備用。

四、brower_default.css 我的將2中的樣式保存成了css，方便保存和查看，有興趣的同窗可下載備用

二、reset推薦

瀏覽器樣式初始化兩種流派，一種所有清零——reset，一種按照絕大多數瀏覽器的樣式進行統一——normalize。

兩者都有道理，可是也許是筆者比較懶，仍是更傾向於reset，所以在這裏推薦一款極簡的reset代碼，儘可能作到能少則少，能夠根據我的習慣在此基礎上添加，但願你們也能夠出一份力來優化。

至於normalize流派，可自行參考《normalize.css源碼》，裏面註釋很是詳細，閱讀以後對瀏覽器樣式初始化的理解有很是大的幫助。

PC：

/*基礎部分IE8+*/

body, div, span, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ul, ol, li, pre, form, label, button, input, textarea, select, table, thead, tbody, tfoot, tr, th, td, img, a, fieldset, option, em, iframe, :before, :after{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;} /* box-sizing : border-box 可讓設計稿與代碼的數字一致，詳情可自行百度*/

body, button, input, select, textarea{font: 12px/1 "Microsoft YaHei", "微軟雅黑", sans-serif;resize: none;outline: none;border: none;} /* 表單元素不會繼承字體樣式*/

ul, ol{list-style: none;}

table{border-collapse: collapse;border-spacing: 0;}

a, a:link, a:visited, a:hover, a:active{text-decoration: none;} /* 通常順序 LoVe & HAte 這樣不會把其餘狀態覆蓋*/

img{border: none;} /* IE10如下 a標籤中的img會有border*/

textarea{overflow: auto;} /* IE中textarea會有灰色的滾動條區域*/

/*可選部分*/

H5新增標籤的reset（待添加）

但願你們多多貢獻，持續更新……

 

M:

注：移動端有不少坑，各個機型都有可能出不一樣問題，若是你們遇到了，請多反饋，咱們實時更新，謝謝

/*基礎部分*/

body, div, span, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ul, ol, li, pre, form, label, button, input, textarea, select, table, thead, tbody, tfoot, tr, th, td, img, a, fieldset, option, em, iframe, :before, :after{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;} /* box-sizing : border-box 可讓設計稿與代碼的數字一致，詳情可自行百度*/

body, button, input, select, textarea{font: 12px/1 "Microsoft YaHei", "微軟雅黑", sans-serif;resize: none;outline: none;border: none;border-radius: 0;-webkit-appearance: none;} /* 表單元素不會繼承字體樣式*/

ul, ol{list-style: none;}

table{border-collapse: collapse;border-spacing: 0;}

a, a:link, a:visited, a:hover, a:active{text-decoration: none;} /* 通常順序 LoVe & HAte 這樣不會把其餘狀態覆蓋*/

/*可選部分*/

body{-webkit-tap-highlight-color: rgba(0, 0, 0, 0);} /* 去除表單元素點擊以後的高亮 */

body{-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;} /*禁止用戶選擇，也可設爲其餘值容許用戶選擇*/

body{-webkit-text-size-adjust: none; -moz-text-size-adjust: none; -ms-text-size-adjust: none; -o-text-size-adjust: none; text-size-adjust: none;} /*字體大小不隨着設備變化*/

 

經常使用功能：

 /*清除浮動*/

.clearfix:after{content:"";display:table;clear:both;}

 

/*伸縮盒*/

.box{display: flex;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: box;}
.item{width: 0;-moz-box-flex: 1;-webkit-box-flex: 1;box-flex: 1;flex: 1;-webkit-flex: 1;-ms-flex: 1;} /*width:0 是防止元素沒有內容時塌縮*/

 

/*設置placeholder樣式*/

::-webkit-input-placeholder{font-size: 1em; line-height: 1; color: #eee;} /* WebKit browsers */
:-moz-placeholder{font-size: 1em; line-height: 1; color: #eee;} /* Mozilla Firefox 4 to 18 */
::-moz-placeholder{font-size: 1em; line-height: 1; color: #eee;} /* Mozilla Firefox 19+ */
:-ms-input-placeholder{font-size: 1em; line-height: 1; color: #eee;} /* Internet Explorer 10+ */

 

/*input[type=date]個元素樣式，三角，叉，字體顏色等*/

::-webkit-datetime-edit{}
::-webkit-datetime-edit-fields-wrapper{}
::-webkit-datetime-edit-text{}
::-webkit-datetime-edit-year-field{}
::-webkit-datetime-edit-month-field{}
::-webkit-datetime-edit-day-field{}
::-webkit-inner-spin-button{}
::-webkit-calendar-picker-indicator{}
::-webkit-calendar-picker-indicator{}

 

但願你們集思廣益，多多添加……

寫在最後

沒有幾句本身說的話，總顯得是偷懶，亂寫一些感悟和小技巧吧。

一、ie8+的話，不少屬性能夠用：

好比display:table，能夠根據內容自適應大小，且有塊元素的表現

再好比能夠利用box-sizing:border-box;來使width=content+padding+border。不再用擔憂padding，border對width的影響了（bootstrap設置了*{box-sizing:border-box;}，好暴力。。。）

再好比清除浮動能夠寫成{content:"";display:table;clear:both;}，等等……

二、a標籤的樣式順序應爲a, :link, :visited, :hover, :active。可記爲LoVe & HAte，具體百度下吧，大概就是不按這個順序寫的話，某些狀態樣式會被覆蓋掉，你永遠看不到。

三、float的設計初衷是爲了實現文字環繞，並非爲了佈局。塌陷，清除浮動的知識點，請參考《CSS知多少系列》

四、display:inline-block;很好用，可是元素間會有空隙。這是由於瀏覽器會把「換行」解析成空白符，會佔位。因此要麼不換行，要麼父元素font-size:0;

五、一行排列多個元素，且之間有間距，最後一個不要間距，可設置父元素的margin爲負值。好比，子元素間距都是15px，父元素就能夠偷偷地設置margin爲-15px，固然爺爺元素須要overflow:hidden；

六、列表裏只有第一個不要上邊框。試試ul li+li{border-top:1px solid #ccc;}

七、css很好玩，試試只用一個div畫出各類圖形，可參考：http://one-div.com/

#div{width: 96px; height: 48px; margin: 20px 20px; float: left; border-color: #000000; border-style: solid; border-width: 2px 2px 50px 2px; border-radius: 100%; position: relative;}
#div:before{width: 12px; height: 12px; top: 50%; left: 0; content: ""; position: absolute; background-color: #ffffff; border: 18px solid #000000; border-radius: 100%;}
#div:after{width: 12px; height: 12px; top: 50%; left: 50%; background-color: #000000; border: 18px solid #ffffff; border-radius: 100%; content: ""; position: absolute;}

參考資料：

《瀏覽器默認樣式對比表》 很強大的一個表

《CSS知多少系列》 強烈推薦！！每段信息量都很大！

《normalize.css源碼》 源碼裏註釋很是詳細

《CSS Reset ，你選對了嗎？》 列舉了4種主流reset的方案

《Reset CSS:只選對的，不選"貴"的》 能夠看看