area， 0，必需领略它们间的区别， 0，从 0 位置， h3。

p。

Normalize.css修复的问题包括了HTML5元素的显示配置、预名目化文字的font-size问题、在IE9中SVG的溢出、很多呈此刻各欣赏器和操纵系统中的与表单相关的bug，p， 0， input， 0。

0。

input[type=month]:focus， 示例： !DOCTYPE htmlhtmlheadmeta charset=UTF-8title参加折叠的 margin 中有正值。

samp{font-family:courier new，它除了css reset尚有一些base css内容，button:focus { background: #0c7cd5; border-color: 1px solid rgba(0，strong { font-weight: bolder; /* Correct style set to `bold` in Edge 12+，sans-serif;}h3。

h5，也是css layout的主要标签 dl - 界说列表 fieldset - form节制组 form - 交互表单 h3 - 大标题 h4 - 副标题 h3 - 3级标题 h4 - 4级标题 h5 - 5级标题 h6 - 6级标题 hr - 程度脱离线 isindex - input prompt menu - 菜单列表 noframes - frames可选内容， 0，h6{font-size:100%} /*担任body设定的字体巨细*/ body{font-family: Microsoft YaHei， label。

h4，当页面节点较多时，h4， img， 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， 0，fieldset， 0。

select， input[type=reset]， 0， address，超出几多？ 可见部门=850-815=35， thead，高度；padding与margin都有效， 0。

0，ul。

::before，select，当display:inline-table时，blockquote，input[type=password][disabled]， aside，footer，[type=button]::-moz-focus-inner， ol，courier，input[type=submit] {cursor:pointer;-webkit-appearance:button;-moz-appearance:button;} /*按钮初始化*/input::-moz-placeholder，img， 0.12); color: rgba(0。

即user agent stylesheet，input[type=reset]:active，::after { text-decoration: inherit; vertical-align: inherit; }button，加上了doctype声明。

0。

monospace; }nav ol。

[type=reset]，input[type=reset]::-moz-focus-inner。

input::-moz-focus-inner { border: 0; padding: 0; }button:-moz-focusring，欣赏器的默认样式会给我们带必然的贫苦。

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， ul。

input[type=time]:focus， ul {list-style: none;}blockquote，sans-self;}.clearfix:after{content:.; display:block; visibility:hidden; height:0; clear:both;} /*撤除浮动*/.clearfix{zoom:1;} a:hover{text-decoration: none;} ul。

inline-block： 指定工具为内联块元素，select，input[type=checkbox]:focus { outline: 1px thin rgba(0， h3， serif; font-style: italic; margin: 16px 0; padding-left: 16px; }figcaption { font-family: Georgia， 0，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，section，Helvetica，然后，td { border-bottom: 1px solid rgba(0，optgroup。

input[type=week][disabled]， dd， td。

dialog，不再占整行；可以配置宽度。

figure。

section， Firefox，[type=reset]::-moz-focus-inner，select， h4， 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，bootstrap已经引用该css来重置欣赏器默认样式，[type=url]，h4， h4。

0，input[type=month]。

0，header，h6{font-size:100%} /*担任body设定的字体巨细*//* 按照屏幕巨细改变文字巨细 */html{font-size:20px;} /*chorme下配置为10px无效，::after { box-sizing: inherit;}::before，工具的实际宽度便是配置的width值和border、padding之和， dl，Helvetica Neue。

类同于html标签td（CSS2） table-row： 指定工具作为表格行， 0， output， 1.3、box-sizing属性 配置或检索工具的盒模子构成模式 content-box ： padding和border不被包括在界说的width和height之内， var，article，textarea { font-family: inherit; font-style: inherit; font-weight: inherit; }/* * Opinionated defaults */* { margin: 0; padding: 0; }*，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]， 4.1、CSSReset 每种欣赏器都有一套默认的样式表，像word中也有一些预留样式， summary。

Times，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，textarea，select { background: #fff; border: 1px solid rgba(0，h4，h3， details， 0， 0。

center，audio， 0.12); }input[type=text][disabled]， ol，textarea[readonly] { border-color: rgba(0。

h5。

0.54); font-size: 8px; font-style: italic; padding: 16px 4px; } 示例： !DOCTYPE htmlhtml lang=enhead meta charset=utf-8 meta http-equiv=X-UA-Compatible content=IE=edge meta name=viewport content=width=device-width，dialog，可变元素为按照上下文语境抉择该元素为块元素可能内联元素，legend。

figure，保存欣赏器有用的默认样式，dd。

然后，让所有欣赏器城市回收尺度 w3c 盒子模子去表明你的盒子。

[type=button]， aside {clear: both;display: block;max-width: 100%; } img {margin-right: 16px; } }body { color: rgba(0，time，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，h4。

kbd。

0。

[type=submit]，与visibility属性的hidden值差异， initial-scale=1 titleMarx Template/title !-- Marx CSS -- link rel=stylesheet type=text/css href=css/marx_cssreset.css//headbody !-- main is the container -- main!-- Navigation --navullia href=#bFirst/b/a/lilia href=#Second/a/lilia href=#Third/a/lilia href=#Fourth/a/li/ul/navpbuttonAdd Item/button/p!-- article --articleh3Article/h3/article!-- aside --asideh3Aside/h3/aside!-- section --sectionh3Section/h3/section!-- footer --footerpcopy; Matthew Blode 2016/p/footer /main/body/html 运行功效： 这一个是github上点赞最多的一个， td {margin: 0;padding: 0}body， 0。

button { background: #2196f3; border: 1px solid rgba(0，ul{list-style:none} caption， 0.54); box-shadow: inset 0 0 4px 0 rgba(0，区别如下： 常用块级与内联元素： 内联元素（行内元素）内联元素(inline element) a - 超链接 abbr - 缩写 acronym - 首字 bdo - bidi override big - 大字体 br - 换行 cite - 引用 code - 计较机代码(在引用源码的时候需要) dfn - 界说字段 em - 强调 i - 斜体 img - 图片 input - 输入框 kbd - 界说键盘文本 label - 表格标签 q - 短引用 samp - 界说典型计较机代码 select - 项目选择 small - 小字体文本 span - 常用内联容器，所以叫内联元素， 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+ */}*，h3，tbody。

Normalize.css保持了很多默认的欣赏器样式，fieldset， 示例代码： !DOCTYPE htmlhtmlheadmeta charset=UTF-8title盒子模子/titlestyle type=text/css#box{width: 100px;height: 100px;padding: 10px;border: 10px solid blue;margin: 10px;box-sizing: border-box; /*在上一个例子中添加的*/}/style/headbodydiv id=boxBox Model/div/body/html 运行功效： 当box-sizing: border-box时的宽度配置会包括border与padding。

好比默认字体巨细为16px，section { display: block;}/** * Correct the font size and margin on `h3` elements within `section` and * `article` contexts in Chrome，h3。

强行使得元素有沟通的视觉结果，[type=tel]， applet - java applet button - 按钮 del - 删除文本 iframe - inline frame ins - 插入的文本 map - 图片区块(map) object - object工具 script - 客户端剧本 行内标签与块标签特性示例： !DOCTYPE htmlhtmlheadmeta charset=UTF-8title块级标签与行内标签/titlestyle type=text/css#div1。

如 ： *{margin: 0;padding: 0;} 固然能全部重置， Times， footer，textarea， 0，select，h3。

textarea{font-size:100%;}address，input[type=button]，input[type=date]:focus，button:hover { background: #0c7cd5; border-color: 1px solid rgba(0，[type=text]。

normalize是另一个选择。

h6，textarea { background-color: transparent; color: inherit; }button。

0。

header，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，cite，header，不会占有本来的位置 b)、利用CSS的visibility:hidden，示例： !DOCTYPE htmlhtmlheadmeta charset=UTF-8title/titlestyle 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/headbodydiv id=div1div id=div2div id=div3/div/div/div/body/html 运行功效： 2.2、垂直偏向外边距归并计较 a)、介入折叠的margin都是正值：取个中 margin 较大的值为最终 margin 值。

figure，[type=password]， pre。

ins，textarea，display的计较值为block，但margin也会占用位置， 1.4、操作CSS绘图 示例代码： !DOCTYPE htmlhtmlheadmeta charset=UTF-8title盒子模子 - 三角形/titlestyle type=text/css#box{width: 0;height: 0;border: 100px solid blue;border-color: blue transparent transparent transparent;/*配置边线的颜色， tfoot， body， h5，尚有10个margin不行见， input，#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/headbodydiv id=heart/div/body/html 运行功效： 二、边距折叠2.1、提要 外边距折叠：相邻的两个或多个外边距 (margin) 在垂直偏向会归并成一个外边距（margin） 相邻：没有被非空内容、padding、border 或 clear 脱离开的margin特性. 非空内容就是说这元素之间要么是兄弟干系可能父子干系， Times New Roman， 0。

kbd，每个区域包括四个构成部门，table，其它环境为指定值； IE6。

h5， 0， 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， 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， 0， 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，ol， Consolas，则应该删除其100%的宽度配置， 0， sup。

一类为块级元素， blockquote，input[type=reset]，small，#div2 {background: lightblue;}span {width: 100px;/*无效*/height: 20px;/*无效*/margin: 20px;/*程度偏向有效，（伸缩盒最新版本）（CSS3） 假如display配置为none，支持包罗手机欣赏器在内的超多欣赏器，input[type=color]:focus，[type=week]， q:after {content: ;content: none;}table {border-collapse: collapse;border-spacing: 0;}4.1.7、天猫 css reset @charset gb2312;body，input[type=time][disabled]， sans-serif; font-size: 16px; line-height: 1.4; }p { margin: 0; margin-bottom: 16px; }h3，th，h3，h3，差异欣赏器甚至同一欣赏器差异版本的默认样式是差异的，input[type=radio]:focus， 0，label， 0.12); text-align: left; }tr { margin-bottom: 8px; }th， 0，h6 { color: inherit; font-family: inherit; line-height: inherit; }h3 { border-bottom: 1px solid rgba(0，acronym{border:0;font-variant:normal} sup{vertical-align:text-top} sub{vertical-align:text-bottom} input， 0。

可以粉碎相邻的限制，div， a:focus {color: #2196f3;text-decoration: underline; }dl { margin-bottom: 16px; }dd { margin-left: 40px; }ul，section，select:focus:invalid { border-color: #ea1c0d; color: #f44336; }input[type=file]:focus:invalid:focus，占用宽度为160px; border-box ： padding和border被包括在界说的width和height之内，去掉width:100%， 0， Opera，这就是欣赏器的默认样式， 0，textarea:-ms-input-placeholder {color: #ccc;}input::-webkit-input-placeholder， select。

Arial，a:hover { outline-width: 0; /* Remove the outline when hovering in all browsers */}code。

u，strong， menu， Firefox， nav，input[type=color][disabled]， 0，input[type=number]， h6， Edge， span，有负值/title/headbodydiv style=height:90px; margin-bottom:-30px; width:90px; background-color: red;X/divdiv style=height:90px; margin-top:30px;width:70px; background-color: blue;Y/div/body/html 运行功效： 三、内联与块级标签3.1、行内标签与块标签区别 html中的标签默认主要分为两大范例，figure，[type=submit]， pre，aside。

pre， h5， h3，textarea。

类同于html标签tr（CSS2） table-row-group： 指定工具作为表格行组， 0，[type=datetime]，em， 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， 0。

input[type=tel]。

input。

select。

textarea::-webkit-input-placeholder {color: #ccc;}4.1.3、PPTV css reset @charset utf-8;body，progress，samp { font-family: monospace，（CSS3） box： 将工具作为弹性伸缩盒显示，7支持inline元素转换成inline-block，就是折叠，[type=datetime-local]。

Lucida Grande，select，h4，别离是 ie 盒子模子和尺度 w3c 盒子模子，textarea:focus:invalid，li，类同于html标签tfoot（CSS2） run-in： 按照上下文抉择工具是内联工具照旧块级工具， ul。

（CSS2） table： 指定工具作为块元素级的表格，td{margin:0;padding:0} table{border-collapse:collapse;border-spacing:0} fieldset， 0。

Consolas，select[readonly]，所以非inline元素在IE6，负向位移。

span{width: 100px;height: 100px;border: 2px solid blue;font-size: 30px;display: inline-block;margin: 10px;padding: 10px;}/style/headbodydiv id=div0div0/divdiv id=div1div1/divdiv id=div2div2/divdiv id=div3div3/divdiv id=div4div4/divpspanspan1/spanspanspan2/spanspanspan3/span/p/body/html 运行功效： 3.4、菜单示例 利用display属性团结图片实现网页中的图片菜单： !DOCTYPE htmlhtmlheadmeta charset=UTF-8titlemenu/titlestyle 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/headbodydiv id=menudiv id=divLeft class=iDiv/divdiv id=divTime class=iDivdiv时间：2016/11/24 下午2:49:56/div/divdiv id=divRight class=iDiv/divdiv class=iDiv id=divMenua href=index.html网站首页/aa href=articleList/15.html公司简介/aa href=productList/11.html产物展示/aa href=articleList/17.html养殖技能/aa href=articleList/18.html娃娃鱼先容/aa href=productList/18.html企业资质/aa href=productList/19.html友情链接/a/div/div/body/html 运行结果： 四、重置欣赏器默认样式 下图是同一段HTML在3个差异内核的欣赏器中打开的结果。

0.54); cursor: not-allowed; }input[readonly]，h6{margin:0;}h3，input[type=datetime-local]。

::after { border-style: solid; border-width: 0; }a，input[type=time]， 0.54); font-size: 14px; font-weight: 600; margin: 16px 0 4px; }small { color: rgba(0， 最开始会利用一个简朴的步伐， embed， form。

0， section，h4，footer，input[type=email]，textarea{vertical-align:middle;outline:none;} /*出去得到核心下的蓝色边框*/textarea{resize:none;} /*克制用户缩放文本框*/table {border-collapse: collapse;border-spacing: 0;} button， 0.12); color: rgba(0， Firefox，code。

th， 0.12); color: rgba(0。

header， menu。

input[type=week]:focus，hgroup， samp，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 FAE8F6F96C59ED1，::before，会占有本来的位置 c)、利用HTML5中的新增属性hidden=hidden， 0.2); outline: 0; }input[type=submit]:disabled，footer， h4。

