一、盒子模型（Box Model）

盒子模型也有人称为框模型，HTML中的多数元素都会在浏览器中生成一个矩形的区域，每个区域包含四个组成部分，从外向内依次是：外边距（Margin）、边框（Border）、内边距（Padding）和内容（Content），其实盒子模型有两种，分别是 ie 盒子模型和标准 w3c 盒子模型，加上了doctype声明，让所有浏览器都会采用标准 w3c 盒子模型去解释你的盒子。当设置一个元素的样式如下：

<!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>

运行结果：

1.1、宽度测试

计算最大宽度，示例如下：

<!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>

要达到如下效果，请求?处最大可以设置为多少像素？

答案：

340px

1.2、溢出测试

代码如下：

<!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，如果会，超出多少？

可见部分=850-815=35，还有10个margin不可见，45px

如果不想让innerBox超出，则应该删除其100%的宽度设置，去掉width:100%，一般不要设置，多此一举。

1.3、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.4、利用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.1、概要

外边距折叠：相邻的两个或多个外边距 (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.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.1、行内标签与块标签区别

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 - 客户端脚本

行内标签与块标签特性示例：

<!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设置元素的显示方式

语法如下：

display：none | inline | block | list-item | inline-block | table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group | run-in | box | inline-box | flexbox | inline-flexbox | flex | inline-flex
默认值：inline

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;
    }

Basic Support包含值：none | inline | block | list-item | inline-block 
table系包含值：table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group 
IE6,7只支持inline元素设置为inline-block，其它类型元素均不可以

3.2、隐藏

可以使用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.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.4、菜单示例

使用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>

运行效果：

四、重置浏览器默认样式

下图是同一段HTML在3个不同内核的浏览器中打开的效果，你发现有不一样吗？很明显有区别，这就是浏览器的默认样式，每一个浏览器会设置user agent stylesheet，比如默认字体大小为16px。浏览器的默认样式会给我们带一定的麻烦，比如在计算元素的大小时默认样式会设置padding与margin值，不同的浏览器可能设置的不一样，就会出现误差，重置浏览器样式就是让您可以在一张白纸上写字。

最开始会使用一个简单的办法，如 ：

            *

            {

                margin: 0;

                padding: 0;

            }

虽然能全部重置，但由于性能较低，不推荐使用。因为*需要遍历整个DOM树，当页面节点较多时，会影响页面的渲染性能。

4.1、CSSReset

每种浏览器都有一套默认的样式表，即user agent stylesheet，网页在没有指定的样式时，按浏览器内置的样式表来渲染。这是合理的，像word中也有一些预留样式，可以让我们的排版更美观整齐。不同浏览器甚至同一浏览器不同版本的默认样式是不同的。但这样会有很多兼容问题，CSSReset可以将所有浏览器默认样式设置成一样。

4.1.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文字颜色*/

4.1.2、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;}

4.1.3、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;}

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}

4.1.5、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; }

示例：

<!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.6、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;

}

4.1.7、天猫 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

}

4.1.8、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;

}

github上css reset点赞排名第2

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

4.2、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;

}

4.3、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%;};

示例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;}

示例4：

@charset "utf-8";

/*!

 * @名称：base.css

 * @功能：1、重设浏览器默认样式

 *       2、设置通用原子类

 */

/* 防止用户自定义背景颜色对网页的影响，添加让用户可以自定义字体 */

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;

}

示例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;}

