Box Model,邊距摺疊，內聯和塊標籤，CSSReset

時間 2019-12-09

標籤 box model 邊距摺疊內聯標籤 cssreset 简体版

原文原文鏈接

1、盒子模型（Box Model）

盒子模型也有人稱爲框模型，HTML中的多數元素都會在瀏覽器中生成一個矩形的區域，每一個區域包含四個組成部分，從外向內依次是：外邊距（Margin）、邊框（Border）、內邊距（Padding）和內容（Content），其實盒子模型有兩種，分別是 ie 盒子模型和標準 w3c 盒子模型，加上了doctype聲明，讓全部瀏覽器都會採用標準 w3c 盒子模型去解釋你的盒子。當設置一個元素的樣式以下：css

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>盒子模型</title>
        <style type="text/css">
            #box{
                width: 100px;
                height: 100px;
                margin: 20px;
                padding: 20px;
                border: 10px solid blue;
            }
        </style>
    </head>
    <body>
        <div id="box">
            Box Model
        </div>
    </body>
</html>

運行結果：html

1.一、寬度測試

計算最大寬度，示例以下：java

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>盒子模型</title>
        <style type="text/css">
            #box{
                width: 800px;
                padding: 10px;
                border: 5px solid blue;
                margin: 10px;
            }
            .sbox{
                display: inline-block;
                padding: 10px;  
                margin: 10px;   
                border: solid 10px coral;
                background: lightblue;
                width: ?;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <div class="sbox">Left</div><div class="sbox">Right</div>
        </div>
    </body>
</html>

要達到以下效果，請求?處最大能夠設置爲多少像素？git

答案：github

340px

1.二、溢出測試

代碼以下：web

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>盒子模型</title>
        <style type="text/css">
            #box{
                width: 800px;
                padding: 10px;
                border: 5px solid blue;
                margin: 10px;
                height: 100px;
            }
            #box #innerBox{
                background: lightblue;
                height:50px ;
                width: 100%;
                padding: 10px;
                margin: 10px;
                border: 10px solid lightcoral;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <div id="innerBox">
                innerBox
            </div>
        </div>
    </body>
</html>

請問運行時innerBox是否會超出box，若是會，超出多少？bootstrap

可見部分=850-815=35，還有10個margin不可見，45pxcanvas

若是不想讓innerBox超出，則應該刪除其100%的寬度設置，去掉width:100%，通常不要設置，畫蛇添足。vim

1.三、box-sizing屬性

設置或檢索對象的盒模型組成模式瀏覽器

content-box： padding和border不被包含在定義的width和height以內。對象的實際寬度等於設置的width值和border、padding之和，即 ( Element width = width + border + padding，但佔有頁面位置還要加上margin ) 此屬性表現爲標準模式下的盒模型。

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>盒子模型</title>
        <style type="text/css">
            #box{
                width: 100px;
                height: 100px;
                padding: 10px;
                border: 10px solid blue;
                margin: 10px;
            }
        </style>
    </head>
    <body>
        <div id="box">
            Box Model
        </div>
    </body>
</html>

運行結果：

由於默認就是爲content-box因此這裏沒有直接設置，佔用寬度爲160px;

border-box： padding和border被包含在定義的width和height以內。對象的實際寬度就等於設置的width值，即便定義有border和padding也不會改變對象的實際寬度，即 ( Element width = width ) 此屬性表現爲怪異模式下的盒模型。

示例代碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>盒子模型</title>
        <style type="text/css">
            #box{
                width: 100px;
                height: 100px;
                padding: 10px;
                border: 10px solid blue;
                margin: 10px;
                box-sizing: border-box;  /*在上一個例子中添加的*/
            }
        </style>
    </head>
    <body>
        <div id="box">
            Box Model
        </div>
    </body>
</html>

運行結果：

當box-sizing: border-box時的寬度設置會包含border與padding，但不包含margin，但margin也會佔用位置。

1.四、利用CSS畫圖

示例代碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>盒子模型 - 三角形</title>
        <style type="text/css">
            #box{
                width: 0;
                height: 0;
                border: 100px solid blue;
                border-color: blue transparent transparent transparent;
                /*設置邊線的顏色，transparent表示透明的顏色，按上右下左的順時鐘方向*/
            }
        </style>
    </head>
    <body>
        <div id="box">
        </div>
    </body>
</html>

運行結果：

心形：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #heart {
                position: relative;
                width: 100px;
                height: 90px;
            }
            #heart:after,#heart:before {
                position: absolute;
                content: "";
                left: 50px;
                top: 0;
                width: 50px;
                height: 80px;
                background: red;
                border-radius: 50px 50px 0px 0px;
                transform: rotate(-45deg);
                transform-origin: 0 100%;
            }
            #heart:after {
                left: 0;
                transform: rotate(45deg);
                transform-origin: 100% 100%;
            }
        </style>
    </head>
    <body>
        <div id="heart">
        </div>
    </body>
</html>

運行結果：

2、邊距摺疊

2.一、概要

外邊距摺疊：相鄰的兩個或多個外邊距 (margin) 在垂直方向會合併成一個外邊距（margin）
相鄰：沒有被非空內容、padding、border 或 clear 分隔開的margin特性. 非空內容就是說這元素之間要麼是兄弟關係或者父子關係，如：

示例代碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #div1{
                border: 3px solid blue;
                height: 200px;
                background: lightcoral;
            }
            #div2{
                height: 100px;
                background: lightgreen;
                margin-top: 20px;
            }
            #div3{
                height: 50px;
                width: 50%;
                background: lightblue;
                margin-top: 20px;
            }
        </style>
    </head>
    <body>
        <div id="div1">
            <div id="div2">
                <div id="div3">
                </div>
            </div>
        </div>
    </body>
</html>

運行結果：

由於div2與div3的外邊距是相鄰的（是父子關係的相鄰），當div2 margin-top爲20,div3的margin-top也爲20,此時div2與div3的外邊距會合並，就是摺疊。

若是想讓div3的margin-top生效，能夠破壞相鄰的限制，示例：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #div1{
                border: 3px solid blue;
                height: 200px;
                background: lightcoral;
            }
            
            #div2{
                height: 100px;
                background: lightgreen;
                margin-top: 20px;
                border: 1px solid green;
            }
            
            #div3{
                height: 50px;
                width: 50%;
                background: lightblue;
                margin-top: 20px;
            }
        </style>
    </head>

    <body>
        <div id="div1">
            <div id="div2">
                <div id="div3">
                </div>
            </div>
        </div>
    </body>

</html>

運行結果：

2.二、垂直方向外邊距合併計算

a)、參加摺疊的margin都是正值：取其中 margin 較大的值爲最終 margin 值。

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>邊距摺疊</title>
    </head>
    <body>
        <div style="height:90px; margin-bottom:99px; width:90px; ">X</div>
        <div style="height:90px; margin-top:100px; width:90px; ">Y</div>
    </body>
</html>

運行結果：

b)、參與摺疊的 margin 都是負值：取的是其中絕對值較大的，而後，從 0 位置，負向位移。
示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>邊距摺疊</title>
    </head>
    <body>
        <div style="height:90px; margin-bottom:-10px; width:90px; ">X</div>
        <div style="height:90px; margin-top:-30px;width:70px; ">Y</div>
    </body>
</html>

結果：

c)、參與摺疊的 margin 中有正值，有負值：先取出負 margin 中絕對值中最大的，而後，和正 margin 值中最大的 margin 相加。
示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>參與摺疊的 margin 中有正值，有負值</title>
    </head>
    <body>
        <div style="height:90px; margin-bottom:-30px; width:90px; ">X</div>
        <div style="height:90px; margin-top:30px;width:70px; ">Y</div>
    </body>
</html>

運行結果：

3、內聯與塊級標籤

3.一、行內標籤與塊標籤區別

html中的標籤默認主要分爲兩大類型，一類爲塊級元素，另外一類是行內元素，許多人也把行內稱爲內聯，因此叫內聯元素，其實就是一個意思。爲了很好的佈局，必須理解它們間的區別，區別以下：

經常使用塊級與內聯元素：

