常用的css 重置样式

1、css3样式比较多,一般我会在app端使用

/*.html {font-size:.625rem;*//*10 ÷ 16 × 100% = 62.5%*//*  height:100%;}*/
*{margin:0px;padding:0px;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-touch-callout:none;-webkit-user-select:none;-webkit-appearance:none;outline:none;word-break:break-all;box-sizing:border-box;-webkit-box-sizing:border-box;}
html{ font:16px tahoma,arial,\5b8b\4f53,sans-serif; }
body{color:#333;font-family:arial; font:16px tahoma,arial,\5b8b\4f53,sans-serif;background:#ebebeb;-webkit-overflow-scrolling:touch;height:100%;}
html,body{ width: 100%; height: 100%; }
h1,h2,h3,h4,h5,h6{font-size:100%}
address,cite,dfn,em,var{font-style:normal}
fieldset,img{border:0}
button,input,select,textarea{font-size:100%}
table{border-collapse:collapse;border-spacing:0}
input[type=submit],input[type=reset],input[type=button],button{-webkit-appearance:none}
*{-webkit-tap-highlight-color:rgba(0,0,0,0);outline:0;margin:0;padding:0}
ul,ol{list-style:none}
input[type="text"],input[type="search"]{-webkit-appearance:none;-webkit-tap-highlight-color:#fff;outline:0}

.fl{float: left;}
.fr{float: right;}
.clr{*zoom: 1;}
.clr:after{content:".";display:block;height:0;clear:both;visibility:hidden;}

2、css3样式较少,一般我会在pc端使用

body,div,p,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,th,td select option{margin: 0;padding: 0;}
body,html{background: #eee;font-size: 12px; color: #333; font-family:arial,microsoft yahei,verdana, simsun; width:100%; height:100%; overflow: hidden; }
/*table{border-collapse: collapse; border-spacing: 0;}*/
fieldset,img{border: none; vertical-align:middle;}
ol,ul,li{list-style: none;}
h1,h2,h3,h4,h5,h6{font-size: 100%;font-weight: normal;}
em{font-style: normal;}
input,button,select,textarea{outline: none; border-color:#dadada;}
input,select{ border:none; background: transparent; font-family: "microsoft yahei";color: black; }
textarea{resize: none;}
input,button,select,textarea{outline: none; border-color:#dadada; }
input:focus{ border-color: #91dfe4!important; color:#000!important; }
.pasentNo i { font-style: normal!important;}
input:-webkit-autofill,textarea:-webkit-autofill{ background:transparent; color:#333; }
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{ -webkit-appearance: none !important;}
input[type="number"]{ -moz-appearance: textfield;}
/*解决select各个浏览器默认箭头不统一的问题*/
select { appearance:none; -moz-appearance:none;  -webkit-appearance:none; -moz-appearance: none; -ms-appearance: none; appearance: none; background: url("../images/public/arrow.png") no-repeat scroll right center transparent;}
select::-ms-expand { display: none; }

.fl{float: left;}
.fr{float: right;}
.clr{*zoom: 1;}
.clr:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
时间: 2024-10-12 07:40:31

常用的css 重置样式的相关文章

CSS重置样式表

一.为什么需要重置样式表 即使不写CSS样式,HTML标签在浏览器中也有样式,这些样式来自浏览器本身.但问题是,不同浏览器默认样式可能不同.CSS重置样式表就是为了解决这个问题. 二.常用的重置样式表 (1)简单暴力型 只有一行: *{margin:0; padding:0;} 通配符"*"匹配了所有的标签,通常认为性能不好. (2)归零型 (几乎)全部将标签样式清零.如YUI(http://yuilibrary.com/)的重置样式表. (3)保留基础样式型 并不是将所有标签的默认样

Normalize.css – HTML5-ready 的css重置样式集

Normalize.css 是一个可定制的 css文件,使浏览器呈现的所有元素,更一致和符合现代标准.它正是针对只需要统一的元素样式.该项目依赖于研究浏览器默认元素风格之间的差异,精确定位需要重置的样式.这是一个现代的,HTML5-ready 的css重置样式集. Normalize.css 是 HTML5-ready 的css重置样式集 官网网站:http://www.yyyweb.com/demo/inner-show/normalize.html

CSS重置样式

body,/*默认margin:8*/ p , /*默认margin:16*/ ul, /*默认margin:16*/ ol, /*默认margin:16*/ dl, /*默认margin:16*/ dd, /*默认margin:40*/ h1,h2,h3,h4,h5,h6 { margin:0; font-size: 12px; } ul,ol{ padding: 0; list-style: none; } img{ border: none; /*img标签嵌套在a标签里时,在ie6下有边

pc端,移动端css重置样式

pc: html{font-family:"Microsoft YaHei UI","Microsoft YaHei",sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%} html,body,div,object,iframe,applet,object,h1,h2,h3,h4,h5,h6,p,blockquote,pre,address,dl,dt,dd,ol,ul,li,tabl

css reset重置样式有那么重要吗?

在以前写html代码的时候,一般都会在head里添加重置样式reset.css,其内容如下: @charset "utf-8"; 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

两种不同的重置样式方法(normalize.css)

重置样式非常多,凡是一个前端开发人员肯定有一个常用的重置CSS文件并知道如何使用它们.他们是盲目的在做还是知道为什么这么做呢?原因是不同的浏览器对一些元素有不同的默认样式,如果你不处理,在不同的浏览器下会存在必要的风险,或者更有戏剧性的性发生. * { padding: 0; margin: 0; } 这是最普遍最简单的CSS重设,将所有元素的padding和margin值都设为0,可以避免一些浏览器在理解这两个属性默认值上的”分歧”. /*! normalize.css v4.1.1 | MI

CSS重置标签默认样式

CSS重置标签默认样式:建议:尽可能的手写代码,可以有效的提高学习效率和深度.在默认情况下,很多标签都有自带的属性,例如body自带有margin.ul有自带的padding.h1-h6的字体大小各部相同.li前面带有的小圆圈等等.这些自带的默认属性会给实际的布局中带来不少的麻烦,我们可以再样式表的开始就重置这些默认的属性.实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8">

页面重置样式reset.css

我把经常用到的一些页面重置样式归类到了一个.css文件中,这样可以减少代码冗余.当然还有其他的很多用处,比如h1~h5的样式全部统一的话,下面写东西很清晰很多. @charset 'utf-8'; html,body,ol,ul,li,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0;} /*这里不要用通配符*{margin:0;padding:0;}因为会遍

CSS重置默认样式reset.css代码模板

   由于各大浏览器存在兼容性问题,同一个CSS属性在不同浏览器下的表现不一定相同,有经验的前端设计者都会自定义一个重置浏览器样式的CSS文件,在这个文件中定义一些针对不同的浏览器最终表现出一致的代码,大家最熟悉的也许就是* {margin:0 0}了,其实这是最简单的兼容性的代码,一般情况下,仅有这个是不够的,因此笔者收集了几个前端设计网站使用的reset.css代码模板,如果需要你可以复制这些代码保存为reset.css文件,然后引用在所需的html文件中即可. 注意:您可以根据您自己的实际