CSS 瀏覽器樣式重置終結版

前言

瀏覽器的一些默認樣式，有時候真的是特別醜； 雖然現在有現成的 UI 框架，但有時候寫個小東西不想用那麼龐大的 UI 框架,這篇文章介紹解決一些樣式問題，最後將給出完整的重置樣式表; 如果有遇到其它樣式問題，評論區提建議，我將持續更新

樣式問題解決

瀏覽器默認在 body 加上 8px 的 margin ，一般我寫的時候都會把這 8 px 的 margin 去掉

body{margin:0;}

---

想做個整屏顯示的頁面，就一頁，發現設置 div {height:100%;} 無效，其實是整個 html,body 就這麼高，你需要設置 html 和 body 的高度

html,body{height:100%;}

---

做窗口滿屏的另一種方法，使用定位來做

.element{
    display:absolute;
    top:0;bottom:0;
    left:0;right:0;
}

---

文本處理的幾個樣式說明 ( white-space word-break overflow text-overflow )
在寫代碼的時候 ，我們經常是想讓一個容器中的文本在一行顯示，除非有換行符,則可以這麼玩

.element{white-space:nowrap;}

常見的例子是溢出加省略號

.ellipsis{
    white-space: nowrap;
    overflow: hidden;
    text-overflow:ellipsis;
}

從後臺來的文本是換行符rn，但是前端是 br 換行，這時可以設置 div 的 white-space

.element{white-space:pre-wrap;}

一些文本容器需要設置溢出滾動和文本截斷

div,li{
    overflow-x: auto;
    word-break: break-all;
}

---

瀏覽器元素大小計算問題，box-sizing 有 content-box|border-box|inherit 三種方式，content-box 表示設置的是內容的大小，border-box 表示設置的是包含邊框和內補的大小
content-box 加內補的時候會撐大元素，而 border-box 加內補的時候會縮小內容區大小,我一般喜歡用 border-box

*,*:before,*:after{
    box-sizing: border-box;
    -moz-box-sizing: border-box; /* Firefox */
    -webkit-box-sizing: border-box; /* Safari */
}

---

浮動問題,當 內層元素浮動時，外層元素的高度會丟失，這時可以設置下外層元素找回高度

<ul style="overflow:hidden;">
    <li>浮動元素</li>
    <li>浮動元素</li>
</ul>

---

無序列表和有序列表的列表樣式； 大部分情況下，我們會拿有序列表來做導航菜單，這時候會出現有小圓點或數字的情況,可以去掉，需要用的時候再設置回來即可

ul,ol{list-style-type:none;}

---

無序列表和有序列表會有40px 的上下外邊距和 16 像素的左內補,如果做導航用，需要去掉

ul,ol{margin:0;padding:0;}

---

並排的兩個 div 做的按扭，設置 display:inline-block 時，會產生間隔；
產生的原因是因爲你加了回車或空格導致的，解決辦法是把這兩個 div 包在另一個 div 裏面，並設置父元素 div 的 font-size:0,最後再把子元素的字體設置回原來的值

<div sytle="font-size:0">
    <div class="inline-block-div">div1</div>
    <div class="inline-block-div">div2</div>
</div>

---

iframe 5 像素問題，當在一個div 中設置一個iframe ，並設置 iframe 寬高都是 100% 的時候（div 固定寬高），會發現 div 有滾動條;查資料說是 iframe 編譯出來裏面的html代碼中的兩個頭部聲明，引起的5px的高度差，所以會高出包裹的div，導致產生滾動條。解決辦法是設置 iframe 塊狀顯示

iframe{display:block;}

---

textarea 右下角的倒三角有時候會覺得很難看，其實它本意是讓 textarea 可以更改大小； 去掉的辦法爲設置不可調節大小

textarea{resize: none;}

---

input，textarea，select 在選中的時候，都有一層難看的外邊框,這個看個人情況去除

textarea,input,select{outline:0;}

---

a 鏈接的默認樣式，鼠標停留的樣式，和訪問過的樣式（記錄的是 href 訪問過）不太好看，可以設置得相對美觀點; 默認黑色，停留藍色

a{color:#333;text-decoration:none;}
a:hover{color:#0080ff;}

---

表格相關樣式優化

table {border-spacing:0;border-collapse:collapse;}
td,th{padding:0;}

---

默認的字體如果不改變的話，也是很醜的

body{font-family: arial;}

---

html5 元素塊狀顯示

article,aside,details,figcaption,figure,dialog,footer,header,hgroup,menu,nav,section {display:block;}

---

修改默認 placeholder 的顏色

::-webkit-input-placeholder{color:#999;}
::-moz-placeholder{color:#999;}
::-moz-placeholder{color:#999;}
:-ms-input-placeholder{color:#ccc;}

---

修改滾動條樣式,默認的滾動條有點醜

::-webkit-scrollbar {
    width: 7px;
    height:7px;
    background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb {
    background-color: #999;
}
::-webkit-scrollbar-track {
    background-color: #F5F5F5;
}

---

快速清除浮動 使用 after 和 before

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

* html .clearfix {
    zoom: 1;
} /* IE6 */
*:first-child+html .clearfix {
    zoom: 1;
} /* IE7 */

一些常用樣式技巧

在一個方型的彈出框中，我想在右上角加個刪除按扭,這裏可以設置父元素的定位爲相對定位，子元素爲絕對定位，然後設置子元素的位置即可解決

.parent{position:reletive;}
.child{position:absolute;top:2px;right:2px;}

文本垂直居中,可以設置行高和容器高度一致即可文本垂直居中

.element{height:50px;line-height:50px;}

使用 CSS3 的 transform 使任意元素垂直居中

.verticalcenter{
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

完整樣式文件

body{margin:0;font-family: arial;}
html,body{height:100%;}
*,*:before,*:after{
    box-sizing: border-box;
    -moz-box-sizing: border-box; /* Firefox */
    -webkit-box-sizing: border-box; /* Safari */
}
div,li{
    overflow-x: auto;
    word-break: break-all;
}
ul,ol{
    list-style-type:none;
    margin:0;
    padding:0;
}
iframe{display:block;}
textarea{resize: none;}
textarea,input,select{outline:0;}
a{color:#333;text-decoration:none;}
a:hover{color:#0080ff;}
table {border-spacing:0;border-collapse:collapse;}
td,th{padding:0;}
article,aside,details,figcaption,figure,dialog,footer,header,hgroup,menu,nav,section {display:block;}
::-webkit-input-placeholder{color:#999;}
::-moz-placeholder{color:#999;}
::-moz-placeholder{color:#999;}
:-ms-input-placeholder{color:#ccc;}
::-webkit-scrollbar {
    width: 7px;
    height:7px;
    background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb {
    background-color: #999;
}
::-webkit-scrollbar-track {
    background-color: #F5F5F5;
}
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

* html .clearfix {
    zoom: 1;
} /* IE6 */
*:first-child+html .clearfix {
    zoom: 1;
} /* IE7 */