內聯元素（行內元素）內聯元素(inline element)
 a - 超連接
 abbr - 縮寫
 acronym - 首字
 bdo - bidi override
 big - 大字體
 br - 換行
 cite - 引用
 code - 計算機代碼(在引用源碼的時候須要)
 dfn - 定義字段
 em - 強調
 i - 斜體
 img - 圖片
 input - 輸入框
 kbd - 定義鍵盤文本
 label - 表格標籤
 q - 短引用
 samp - 定義範例計算機代碼
 select - 項目選擇
 small - 小字體文本
 span - 經常使用內聯容器，定義文本內區塊
 strike - 中劃線
 strong - 粗體強調
 sub - 下標
 sup - 上標
 textarea - 多行文本輸入框
 tt - 電傳文本
 u - 下劃線
 var - 定義變量

塊元素(block element)
 address - 地址
 blockquote - 塊引用
 center - 舉中對齊塊
 dir - 目錄列表
 div - 經常使用塊級容易，也是css layout的主要標籤
 dl - 定義列表
 fieldset - form控制組
 form - 交互表單
 h1 - 大標題
 h2 - 副標題
 h3 - 3級標題
 h4 - 4級標題
 h5 - 5級標題
 h6 - 6級標題
 hr - 水平分隔線
 isindex - input prompt
 menu - 菜單列表
 noframes - frames可選內容，（對於不支持frame的瀏覽器顯示此區塊內容
 noscript - ）可選腳本內容（對於不支持script的瀏覽器顯示此內容）
 ol - 排序表單
 p - 段落
 pre - 格式化文本
 table - 表格
 ul - 非排序列表

可變元素，可變元素爲根據上下文語境決定該元素爲塊元素或者內聯元素。
 applet - java applet
 button - 按鈕
 del - 刪除文本
 iframe - inline frame
 ins - 插入的文本
 map - 圖片區塊(map)
 object - object對象
 script - 客戶端腳本

View Code

行內標籤與塊標籤特性示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>塊級標籤與行內標籤</title>
        <style type="text/css">
            #div1,
            #div2 {
                background: lightblue;
            }
            span {
                width: 100px;
                /*無效*/
                height: 20px;
                /*無效*/
                margin: 20px;
                /*水平方向有效，垂直方向無效*/
                padding: 20px;
                /*水平方向有效，垂直方向無效*/
            }
            #div3{
                width: 500px;
                border: 1px solid #ADD8E6;
                word-break: break-all;
            }
        </style>
    </head>

    <body>
        <h2>塊級標籤與行內標籤</h2>
        <div id="div1">div1</div>
        <div id="div2">div2</div>
        <div id="div3">
            <span id="span1">span1</span>
            <span id="span2">span2</span>
            <span id="span3">span3</span>
            <span id="span4">spanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspan4</span>
        </div>
    </body>
</html>

運行結果：

使用display設置元素的顯示方式

語法以下：

none：隱藏對象。與visibility屬性的hidden值不一樣，其不爲被隱藏的對象保留其物理空間
inline：指定對象爲內聯元素。
block：指定對象爲塊元素。
list-item：指定對象爲列表項目。
inline-block：指定對象爲內聯塊元素。（CSS2）
table：指定對象做爲塊元素級的表格。類同於html標籤<table>（CSS2）
inline-table：指定對象做爲內聯元素級的表格。類同於html標籤<table>（CSS2）
table-caption：指定對象做爲表格標題。類同於html標籤<caption>（CSS2）
table-cell：指定對象做爲表格單元格。類同於html標籤<td>（CSS2）
table-row：指定對象做爲表格行。類同於html標籤<tr>（CSS2）
table-row-group：指定對象做爲表格行組。類同於html標籤<tbody>（CSS2）
table-column：指定對象做爲表格列。類同於html標籤<col>（CSS2）
table-column-group：指定對象做爲表格列組顯示。類同於html標籤<colgroup>（CSS2）
table-header-group：指定對象做爲表格標題組。類同於html標籤<thead>（CSS2）
table-footer-group：指定對象做爲表格腳註組。類同於html標籤<tfoot>（CSS2）
run-in：根據上下文決定對象是內聯對象仍是塊級對象。（CSS3）
box：將對象做爲彈性伸縮盒顯示。（伸縮盒最老版本）（CSS3）
inline-box：將對象做爲內聯塊級彈性伸縮盒顯示。（伸縮盒最老版本）（CSS3）
flexbox：將對象做爲彈性伸縮盒顯示。（伸縮盒過渡版本）（CSS3）
inline-flexbox：將對象做爲內聯塊級彈性伸縮盒顯示。（伸縮盒過渡版本）（CSS3）
flex：將對象做爲彈性伸縮盒顯示。（伸縮盒最新版本）（CSS3）
inline-flex：將對象做爲內聯塊級彈性伸縮盒顯示。（伸縮盒最新版本）（CSS3）

若是display設置爲none，float及position屬性定義將不生效；
若是position既不是static也不是relative或者float不是none或者元素是根元素，當display:inline-table時，display的計算值爲table；當display:inline | inline-block | run-in | table-* 系時，display的計算值爲block，其它狀況爲指定值；
IE6,7支持inline元素轉換成inline-block，但不支持block元素轉換成inline-block，因此非inline元素在IE6,7下要轉換成inline-block，需先轉換成inline，而後觸發hasLayout，以此來得到和inline-block相似的效果；你能夠這樣：
全兼容的inline-block：

div {
display: inline-block;
*display: inline;
*zoom: 1;
}

3.二、隱藏

可使用3種辦法讓元素隱藏：

a)、使用CSS的display:none，不會佔有原來的位置

b)、使用CSS的visibility:hidden，會佔有原來的位置

c)、使用HTML5中的新增屬性hidden="hidden"，不會佔有原來的位置

示例：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>隱藏</title>
        <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            border: 2px solid blue;
            margin: 10px;
            font-size: 30px;
        }
        #div1
        {
            display: none;
        }
        #div2{
            visibility: hidden;
        }
        </style>
    </head>

    <body>
        <div id="div0">div0</div>
        <div id="div1">div1</div>
        <div id="div2">div2</div>
        <div id="div3" hidden="hidden">div3</div>
        <div id="div4">div4</div>
    </body>

</html>

運行結果：

3.三、行內塊標籤

當元素的樣式display爲inline-block屬性時就被設置成了行內塊標籤，同時擁有行內標籤與塊標籤的特性，再也不佔整行；能夠設置寬度，高度；padding與margin都有效。

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>inline-block</title>
        <style type="text/css">
        div,span{
            width: 100px;
            height: 100px;
            border: 2px solid blue;
            font-size: 30px;
            display: inline-block;
            margin: 10px;
            padding: 10px;
        }
        </style>
    </head>
    <body>
        <div id="div0">div0</div><div id="div1">div1</div><div id="div2">div2</div><div id="div3">div3</div><div id="div4">div4</div>
        <p>
            <span>span1</span><span>span2</span><span>span3</span>
        </p>
    </body>
</html>

運行結果：

3.四、菜單示例

使用display屬性結合圖片實現網頁中的圖片菜單：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>menu</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            
            #menu {
                width: 1004px;
                margin: 0 auto;
                margin: 10px;
                background: #348200;
                font-size: 0px;
                background: url(img/menubg.jpg) repeat-x;
                height: 49px;
                line-height: 49px;
            }
            
            #menu a {
                display: inline-block;
                width: 96px;
                height: 49px;
                line-height: 49px;
                background: url(img/menu.jpg) no-repeat;
                color: white;
                font-size: 13px;
                text-decoration: none;
                text-align: center;
                margin-right: 1px;
            }
            
            #menu a:hover {
                background-image: url(img/menunow.jpg);
            }
            
            #divLeft {
                width: 25px;
                height: 49px;
                line-height: 49px;
                background: url(img/menuleft.jpg) no-repeat;
                float: left;
            }
            
            #divRight {
                width: 25px;
                height: 49px;
                background: url(img/menuright.jpg) no-repeat;
                float: right;
            }
            
            #divTime {
                width: 260px;
                height: 49px;
                font-size: 14px;
                text-align: center;
                float: left;
            }

            #divMenu{
                float: right;
            }
        </style>
    </head>

    <body>
        <div id="menu">
            <div id="divLeft" class="iDiv"></div>
            <div id="divTime" class="iDiv">
                <div>
                時間：2016/11/24 下午2:49:56
                </div>
            </div>
            <div id="divRight" class="iDiv">
            </div>
            <div class="iDiv" id="divMenu">
                <a href='index.html'>網站首頁</a>
                <a href='articleList/15.html'>公司簡介</a>
                <a href='productList/11.html'>產品展現</a>
                <a href='articleList/17.html'>養殖技術</a>
                <a href='articleList/18.html'>娃娃魚介紹</a>
                <a href='productList/18.html'>企業資質</a>
                <a href='productList/19.html'>友情連接</a>
            </div>
        </div>
    </body>

