前言
瀏覽器的一些默認樣式，有時候真的是特別丑； 雖然現(xiàn)在有現(xiàn)成的 UI 框架，但有時候寫個小東西不想用那么龐大的 UI 框架,這篇文章介紹解決一些樣式問題，最后將給出完整的重置樣式表; 如果有遇到其它樣式問題，評論區(qū)提建議，我將持續(xù)更新
樣式問題解決
瀏覽器默認在 body 加上 8px 的 margin ，一般我寫的時候都會把這 8 px 的 margin 去掉
body{margin:0;}想做個整屏顯示的頁面，就一頁，發(fā)現(xiàn)設置 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 )
在寫代碼的時候 ，我們經(jīng)常是想讓一個容器中的文本在一行顯示，除非有換行符,則可以這么玩
.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 加內補的時候會縮小內容區(qū)大小,我一般喜歡用 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>
無序列表和有序列表的列表樣式； 大部分情況下，我們會拿有序列表來做導航菜單，這時候會出現(xiàn)有小圓點或數(shù)字的情況,可以去掉，需要用的時候再設置回來即可
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 固定寬高），會發(fā)現(xiàn) div 有滾動條;查資料說是 iframe 編譯出來里面的html代碼中的兩個頭部聲明，引起的5px的高度差，所以會高出包裹的div，導致產生滾動條。解決辦法是設置 iframe 塊狀顯示
iframe{display:block;}textarea 右下角的倒三角有時候會覺得很難看，其實它本意是讓 textarea 可以更改大小； 去掉的辦法為設置不可調節(jié)大小
textarea{resize: none;}input，textarea，select 在選中的時候，都有一層難看的外邊框,這個看個人情況去除
textarea,input,select{outline:0;}a 鏈接的默認樣式，鼠標停留的樣式，和訪問過的樣式（記錄的是 href 訪問過）不太好看，可以設置得相對美觀點; 默認黑色，停留藍色
a{color:#333;text-decoration:none;}a:hover{color:#0080ff;}表格相關樣式優(yōu)化
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 */以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
