css重设样式_清除浏览器的默认样式

时间: 2018-04-11阅读: 243标签: 浏览器

由于不同的浏览器默认的样式也不同,所以在网页开发前设置一个公用样式,来清除各个浏览器的默认样式,已达到做的网页在各个浏览器中达到统一。

收集的默认样式的链接地址:

1.eric-meyer-reset-css
http://cssreset.com/scripts/eric-meyer-reset-css/
2.html-5-reset-stylesheet
http://html5doctor.com/html-5-reset-stylesheet/
3.yahoo-css-reset-yui-3
http://cssreset.com/scripts/yahoo-css-reset-yui-3/
4/universal-selector-css-reset
http://cssreset.com/scripts/universal-selector-css-reset/
5normalize-css
http://cssreset.com/scripts/normalize-css/


下面介绍几个主流的CSS Reset代码: 

1、Eric Meyer:

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


2、YUI  

/* 
YUI 3.4.1 (build 4118) 
Copyright 2011 Yahoo! Inc. All rights reserved. 
Licensed under the BSD License. 
http://yuilibrary.com/license/ 
*/ 
/* 
TODO will need to remove settings on HTML since we can't namespace it. 
TODO with the prefix,should I group by selector or property for weight savings? 
*/ 
html { 
color:#000; 
background:#FFF; 
} 
/* 
TODO remove settings on BODY since we can't namespace it. 
*/ 
/* 
TODO test putting a class on HEAD. 
- Fails on FF. 
*/ 
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; 
} 
/* 
TODO think about hanlding inheritence differently,maybe letting IE6 fail a bit... 
*/ 
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; 
} 
/* to preserve line-height and selector appearance */ 
sup { 
vertical-align:text-top; 
} 
sub { 
vertical-align:text-bottom; 
} 
input,textarea,select { 
font-family:inherit; 
font-size:inherit; 
font-weight:inherit; 
} 
/*to enable resizing for IE*/ 
input,textarea,select { 
*font-size:100%; 
} 
/*because legend doesn't inherit in IE */ 
legend { 
color:#000; 
}


3、csslab  

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, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, dialog, figure, header, footer, hgroup, menu, nav, section, time, mark, audio, video { 
margin: 0; 
padding: 0; 
border: 0; 
outline: 0; 
font-weight: inherit; 
font-style: inherit; 
font-size: 100%; 
} 
article, aside, nav, section, dialog, figure, header, footer, hgroup { 
display:block; 
} 
legend { 
display:none; 
} 
:focus { 
outline: 0; 
} 
table { 
border-collapse: collapse; 
border-spacing: 0; 
} 
caption, th, td { 
text-align: left; 
font-weight: normal; 
} 
a img, iframe { 
border: none; 
} 
ul { 
list-style: none; 
} 
input, textarea, select, button { 
font-size: 100%; 
font-family: inherit; 
} 
input, select { 
vertical-align:middle; 
} 
select { 
margin: inherit; 
} 
button { 
border: 0; 
padding: 0; 
background: transparent; 
cursor: pointer; 
} 
/* Fixes incorrect placement of numbers in ol's in IE6/7 */ 
ol { margin-left:2em; } 
/* ========================================= clearfix == */ 
.clearfix:after { 
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden; 
} 
.clearfix {display: inline-block;} 
* html .clearfix {height: 1%;} 
.clearfix {display: block;}


需要说明的是CSS Reset并不是一成不变的,具体还需要根据项目的不同需求做适当的修改,以达到浏览器的兼容和操作上的便利性。  

 

浏览器访问一个网站所经历的步骤

浏览器访问网站的步骤:Chrome搜索自身的DNS缓存、读取本地HOST文件、浏览器发起一个DNS的一个系统调用、浏览器获得域名对应的IP地址后,发起HTTP三次握手、TCP/IP连接建立起来、服务器端接受到了这个请求、浏览器根据拿到的资源对页面进行渲染

js判断浏览器是否支持flash的方法

支持flash的浏览器呈减少的趋势,如何判断浏览器是否支持flash,检查浏览器是否启用flash控件,需要先检查浏览器是否支持ActiveXObject,谷歌、火狐等浏览器都可以使用navigator.plugins检查浏览器是否启用flash插件

Puppeteer浏览器控制器_介绍Puppeteer的一些用法

Puppeteer是Chrome团队开源的Node库,其提供基于DevTools协议的高阶API让开发人员能够控制Headless Chrome、Chromium、Chrome等浏览器,通过Puppeteer能够将平时手动使用浏览器的操作通过代码的方式自动化执行

IE6浏览器有哪些常见的bug,以及解决IE6常用bug的方法

IE6不支持min-height,解决办法使用css hack,ol内li的序号全为1,不递增。解决方法:为li设置样式display: list-item;定位父元素overflow: auto;,包含position: relative;子元素,子元素高于父元素时会溢出。解决办法:

浏览器的回流与重绘 (Reflow & Repaint)

浏览器使用流式布局模型 (Flow Based Layout)。浏览器会把HTML解析成DOM,把CSS解析成CSSOM,DOM和CSSOM合并就产生了Render Tree。有了RenderTree,我们就知道了所有节点的样式,然后计算他们在页面上的大小和位置,最后把节点绘制到页面上。

浏览器禁用了javascript,各种浏览器如何开启javascript的方法总汇

您的浏览器禁用了JS脚本运行,请启用该功能。怎么解除浏览器禁用js?这篇文章将总结整理各个浏览器如何开启、禁用javascript的方法总汇。