</html>

View Code

運行效果：

4、重置瀏覽器默認樣式

下圖是同一段HTML在3個不一樣內核的瀏覽器中打開的效果，你發現有不同嗎？很明顯有區別，這就是瀏覽器的默認樣式，每個瀏覽器會設置user agent stylesheet，好比默認字體大小爲16px。瀏覽器的默認樣式會給咱們帶必定的麻煩，好比在計算元素的大小時默認樣式會設置padding與margin值，不一樣的瀏覽器可能設置的不同，就會出現偏差，重置瀏覽器樣式就是讓您能夠在一張白紙上寫字。

最開始會使用一個簡單的辦法，如：

            *
            {
                margin: 0;
                padding: 0;
            }

雖然能所有重置，但因爲性能較低，不推薦使用。由於*須要遍歷整個DOM樹，當頁面節點較多時，會影響頁面的渲染性能。

4.一、CSSReset

每種瀏覽器都有一套默認的樣式表，即user agent stylesheet，網頁在沒有指定的樣式時，按瀏覽器內置的樣式表來渲染。這是合理的，像word中也有一些預留樣式，可讓咱們的排版更美觀整齊。不一樣瀏覽器甚至同一瀏覽器不一樣版本的默認樣式是不一樣的。但這樣會有不少兼容問題，CSSReset能夠將全部瀏覽器默認樣式設置成同樣。

4.1.一、MT css reset

/*MT css reset*/
body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;}
h1,h2,h3,h4,h5,h6{font-size:100%}   /*繼承body設定的字體大小*/
/* 根據屏幕大小改變文字大小 */
html{font-size:20px;}  /*chorme下設置爲10px無效，推薦設置爲20px，1rem=20px*/
@media screen and (max-width:768px){    /*手機屏幕*/
html{font-size: 15px;} 
}
@media screen and (min-width: 768px) and (max-width:992px){  /*平板屏幕*/
html{font-size: 20px;}
}
@media screen and (min-width: 992px){   /*電腦屏幕*/
html{font-size: 25px;}
}  
body{font-family: "Droid Sans Fallback","Heiti SC","Droid Sans",Helvetica,"Helvetica Neue",sans-self; color:#555; background-color:#F7F7F7;}
.clearfix:after{content:"."; display:block; visibility:hidden; height:0; clear:both;}   /*除去浮動*/
a:hover{text-decoration: none;}
ul,ol{list-style: none;margin:0;padding:0;}
img {max-width: 100%;height: auto;} /* 圖片自適應 */
em,i{font-style: normal}  /*如需默認樣式可修改*/
button,input,select,textarea{vertical-align:middle;outline:none;}  /*出去得到焦點下的藍色邊框*/
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder {color: #ccc;}  /*修改placeholder文字顏色*/

View Code

4.1.二、PC css reset

/*PC css reset*/
body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;}
h1,h2,h3,h4,h5,h6{font-size:100%}   /*繼承body設定的字體大小*/   
body{font-family: "Microsoft YaHei",Tahoma,Arial,Simsun,sans-self;}
.clearfix:after{content:"."; display:block; visibility:hidden; height:0; clear:both;} /*除去浮動*/
.clearfix{zoom:1;}  
a:hover{text-decoration: none;} 
ul,ol{list-style: none;margin:0;padding:0;}    /*當要添加小圖標時可修改*/
img{vertical-align:middle;border:0;-ms-interpolation-mode:bicubic;} /*在IE下除去邊框和底部空白*/
em,i{font-style: normal}  /*如需默認樣式可修改*/
input,select,textarea{vertical-align:middle;outline:none;}  /*出去得到焦點下的藍色邊框*/
textarea{resize:none;}  /*禁止用戶縮放文本框*/
table {border-collapse: collapse;border-spacing: 0;} 
button,input[type="button"],input[type="reset"],input[type="submit"] {cursor:pointer;-webkit-appearance:button;-moz-appearance:button;} /*按鈕初始化*/
input::-moz-placeholder,textarea::-moz-placeholder {color: #ccc;}   /*修改placeholder文字顏色*/
input:-ms-input-placeholder,textarea:-ms-input-placeholder {color: #ccc;}
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder {color: #ccc;}

View Code

4.1.三、PPTV css reset

@charset "utf-8";
body,div,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,code,form,fieldset,legend,button,textarea,table,tbody,tfoot,thead,th,td,article,aside,dialog,figure,footer,header,hgroup,menu,nav,section,time,mark,audio,video{margin:0;padding:0;outline:0;background:transparent;}article,aside,dialog,figure,footer,header,hgroup,nav,section{display:block;}body,button,input,select,textarea{font:12px/1.5 arial,\5b8b\4f53,sans-serif;}h1,h2,h3,h4,h5,h6,button,input,select,textarea{font-size:100%;}address,cite,dfn,em,var{font-style:normal;}code,kbd,pre,samp{font-family:courier new,courier,monospace;}small{font-size:12px;}ul,ol,li{list-style:none;}img{border:none;}a{text-decoration:none;outline:thin none;}a:hover{text-decoration:underline;}table{border-collapse:collapse;border-spacing:0;}.clear{clear:both;}.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}html{-webkit-text-size-adjust: none;}
body{font:12px/1.5 \5FAE\8F6F\96C5\9ED1,tahoma,arial,\5b8b\4f53,sans-serif;}

View Code

4.1.4 YUI css reset

/*
YUI 3.4.1 (build 4118)
Copyright 2011 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/
 
html{color:#000;background:#FFF}
 
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}
 
table{border-collapse:collapse;border-spacing:0}
 
fieldset,img{border:0}
 
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
 
ol,ul{list-style:none}
 
caption,th{text-align:left}
 
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
 
q:before,q:after{content:''}
 
abbr,acronym{border:0;font-variant:normal}
 
sup{vertical-align:text-top}
 
sub{vertical-align:text-bottom}
 
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}
 
input,textarea,select{*font-size:100%}
 
legend{color:#000}

View Code

4.1.五、marx css reset

/*! sanitize.css v3.3.0 | CC0 1.0 Public Domain | github.com/10up/sanitize.css */
/*
 * Normalization
 */
abbr[title] {
  text-decoration: underline;
  text-decoration: underline dotted; }

audio:not([controls]) {
  display: none; }

b,
strong {
  font-weight: bolder; }

button {
  -webkit-appearance: button;
  overflow: visible; }

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0; }

button:-moz-focusring,
input:-moz-focusring {
  outline: 1px dotted ButtonText; }

button,
select {
  text-transform: none; }

details {
  display: block; }

hr {
  overflow: visible; }

html {
  -ms-overflow-style: -ms-autohiding-scrollbar;
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%; }

input {
  -webkit-border-radius: 0; }
  input[type="button"], input[type="reset"], input[type="submit"] {
    -webkit-appearance: button; }
  input[type="number"] {
    width: auto; }
  input[type="search"] {
    -webkit-appearance: textfield; }
    input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
      -webkit-appearance: none; }

main {
  display: block; }

pre {
  overflow: auto; }

progress {
  display: inline-block; }

summary {
  display: block; }

svg:not(:root) {
  overflow: hidden; }

template {
  display: none; }

textarea {
  overflow: auto; }

[hidden] {
  display: none; }

/*
 * Universal inheritance
 */
*,
::before,
::after {
  box-sizing: inherit; }

* {
  font-size: inherit;
  line-height: inherit; }

::before,
::after {
  text-decoration: inherit;
  vertical-align: inherit; }

button,
input,
select,
textarea {
  font-family: inherit;
  font-style: inherit;
  font-weight: inherit; }

/*
 * Opinionated defaults
 */
* {
  margin: 0;
  padding: 0; }

*,
::before,
::after {
  border-style: solid;
  border-width: 0; }

a,
area,
button,
input,
label,
select,
textarea,
[tabindex] {
  -ms-touch-action: manipulation;
      touch-action: manipulation; }

select {
  -moz-appearance: none;
  -webkit-appearance: none; }
  select::-ms-expand {
    display: none; }
  select::-ms-value {
    color: currentColor; }

svg {
  fill: currentColor; }

[aria-busy="true"] {
  cursor: progress; }

[aria-controls] {
  cursor: pointer; }

[aria-disabled] {
  cursor: default; }

[hidden][aria-hidden="false"] {
  clip: rect(0 0 0 0);
  display: inherit;
  position: absolute; }
  [hidden][aria-hidden="false"]:focus {
    clip: auto; }

/*
 * Configurable defaults
 */
* {
  background-repeat: no-repeat; }

:root {
  background-color: #ffffff;
  box-sizing: border-box;
  color: #000000;
  cursor: default;
  font: 66.66667% sans-serif; }

a {
  text-decoration: none; }

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle; }