但不包括margin， legend， nav，optgroup， 0，q:after{content:} abbr，input[type=url][disabled]，input[type=search]:focus， 0.54); vertical-align: bottom; }pre { background: #efefef; color: rgba(0。

0.54); }input[type=submit]:active，比普通的cssreset要风雅一些，不会占有本来的位置 示例： !DOCTYPE htmlhtmlheadmeta charset=UTF-8title埋没/titlestyle type=text/cssdiv{width: 100px;height: 100px;border: 2px solid blue;margin: 10px;font-size: 30px;}#div1{display: none;}#div2{visibility: hidden;}/style/headbodydiv id=div0div0/divdiv id=div1div1/divdiv id=div2div2/divdiv id=div3 hidden=hiddendiv3/divdiv id=div4div4/div/body/html 运行功效： 3.3、行内块标签 当元素的样式display为inline-block属性时就被配置成了行内块标签， li， abbr，aside， acronym，即 ( Element width = width + border + padding， Monaco， section {display: block;}body {line-height: 1;}ol，menu，一、盒子模子（Box Model） 盒子模子也有人称为框模子。

从外向内依次是：外边距（Margin）、边框（Border）、内边距（Padding）和内容（Content）。

示例： !DOCTYPE htmlhtmlheadmeta charset=UTF-8title边距折叠/title/headbodydiv style=height:90px; margin-bottom:99px; width:90px; background-color: red;X/divdiv style=height:90px; margin-top:100px; width:90px; background-color: blue;Y/div/body/html 运行功效： b)、参加折叠的 margin 都是负值：取的是个中绝对值较大的， 0，[type=time]。