Box Model,边距折叠，内联和块标签，CSSReset的更多相关文章

  1. CSS3与页面布局学习总结（二）——Box Model、边距折叠、内联与块标签、CSSReset

    一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...

  2. CSS3与页面布局学习笔记（二）——盒子模型(Box Model)、边距折叠、内联与块标签、CSSReset

    一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...

  3. CSS3与页面布局学习总结——Box Model、边距折叠、内联与块标签、CSSReset

    目录 一.盒子模型(Box Model) 1.1.宽度测试 1.2.溢出测试 1.3.box-sizing属性 1.4.利用CSS画图 二.边距折叠 2.1.概要 2.2.垂直方向外边距合并计算 三. ...

  4. css 内联与块

    内联元素可以理解为不能直接设置宽度和高度元素,比如span,你为他设置宽度和高度没有效果,除非你把它设置成块级元素. 如下面的代码把display:block;属性值去掉的话,宽度和高度都不会起作用了 ...

  5. HTML&CSS基础-内联和块元素

    HTML&CSS基础-内联和块元素 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> ...

  6. HTML元素分类 块级元素 内联元素 块级内联元素

    概述 HTML中存在许多元素,如<h1>,<p>,<a>,<block>,<image>,这些元素可分为三类,依次是块级元素,内联元素,块级 ...

  7. CSS内联--与块级元素区别

    内联元素:1.内联元素(inline)不会独占一行,相邻的内联元素会排在同一行.其宽度随内容的变化而变化. 2.内联元素不可以设置宽高 3.内联元素可以设置margin,padding,但只在水平方向 ...

  8. &lt;%%&gt;创建内联代码块(表达)

    其实<%%>很早之前见过它,将一个小的功能仅.别人不理解.今天偶尔,我们看到它的真面目,今天,给大家分享. 语法 代码块呈现(<%%>)定义了当呈现页时运行的内联代码或内联表达 ...

  9. <%%>创建内联代码块(表达式)

    其实<%%>很早之前就见过了,只是会用一点功能,其它的不甚了解.今天偶尔见到了它的庐山真面目,现在共享给大家. 语法 代码块呈现(<%%>)定义了当呈现页时执行的内联代码或内联 ...

随机推荐

  1. The Practical Guide to Empathy Maps: 10-Minute User Personas

    That’s where the empathy map comes in. When created correctly, empathy maps serve as the perfect lea ...

  2. Java学习【1】

    一.Java 简介 Java是由Sun Microsystems公司于1995年5月推出的Java面向对象程序设计语言和Java平台的总称. 2005年6月,SUN公司公开Java SE 6.Java ...

  3. 五、jquery使用工具函数

    工具函数对应的网址在 http://api.jquery.com/categouy/utilities/   工具函数处理对象的不同,可以将其分为几大类别:浏览器的检测.数组和对象的操作.字符串的操作 ...

  4. iOS程序模块化设计

    一.模块化设计的概述: 模块化设计(Block-based design):对一定范围内的不同功能或相同功能的不同性能.不同规格的产品进行功能分析的基础上,划分并设计出一系列功能模块,通过模块的选择和 ...

  5. XPath注入跟SQL注入差不多，只不过这里的数据库走的xml格式

    SQL注入这块不想细聊了,相信很多朋友都听到耳朵长茧,不外乎是提交含有SQL操作语句的信息给后端,后端如果没有做好过滤就执行该语句,攻击者自然可以随意操纵该站点的数据库. 比如有一个图书馆站点book ...

  6. Wine——在Linux上运行Windows软件

    官网:https://www.winehq.org/ 参考: wikipedia 教你使用Wine在Linux上运行Windows软件 如何安装和使用Wine,以便在Linux上运行Windows应用 ...

  7. ASP.net之策略模式

    设计思路: 用ASP.net设计,调用策略模式.在第一个数和第二个数的文本框中输入数值,单击录题按钮,数值保存在n1,n2文档中,把要做的题都保存完后,单击开始按钮,开始做题,做完单击判断按钮,进行判 ...

  8. iOS中assign、copy 、retain等关键字的含义

    iOS中assign.copy .retain等关键字的含义  转自:http://my.oschina.net/majiage/blog/267409 assign: 简单赋值,不更改索引计数cop ...

  9. HDFS DataNode 设计实现解析

    前文分析了 NameNode,本文进一步解析 DataNode 的设计和实现要点. 文件存储 DataNode 正如其名是负责存储文件数据的节点.HDFS 中文件的存储方式是将文件按块(block)切 ...

  10. TCP/IP, WebSocket 和 MQTT

    按照OSI网络分层模型,IP是网络层协议,TCP是传输层协议,而HTTP和MQTT是应用层的协议.在这三者之间, TCP是HTTP和MQTT底层的协议.大家对HTTP很熟悉,这里简要介绍下MQTT.M ...