button,
input,
select,
textarea {
  background-color: transparent;
  color: inherit; }

button,
[type="button"],
[type="date"],
[type="datetime"],
[type="datetime-local"],
[type="email"],
[type="month"],
[type="number"],
[type="password"],
[type="reset"],
[type="search"],
[type="submit"],
[type="tel"],
[type="text"],
[type="time"],
[type="url"],
[type="week"],
select,
textarea {
  min-height: 1.5em; }

code,
kbd,
pre,
samp {
  font-family: monospace, monospace; }

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

small {
  font-size: 75%; }

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

textarea {
  resize: vertical; }

::-moz-selection {
  background-color: #b3d4fc;
  color: #ffffff;
  text-shadow: none; }

::selection {
  background-color: #b3d4fc;
  color: #ffffff;
  text-shadow: none; }

main,
header,
footer,
article,
section,
aside,
details,
summary {
  margin: 0 auto;
  margin-bottom: 16px;
  width: 100%; }

main {
  display: block;
  margin: 0 auto;
  max-width: 768px;
  padding: 0 16px 16px; }

footer {
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  clear: both;
  display: inline-block;
  float: left;
  max-width: 100%;
  padding: 16px 0;
  text-align: center; }
  footer p {
    margin-bottom: 0; }

hr {
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  display: block;
  margin-bottom: 16px;
  width: 100%; }

img {
  height: auto;
  max-width: 100%;
  vertical-align: baseline; }

@media screen and (max-width: 400px) {
  article,
  section,
  aside {
    clear: both;
    display: block;
    max-width: 100%; }
  img {
    margin-right: 16px; } }

body {
  color: rgba(0, 0, 0, 0.8);
  font-family: "Helvetica Neue", Helvetica, "Lucida Grande", sans-serif;
  font-size: 16px;
  line-height: 1.4; }

p {
  margin: 0;
  margin-bottom: 16px; }

h1,
h2,
h3,
h4,
h5,
h6 {
  color: inherit;
  font-family: inherit;
  line-height: inherit; }

h1 {
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  font-size: 36px;
  font-weight: 500;
  margin: 20px 0 16px; }

h2 {
  font-size: 30px;
  font-weight: 500;
  margin: 20px 0 16px; }

h3 {
  font-size: 24px;
  font-weight: 500;
  margin: 16px 0 4px; }

h4 {
  font-size: 18px;
  font-weight: 600;
  margin: 16px 0 4px; }

h5 {
  font-size: 16px;
  font-weight: 600;
  margin: 16px 0 4px; }

h6 {
  color: rgba(0, 0, 0, 0.54);
  font-size: 14px;
  font-weight: 600;
  margin: 16px 0 4px; }

small {
  color: rgba(0, 0, 0, 0.54);
  vertical-align: bottom; }

pre {
  background: #efefef;
  color: rgba(0, 0, 0, 0.8);
  display: block;
  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
  font-size: 16px;
  margin: 16px 0;
  padding: 16px;
  white-space: pre-wrap; }

code {
  color: rgba(0, 0, 0, 0.8);
  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
  font-size: 16px;
  line-height: inherit;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  word-break: break-all;
  word-wrap: break-word; }

a {
  color: #2196f3; }
  a:hover, a:focus {
    color: #2196f3;
    text-decoration: underline; }

dl {
  margin-bottom: 16px; }

dd {
  margin-left: 40px; }

ul,
ol {
  margin-bottom: 8px;
  padding-left: 40px;
  vertical-align: baseline; }

blockquote {
  border-left: 2px solid #2196f3;
  font-family: Georgia, Times, "Times New Roman", serif;
  font-style: italic;
  margin: 16px 0;
  padding-left: 16px; }

figcaption {
  font-family: Georgia, Times, "Times New Roman", serif; }

u {
  text-decoration: underline; }

s {
  text-decoration: line-through; }

sup {
  font-size: 14px;
  vertical-align: super; }

sub {
  font-size: 14px;
  vertical-align: sub; }

mark {
  background: #ffeb3b; }

input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="week"],
input[type="number"],
input[type="search"],
input[type="tel"],
select {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 4px;
  color: rgba(0, 0, 0, 0.8);
  display: inline-block;
  padding: 4px;
  vertical-align: middle; }

input[type="color"] {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 4px;
  display: inline-block;
  vertical-align: middle; }

input:not([type]) {
  -webkit-appearance: none;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 4px;
  display: inline-block;
  padding: 8px;
  text-align: left; }

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
select:focus,
textarea:focus {
  border-color: #2196f3; }

input:not([type]):focus {
  border-color: #2196f3; }

input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
  outline: 1px thin rgba(0, 0, 0, 0.12); }

input[type="text"][disabled],
input[type="password"][disabled],
input[type="email"][disabled],
input[type="url"][disabled],
input[type="date"][disabled],
input[type="month"][disabled],
input[type="time"][disabled],
input[type="datetime"][disabled],
input[type="datetime-local"][disabled],
input[type="week"][disabled],
input[type="number"][disabled],
input[type="search"][disabled],
input[type="tel"][disabled],
input[type="color"][disabled],
select[disabled],
textarea[disabled] {
  background-color: rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  cursor: not-allowed; }

input:not([type])[disabled] {
  background-color: rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  cursor: not-allowed; }

input[readonly],
select[readonly],
textarea[readonly] {
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54); }

input:focus:invalid,
textarea:focus:invalid,
select:focus:invalid {
  border-color: #ea1c0d;
  color: #f44336; }

input[type="file"]:focus:invalid:focus,
input[type="radio"]:focus:invalid:focus,
input[type="checkbox"]:focus:invalid:focus {
  outline-color: #f44336; }

select {
  -webkit-appearance: menulist-button;
  border: 1px solid rgba(0, 0, 0, 0.12);
  vertical-align: sub; }

select[multiple] {
  height: auto; }

label {
  line-height: 2; }

fieldset {
  border: 0;
  margin: 0;
  padding: 8px 0; }

legend {
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.8);
  display: block;
  margin-bottom: 8px;
  padding: 8px 0;
  width: 100%; }

textarea {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 4px;
  display: block;
  margin-bottom: 8px;
  max-width: 100%;
  padding: 8px;
  vertical-align: middle; }

input[type=submit],
input[type=reset],
button {
  background: #2196f3;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  margin: 0;
  padding: 8px 16px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap; }

input[type=submit]::-moz-focus-inner,
input[type=reset]::-moz-focus-inner,
button::-moz-focus-inner {
  padding: 0; }

input[type=submit]:hover,
input[type=reset]:hover,
button:hover {
  background: #0c7cd5;
  border-color: 1px solid rgba(0, 0, 0, 0.54); }

input[type=submit]:active,
input[type=reset]:active,
button:active {
  background: #0c7cd5;
  border-color: 1px solid rgba(0, 0, 0, 0.54);
  box-shadow: inset 0 0 4px 0 rgba(0, 0, 0, 0.2);
  outline-offset: -2px; }

input[type=submit]:focus,
input[type=reset]:focus,
button:focus {
  background: #0c7cd5;
  border-color: 1px solid rgba(0, 0, 0, 0.54);
  box-shadow: inset 0 0 4px 0 rgba(0, 0, 0, 0.2);
  outline: 0; }

input[type=submit]:disabled,
button:disabled {
  background: rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.38);
  cursor: not-allowed; }

table {
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  margin-bottom: 16px; }

caption {
  padding: 8px 0; }

thead th {
  border: 0;
  border-bottom: 2px solid rgba(0, 0, 0, 0.12);
  text-align: left; }

tr {
  margin-bottom: 8px; }

th,
td {
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  padding: 16px;
  vertical-align: inherit; }

tfoot tr {
  text-align: left; }

tfoot td {
  color: rgba(0, 0, 0, 0.54);
  font-size: 8px;
  font-style: italic;
  padding: 16px 4px; }

View Code

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Marx Template</title>

  <!-- Marx CSS -->
  <link rel="stylesheet" type="text/css" href="css/marx_cssreset.css"/>
</head>

<body>
  <!-- main is the container -->
  <main>
    <!-- Navigation -->
    <nav>
      <ul>
        <li><a href="#"><b>First</b></a></li>
        <li><a href="#">Second</a></li>
        <li><a href="#">Third</a></li>
        <li><a href="#">Fourth</a></li>
      </ul>
    </nav>
    
    <p>
        <button>Add Item</button>
    </p>

    <!-- article -->
    <article>
      <h1>Article</h1>
    </article>

    <!-- aside -->
    <aside>
      <h1>Aside</h1>
    </aside>

    <!-- section -->
    <section>
      <h1>Section</h1>
    </section>

    <!-- footer -->
    <footer>
      <p>&copy; Matthew Blode 2016</p>
    </footer>
  </main>

</body>
</html>

運行結果：

這一個是github上點贊最多的一個，github地址，它除了css reset還有一些base css內容。

4.1.六、EricMeyer css reset

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

View Code

4.1.七、天貓 css reset

@charset "gb2312";
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 "microsoft yahei";
line-height: 1.5;
-ms-overflow-style: scrollbar
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%
}
ul, ol {
list-style: none
}
a {
text-decoration: none;
cursor:pointer
}
a:hover {
text-decoration: underline
}
img {
border: 0
}
button, input, select, textarea {
font-size: 100%
}
table {
border-collapse: collapse;
border-spacing: 0
}