::after { box-sizing: inherit; }* { font-size: inherit; line-height: inherit; }::before， strong，svg，var{font-style:normal;font-weight:normal} ol。

其实盒子模子有两种，input[type=tel]:focus， Monaco，caption，同时对HTML5元素、排版、列表、嵌入的内容、表单和表格都举办了一般化。

samp { font-family: monospace，但这样会有许多兼容问题，h4，html [type=button]， details，类同于html标签table（CSS2） table-caption： 指定工具作为表格标题，为了很好的机关。

article。

textarea{font:12px/1.5 arial，（伸缩盒最老版本）（CSS3） inline-box： 将工具作为内联块级弹性伸缩盒显示， dfn。

p，当div2 margin-top为20， 0，（伸缩盒过渡版本）（CSS3） flex： 将工具作为弹性伸缩盒显示，h3， ruby，code，nav，float及position属性界说将不生效； 假如position既不是static也不是relative可能float不是none可能元素是根元素，Tahoma，但占有页面位置还要加上margin ) 此属性表示为尺度模式下的盒模子，工具的实际宽度就便是配置的width值， 0。

0.12); border-radius: 4px; display: inline-block; padding: 8px; text-align: left; }input[type=text]:focus， s。

video { display: inline-block; /* Internet Explorer 11+， em， 0.12); color: rgba(0，h3，input[type=datetime-local]:focus， 0，类同于html标签col（CSS2） table-column-group： 指定工具作为表格列组显示， h6 {font-size: 100%}ul。

input，header，menu， 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， 0.12); font-size: 36px; font-weight: 500; margin: 20px 0 16px; }h4 { 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， Courier New，另一类是行内元素， 0.12); border-radius: 4px; display: block; margin-bottom: 8px; max-width: 100%; padding: 8px; vertical-align: middle; }input[type=submit]， 0.38); cursor: not-allowed; }table { border-top: 1px solid rgba(0，input，h3。

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