.clear {
clear:both
}
.fr {
float:right
}
.fl {
float:left
}
.block {
display:block;
text-indent:-999em
}

View Code

4.1.八、ress css reset

/*!
 * ress.css • v1.1.2
 * MIT License
 * github.com/filipelinhares/ress
 */

/* # =================================================================
   # Global selectors
   # ================================================================= */

html {
  box-sizing: border-box;
  overflow-y: scroll; /* All browsers without overlaying scrollbars */
  -webkit-text-size-adjust: 100%; /* iOS 8+ */
}

*,
::before,
::after {
  box-sizing: inherit;
}

::before,
::after {
  text-decoration: inherit; /* Inherit text-decoration and vertical align to ::before and ::after pseudo elements */
  vertical-align: inherit;
}

/* Remove margin, padding of all elements and set background-no-repeat as default */
* {
  background-repeat: no-repeat; /* Set `background-repeat: no-repeat` to all elements */
  padding: 0; /* Reset `padding` and `margin` of all elements */
  margin: 0;
}

/* # =================================================================
   # General elements
   # ================================================================= */

/* Add the correct display in iOS 4-7.*/
audio:not([controls]) {
  display: none;
  height: 0;
}

hr {
  overflow: visible; /* Show the overflow in Edge and IE */
}

/*
* Correct `block` display not defined for any HTML5 element in IE 8/9
* Correct `block` display not defined for `details` or `summary` in IE 10/11
* and Firefox
* Correct `block` display not defined for `main` in IE 11
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
  display: block;
}

summary {
  display: list-item; /* Add the correct display in all browsers */
}

small {
  font-size: 80%; /* Set font-size to 80% in `small` elements */
}

[hidden],
template {
  display: none; /* Add the correct display in IE */
}

abbr[title] {
  border-bottom: 1px dotted; /* Add a bordered underline effect in all browsers */
  text-decoration: none; /* Remove text decoration in Firefox 40+ */
}

a {
  background-color: transparent; /* Remove the gray background on active links in IE 10 */
  -webkit-text-decoration-skip: objects; /* Remove gaps in links underline in iOS 8+ and Safari 8+ */
}

a:active,
a:hover {
  outline-width: 0; /* Remove the outline when hovering in all browsers */
}

code,
kbd,
pre,
samp {
  font-family: monospace, monospace; /* Specify the font family of code elements */
}

b,
strong {
  font-weight: bolder; /* Correct style set to `bold` in Edge 12+, Safari 6.2+, and Chrome 18+ */
}

dfn {
  font-style: italic; /* Address styling not present in Safari and Chrome */
}

/* Address styling not present in IE 8/9 */
mark {
  background-color: #ff0;
  color: #000;
}

/* https://gist.github.com/unruthless/413930 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* # =================================================================
   # Forms
   # ================================================================= */

input {
  border-radius: 0;
}

/* Apply cursor pointer to button elements */
button,
[type="button"],
[type="reset"],
[type="submit"],
[role="button"] {
  cursor: pointer;
}

/* Replace pointer cursor in disabled elements */
[disabled] {
  cursor: default;
}

[type="number"] {
  width: auto; /* Firefox 36+ */
}

[type="search"] {
  -webkit-appearance: textfield; /* Safari 8+ */
}

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; /* Safari 8 */
}

textarea {
  overflow: auto; /* Internet Explorer 11+ */
  resize: vertical; /* Specify textarea resizability */
}

button,
input,
optgroup,
select,
textarea {
  font: inherit; /* Specify font inheritance of form elements */
}

optgroup {
  font-weight: bold; /* Restore the font weight unset by the previous rule. */
}

button {
  overflow: visible; /* Address `overflow` set to `hidden` in IE 8/9/10/11 */
}

/* Remove inner padding and border in Firefox 4+ */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: 0;
  padding: 0;
}

/* Replace focus style removed in the border reset above */
button:-moz-focusring,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  outline: 1px dotted ButtonText;
}

button,
html [type="button"], /* Prevent a WebKit bug where (2) destroys native `audio` and `video`controls in Android 4 */
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; /* Correct the inability to style clickable types in iOS */
}

button,
select {
  text-transform: none; /* Firefox 40+, Internet Explorer 11- */
}

/* Remove the default button styling in all browsers */
button,
input,
select,
textarea {
  background-color: transparent;
  border-style: none;
  color: inherit;
}

/* Style select like a standard input */
select {
  -moz-appearance: none; /* Firefox 36+ */
  -webkit-appearance: none; /* Chrome 41+ */
}

select::-ms-expand {
  display: none; /* Internet Explorer 11+ */
}

select::-ms-value {
  color: currentColor; /* Internet Explorer 11+ */
}

legend {
  border: 0; /* Correct `color` not being inherited in IE 8/9/10/11 */
  color: inherit; /* Correct the color inheritance from `fieldset` elements in IE */
  display: table; /* Correct the text wrapping in Edge and IE */
  max-width: 100%; /* Correct the text wrapping in Edge and IE */
  white-space: normal; /* Correct the text wrapping in Edge and IE */
}

::-webkit-file-upload-button {
  -webkit-appearance: button; /* Correct the inability to style clickable types in iOS and Safari */
  font: inherit; /* Change font properties to `inherit` in Chrome and Safari */
}

[type="search"] {
  -webkit-appearance: textfield; /* Correct the odd appearance in Chrome and Safari */
  outline-offset: -2px; /* Correct the outline style in Safari */
}

/* # =================================================================
   # Specify media element style
   # ================================================================= */

img {
  border-style: none; /* Remove border when inside `a` element in IE 8/9/10 */
}

/* Add the correct vertical alignment in Chrome, Firefox, and Opera */
progress {
  vertical-align: baseline;
}

svg:not(:root) {
  overflow: hidden; /* Internet Explorer 11- */
}

audio,
canvas,
progress,
video {
  display: inline-block; /* Internet Explorer 11+, Windows Phone 8.1+ */
}

/* # =================================================================
   # Accessibility
   # ================================================================= */

/* Hide content from screens but not screenreaders */
@media screen {
  [hidden~="screen"] {
    display: inherit;
  }
  [hidden~="screen"]:not(:active):not(:focus):not(:target) {
    position: absolute !important;
    clip: rect(0 0 0 0) !important;
  }
}

/* Specify the progress cursor of updating elements */
[aria-busy="true"] {
  cursor: progress;
}

/* Specify the pointer cursor of trigger elements */
[aria-controls] {
  cursor: pointer;
}

/* Specify the unstyled cursor of disabled, not-editable, or otherwise inoperable elements */
[aria-disabled] {
  cursor: default;
}

/* # =================================================================
   # Selection
   # ================================================================= */

/* Specify text selection background color and omit drop shadow */

::-moz-selection {
  background-color: #b3d4fc; /* Required when declaring ::selection */
  color: #000;
  text-shadow: none;
}

::selection {
  background-color: #b3d4fc; /* Required when declaring ::selection */
  color: #000;
  text-shadow: none;
}

View Code

github上css reset點贊排名第2

https://github.com/filipelinhares/ress/

4.二、normalize

也許有些cssreset過於簡單粗暴，有點傷及無辜，normalize是另外一個選擇。bootstrap已經引用該css來重置瀏覽器默認樣式，比普通的cssreset要精細一些，保留瀏覽器有用的默認樣式，支持包括手機瀏覽器在內的超多瀏覽器，同時對HTML5元素、排版、列表、嵌入的內容、表單和表格都進行了通常化。

Normalize.css和傳統Reset的區別：
a)、Normalize.css 保護了有價值的默認值
Reset經過爲幾乎全部的元素施加默認樣式，強行使得元素有相同的視覺效果。相比之下，Normalize.css保持了許多默認的瀏覽器樣式。這就意味着你不用再爲全部公共的排版元素從新設置樣式。當一個元素在不一樣的瀏覽器中有不一樣的默認值時，Normalize.css會力求讓這些樣式保持一致並儘量與現代標準相符合。

b)、Normalize.css 修復了瀏覽器的bug
它修復了常見的桌面端和移動端瀏覽器的bug。這每每超出了Reset所能作到的範疇。關於這一點，Normalize.css修復的問題包含了HTML5元素的顯示設置、預格式化文字的font-size問題、在IE9中SVG的溢出、許多出如今各瀏覽器和操做系統中的與表單相關的bug。

github的下載地址：https://github.com/necolas/normalize.css

/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Correct the line height in all browsers.
 * 3. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */

html {
  font-family: sans-serif; /* 1 */
  line-height: 1.15; /* 2 */
  -ms-text-size-adjust: 100%; /* 3 */
  -webkit-text-size-adjust: 100%; /* 3 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers (opinionated).
 */

body {
  margin: 0;
}

/**
 * Add the correct display in IE 9-.
 */

article,
aside,
footer,
header,
nav,
section {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */

figcaption,
figure,
main { /* 1 */
  display: block;
}

/**
 * Add the correct margin in IE 8.
 */

figure {
  margin: 1em 40px;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */

a {
  background-color: transparent; /* 1 */
  -webkit-text-decoration-skip: objects; /* 2 */
}

/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */

a:active,
a:hover {
  outline-width: 0;
}

/**
 * 1. Remove the bottom border in Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */

b,
strong {
  font-weight: inherit;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font style in Android 4.3-.
 */

dfn {
  font-style: italic;
}

/**
 * Add the correct background and color in IE 9-.
 */

mark {
  background-color: #ff0;
  color: #000;
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

audio,
video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Remove the border on images inside links in IE 10-.
 */

img {
  border-style: none;
}

/**
 * Hide the overflow in IE.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */

button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; /* 2 */
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Remove the default vertical scrollbar in IE.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */

details, /* 1 */
menu {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Scripting
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

canvas {
  display: inline-block;
}

/**
 * Add the correct display in IE.
 */

template {
  display: none;
}

/* Hidden
   ========================================================================== */

/**
 * Add the correct display in IE 10-.
 */

[hidden] {
  display: none;
}

View Code

4.三、base css

若是說css reset是爲了重置瀏覽器的默認樣式，則base css是準備一些通用的css提升開發效率，如.fl表示float left，左浮動，也有人移爲common.css，也有把該部份內容與cssreset合併的，這樣能夠減小http請求，簡單的示例以下：

.clear {
clear:both
}
.fr {
float:right
}
.fl {
float:left
}
.block {
display:block;
text-indent:-999em
}
.w100{width: 100px;};
.w200{width: 200px;};
.w300{width: 300px;};
.w400{width: 400px;};
.w500{width: 500px;};
/*....*/
.wp100{width: 100%;};
.wp50{width: 50%;};
.wp33{width: 33%;};
.wp25{width: 25%;};
.wp20{width: 20%;};

View Code

示例2：

@charset "utf-8";
/* 字體 */
.n{
    font-weight:normal; 
    font-style:normal;
}
.b{font-weight:bold;} 
.i{font-style:italic;}
.fa{font-family:Arial;} 
.fs{font-family:'宋體';} 
.fw{font-family:'microsoft yahei';} 
.fg{font-family:Georgia;} 
.ft{font-family:Tahoma;} 
.fl{font-family:Lucida Console;}
.tdl{text-decoration:underline;} 
.tdn, .tdn:hover, a.tdl:hover{text-decoration:none;}


/* 對齊 */
.tc{text-align:center;} 
.tr{text-align:right;} 
.tl{text-align:left;}
.auto{
    margin-left:auto; 
    margin-right:auto;
}
.auto0{margin:0 auto;}
.vm{vertical-align:middle;}
.vtb{vertical-align:text-bottom;} 
.vt{vertical-align:top;} 
.vn{vertical-align:-4px;} 
.vimg{margin-bottom:-3px;}


/* 大小顏色 */
.g0{color:#000;} 
.g3{color:#333;} 
.g6{color:#666;} 
.g9{color:#999;} 
.red{color:red;} 
.wh{color:white;}
.f0{font-size:0;} 
.f10{font-size:10px;} 
.f12{font-size:12px;} 
.f13{font-size:13px;} 
.f14{font-size:14px;} 
.f16{font-size:16px;} 
.f20{font-size:20px;} 
.f24{font-size:24px;}


/* 外邊距 */
.m0{margin:0;} 
.ml1{margin-left:1px;} 
.ml2{margin-left:2px;}
.ml5{margin-left:5px;}
.ml10{margin-left:10px;} 
.ml20{margin-left:20px;} 
.mr1{margin-right:1px;} 
.mr2{margin-right:2px;} 
.mr5{margin-right:5px;} 
.mr10{margin-right:10px;} 
.mr20{margin-right:20px;}
.mt1{margin-top:1px;} 
.mt2{margin-top:2px;} 
.mt5{margin-top:5px;} 
.mt10{margin-top:10px;} 
.mt20{margin-top:20px;}
.mb1{margin-bottom:1px;} 
.mb2{margin-bottom:2px;} 
.mb5{margin-bottom:5px;} 
.mb10{margin-bottom:10px;} 
.mb20{margin-bottom:20px;}
.ml-1{margin-left:-1px;} 
.mt-1{margin-top:-1px;}


/* 內邊距 */
.p1{padding:1px;} 
.pl1{padding-left:1px;} 
.pt1{padding-top:1px;} 
.pr1{padding-right:1px;} 
.pb1{padding-bottom:1px;} 
.p2{padding:2px;} 
.pl2{padding-left:2px;} 
.pt2{padding-top:2px;} 
.pr2{padding-right:2px;} 
.pb2{padding-bottom:2px;}
.pl5{padding-left:5px;} 
.p5{padding:5px;} 
.pt5{padding-top:5px;} 
.pr5{padding-right:5px;} 
.pb5{padding-bottom:5px;} 
.p10{padding:10px;} 
.pl10{padding-left:10px;} 
.pt10{padding-top:10px;} 
.pr10{padding-right:10px;} 
.pb10{padding-bottom:10px;}
.p20{padding:20px;} 
.pl20{padding-left:20px;} 
.pt20{padding-top:20px;} 
.pr20{padding-right:20px;} 
.pb20{padding-bottom:20px;}

/* 位置 */
.l{float:left;} 
.r{float:right;} 
.cl{clear:both;}
.rel{position:relative;} 
.abs{position:absolute;} 
.zx1{z-index:1;} 
.zx2{z-index:2;}
.dn{display:none;} 
.db{display:block;} 
.dib{-moz-inline-stack:inline-block; display:inline-block;} 
.di{display:inline;}
.ovh{overflow:hidden;} 
.ovs{overflow:scroll;} 
.vh{visibility:hidden;} 
.vv{visibility:visible;}

/* 高度 */
.lh14{line-height:14px;} 
.lh16{line-height:16px;} 
.lh18{line-height:18px;} 
.lh20{line-height:20px;} 
.lh22{line-height:22px;} 
.lh24{line-height:24px;}
.h14{height:14px;} 
.h16{height:16px;} 
.h18{height:18px;} 
.h20{height:20px;} 
.h22{height:22px;} 
.h24{height:24px;}

/* 縮放 */
.fix{*zoom:1;} 
.fix:after{display:block; content:"clear"; height:0; clear:both; overflow:hidden; visibility:hidden;} 
.z{_zoom:1;}

/* 樣子 */
.poi{cursor:pointer;} 
.def{cursor:default;} 
.ln{list-style:none;}
.br4{-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;}
.br8{-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;}

/* 換行 */
.bk{word-wrap:break-word;}


/************************** Reset 樣式類  酌情添加 ********************************************/
body, ul, form{margin:0;padding:0;}
a {margin:0;padding:0;border:0;vertical-align:baseline;}
a img{border:none;}
table {border-collapse:collapse;}
hr {display:block;height:1px;border:0;padding:0;border-top:1px solid #ccc;margin:1em 0;}
input, select,textarea {vertical-align:middle/9;letter-spacing:1px;color:#555;}

示例3：

/*base.css*/

/*CSS reset*/

body, div, dl, dt, dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquoteth,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img {border:0;}
address,caption, cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul {list-style:none;}
capation,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before, q:after{content:' '}
abbr,acronym{border:0;}

 

/*文字排版*/
.f12{font-size:12px;}
.f13{font-size:13px;}
.f14{font-size:14px;}
.f16{font-size:16px;}
.f20{font-size:20px;}
.fb{font-weight:bold;}
.fn{font-weight:normal;}
.t2{text-indent:2em;}
.lh150{line-height:150%}
.lh180{line-height:180%}
.lh200{line-height:200%}
.unl{text-decoration:underline;}
.no_unl{text-decoration:none;}

 

/*定位*/
.tl{text-align:left;}
.tc{text-align:center;}
.tr{text-align:right;}
.bc{margin-left:auto;margin-right:auto;}
.fl{float:left;display:inline;}
.fr{float:right;display:inline;}
.cb{clear:both;}
.cl{clear:left;}
.cr{clear:right;}
.clearfix:after{content:'.';display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block;}
*html .clearfix{height:1%}
. Clearfix{display:block;}
.vm{vertical-align:center;}
.pr{position:relative;}
.pa{position:absolute;}
.abs-right{position:absolute;right:0;}
.zoom{zoom:1}
.hidden{visibility:hidden;}
.none{display:none;}

 

/*長度高度*/
.w10{width:10px;}
.w20{width:20px;}
.w30{width:30px;}
.w40{width:40px;}
.w50{width:50px;}
.w60{width:60px;}
.w70{width:70px;}
.w80{width:80px;}
.w90{width:90px;}
.w100{width:100px;}
.w200{width:200px;}
.w300{width:300px;}
.w400{width:400px;}
.w500{width:500px;}
.w600{width:600px;}
.w700{width:700px;}
.w800{width:800px;}
.w{width:100%}
.h50{width:50px;}
.h80{width:80px;}
.h100{width:100px;}
.h200{width:200px;}
.h{height:100%}

 

/*邊距*/
.m10{margin:10px;}
.m15{margin:15px;}
.m30{margin:30px;}
.mt5{margin-top:5px;}
.mt10{margin-top:10px;}
.mt15{margin-top:15px;}
.mt20{margin-top:20px;}
.mt30{margin-top:30px;}
.mt50{margin-top:50px;}
.mt100{margin-top:100px;}
.mb5{margin-bottom:5px;}
.mb10{margin-bottom:10px;}
.mb15{margin-bottom:15px;}
.mb20{margin-bottom:20px;}
.mb30{margin-bottom:30px;}
.mb50{margin-bottom:50px;}
.mb100{margin-bottom:100px;}
.ml5{margin-left:5px;}
.ml10{margin-left:10px;}
.ml15{margin-left:15px;}
.ml20{margin-left:20px;}
.ml30{margin-left:30px;}
.ml50{margin-left:50px;}
.ml100{margin-left:100px;}
.mr5{margin-right:5px;}
.mr10{margin-right:10px;}
.mr15{margin-right:15px;}
.mr20{margin-right:20px;}
.mr30{margin-right:30px;}
.mr50{margin-right:50px;}
.mr100{margin-right:100px;}
.p10{padding:10px;}
.p15{padding:15px;}
.p30{padding:30px;}
.pt5{padding-top:5px;}
.pt10{padding-top:10px;}
.pt15{padding-top:15px;}
.pt20{padding-top:20px;}
.pt30{padding-top:30px;}
.pt50{padding-top:50px;}
.pt100{padding-top:100px;}
.pb5{padding-bottom:5px;}
.pb10{padding-bottom:10px;}
.pb15{padding-bottom:15px;}
.pb20{padding-bottom:20px;}
.pb30{padding-bottom:30px;}
.pb50{padding-bottom:50px;}
.pb100{padding-bottom:100px;}
.pl5{padding-left:5px;}
.pl10{padding-left:10px;}
.pl15{padding-left:15px;}
.pl20{padding-left:20px;}
.pl30{padding-left:30px;}
.pl50{padding-left:50px;}
.pl100{padding-left:100px;}
.pr5{padding-right:5px;}
.pr10{padding-right:10px;}
.pr15{padding-right:15px;}
.pr20{padding-right:20px;}
.pr30{padding-right:30px;}
.pr50{padding-right:50px;}
.pr100{padding-right:100px;}

View Code

示例4：

@charset "utf-8";
/*!
 * @名稱：base.css
 * @功能：一、重設瀏覽器默認樣式
 *       二、設置通用原子類
 */
/* 防止用戶自定義背景顏色對網頁的影響，添加讓用戶能夠自定義字體 */
html {
    background:white;
    color:black;
}
/* 內外邊距一般讓各個瀏覽器樣式的表現位置不一樣 */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
    margin:0;
    padding:0;
}
/* 要注意表單元素並不繼承父級 font 的問題 */
body,button,input,select,textarea {
    font:12px \5b8b\4f53,arial,sans-serif;
}
input,select,textarea {
    font-size:100%;
}
/* 去掉 table cell 的邊距並讓其邊重合 */
table {
    border-collapse:collapse;
    border-spacing:0;
}
/* ie bug：th 不繼承 text-align */
th {
    text-align:inherit;
}
/* 去除默認邊框 */
fieldset,img {
    border:none;
}
/* ie6 7 8(q) bug 顯示爲行內表現 */
iframe {
    display:block;
}
/* 去掉 firefox 下此元素的邊框 */
abbr,acronym {
    border:none;
    font-variant:normal;
}
/* 一致的 del 樣式 */
del {
    text-decoration:line-through;
}
address,caption,cite,code,dfn,em,th,var {
    font-style:normal;
    font-weight:500;
}
/* 去掉列表前的標識，li 會繼承 */
ol,ul {
    list-style:none;
}
/* 對齊是排版最重要的因素，別讓什麼都居中 */
caption,th {
    text-align:left;
}
/* 來自yahoo，讓標題都自定義，適應多個系統應用 */
h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:500;
}
q:before,q:after {
    content:'';
}
/* 統一上標和下標 */
sub,sup {
    font-size:75%;
    line-height:0;
    position:relative;
    vertical-align:baseline;
}
sup {
    top:-0.5em;
}
sub {
    bottom:-0.25em;
}
/* 讓連接在 hover 狀態下顯示下劃線 */
a:hover {
    text-decoration:underline;
}
/* 默認不顯示下劃線，保持頁面簡潔 */
ins,a {
    text-decoration:none;
}
/* 去除 ie6 & ie7 焦點點狀線 */
a:focus,*:focus {
    outline:none;
}
/* 清除浮動 */
.clearfix:before,.clearfix:after {
    content:"";
    display:table;
}
.clearfix:after {
    clear:both;
    overflow:hidden;
}
.clearfix {
    zoom:1; /* for ie6 & ie7 */
}
.clear {
    clear:both;
    display:block;
    font-size:0;
    height:0;
    line-height:0;
    overflow:hidden;
}
/* 設置顯示和隱藏，一般用來與 js 配合 */
.hide {
    display:none;
}
.block {
    display:block;
}
/* 設置浮動，減小浮動帶來的 bug */
.fl,.fr {
    display:inline;
}
.fl {
    float:left;
}
.fr {
    float:right;
}

View Code

示例5：

@charset "utf-8";
/* CSS Document */

/*
CSS reset
重置瀏覽器默認css設置
*/
htm_left{color:#000;background:#FFF;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pr,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,cap_topion,cite,code,dfn,em,strong,th,var,op_topgroup{font-style:inherit;font-weight:inherit;}
del,ins{text-decoration:none;}
li{list-style:none;}
cap_topion,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:0;font-variant:normal;}
sup{vertical-align:baseline;}
sub{vertical-align:baseline;}
legend{color:#000;}
input,button,textarea,select,op_topgroup,op_topion{font-family:inherit;font-size:inherit;font-style:inherit;}
input,button,textarea,select{*font-size:100%;}
a{ text-decoration:none;}
a:hover{ text-decoration:underline;}
a:focus { outline: none; }
.float_l,float_r{ display:inline;}

/*
color
字體顏色取值
*/
.color_666{
    color:#666;
}
.write{
    color:write;
}
.red{
    color:red;
}
.green{
    color:green;
}
.blue{
    color:blue;
}
.gray{
    color:gray;
}
.yellow{
    color:yellow;
}
/*
font-size
字號取值
*/
.font_12{
    font-size:12px;
}
.font_14{
    font-size:14px;
}
.font_16{
    font-size:16px;
}
.font_18{
    font-size:18px;
}
.font_20{
    font-size:20px;
}
.font_24{
    font-size:24px;
}
/*
font-weight
字體寬度取值
*/
.f_bold{
    font-weight:bold;
}
/*
float
浮動取值
*/
float_l{
    float:left;
}
float_r{
    float:right;
}
/*
disp_leftay
區塊取值
*/
.hidden{
    display:none;
}
.block{
    disp_leftay:block;
}
.inline{
    disp_leftay:inline;
}
.inline_block{
    disp_leftay:inline-block;
}
/*
position
定位取值
*/
.position_abs{
    position:absolute;
}
.position_rel{
    position:relative;
}
/*
background-color
背景顏色取值
*/
.bgc_gray_333{
    background-color:#333;
}
.bgc_gray_666{
    background-color:#666;
}
.bgc_gray_999{
    background-color:#999;
}
.bgc_gray_ccc{
    background-color:#ccc;
}
.bgc_blue{
    background-color:blue;
}
/*
list-style
列表風格取值
*/
.li_s_none{
    list-style:none;
}
/*
text-align
文本位置取值
*/
.text_center{
    text-align:center;
}
.text_left{
    text-align:left;
}
.text_right{
    text-align:right;
}
/*
text-decoration
下劃線取值
*/
.text_d_none{
    text-decoration:none;
}
.text_d_under{
    text-decoration:underline;
}
/*
text-indent
首行縮進取值
*/
.indent_24px{
    text-indent:24px;
}
.indent_2em{
    text-indent:2em;
}
/*
line-height
行高取值
*/
.line_h_150{
    line-height:150%;
}
.line_h_180{
    line-height:180%;
}
.line_h_200{
    line-height:200%;
}
/*
clear
浮動清除取值
*/
.clear_b{
    clear:both;
}
.clear_l{
    clear:left;
}
.clear_r{
    clear:rigth;
}
/*
width
寬度取值
*/
.w10{width:10px;}
.w20{width:20px;}
.w30{width:30px;}
.w40{width:40px;}
.w50{width:50px;}
.w60{width:60px;}
.w70{width:70px;}
.w80{width:80px;}
.w90{width:90px;}
.w100{width:100px;}
.w200{width:200px;}
.w300{width:300px;}
.w400{width:400px;}
.w500{width:500px;}
.w600{width:600px;}
.w700{width:700px;}
.w800{width:800px;}
.w998{width:998px;}
.w1001{width:1001px;}
/*
margin
外邊距取值
*/
.m_auto{margin:auto;}
.m10{margin:10px;}
.m15{margin:15px;}
.m30{margin:30px;}
.m_top5{margin-top:5px;}
.m_top10{margin-top:10px;}
.m_top_top15{margin-top:15px;}
.m_top20{margin-top:20px;}
.m_top30{margin-top:30px;}
.m_top50{margin-top:50px;}
.m_top100{margin-top:100px;}
.m_bottom5{margin-bottom:5px;}
.m_bottom10{margin-bottom:10px;}
.m_bottom15{margin-bottom:15px;}
.m_bottom20{margin-bottom:20px;}
.m_bottom30{margin-bottom:30px;}
.m_bottom50{margin-bottom:50px;}
.m_bottom100{margin-bottom:100px;}
.m_left5{margin-left:5px;}
.m_left10{margin-left:10px;}
.m_left15{margin-left:15px;}
.m_left20{margin-left:20px;}
.m_left30{margin-left:30px;}
.m_left50{margin-left:50px;}
.m_left100{margin-left:100px;}
.m_right5{margin-right:5px;}
.m_right10{margin-right:10px;}
.m_right15{margin-right:15px;}
.m_right20{margin-right:20px;}
.m_right30{margin-right:30px;}
.m_right50{margin-right:50px;}
.m_right100{margin-right:100px;}
/*
padding
內邊距取值
*/
.p10{padding:10px;}
.p15{padding:15px;}
.p30{padding:30px;}
.p_top5{padding-top:5px;}
.p_top10{padding-top:10px;}
.p_top15{padding-top:15px;}
.p_top20{padding-top:20px;}
.p_top30{padding-top:30px;}
.p_top50{padding-top:50px;}
.p_top100{padding-top:100px;}
.p_bottom5{padding-bottom:5px;}
.p_bottom10{padding-bottom:10px;}
.p_bottom15{padding-bottom:15px;}
.p_bottom20{padding-bottom:20px;}
.p_bottom30{padding-bottom:30px;}
.p_bottom50{padding-bottom:50px;}
.p_bottom100{padding-bottom:100px;}
.p_left5{padding-left:5px;}
.p_left10{padding-left:10px;}
.p_left15{padding-left:15px;}
.p_left20{padding-left:20px;}
.p_left30{padding-left:30px;}
.p_left50{padding-left:50px;}
.p_left100{padding-left:100px;}
.p_right5{padding-right:5px;}
.p_right10{padding-right:10px;}
.p_right15{padding-right:15px;}
.p_right20{padding-right:20px;}
.p_right30{padding-right:30px;}
.p_right50{padding-right:50px;}
.p_right100{padding-right:100px;}

View Code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。