css基础样式重置,浏览器样式统一及IE下样式优化

/*样式重置*/
body,dl,dd,h1,h2,h3,h4,h5,h6,p,form{margin:0;}
ul,ol{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{font-weight:400;}
input:focus,button:focus{outline:none;}
a:focus{outline:none;}

/*基础样式*/
body{font-family:"Microsoft Yahei";color:#000;font-size:12px;background:#fff;}/*IE下滚动条占据空间*/
body,html{-ms-overflow-style:scrollbar;}

/*不同浏览器下placeholder颜色*/
::-webkit-input-placeholder {color:#999 !important;} /* WebKit browsers */
:-moz-placeholder {color:#999 !important;} /* Mozilla Firefox 4 to 18 */
::-moz-placeholder {color:#999 !important;} /* Mozilla Firefox 19+ */
:-ms-input-placeholder {color:#999 !important;} /* Internet Explorer 10+ */

/*去除IE下input框X按钮,查看密码眼睛按钮*/
::-ms-clear,::-ms-reveal{display:none;}

/*移除浏览器input number小箭头*/
input[type=number]{-moz-appearance:textfield;}
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
时间: 2024-08-27 20:55:31

css基础样式重置,浏览器样式统一及IE下样式优化的相关文章

html标签和css基础语法与浏览器兼容性等相关基础学习

<!-- table的使用 --> <h3>前端日常</h3> <form action="https://www.baidu.com"> <table border="1px" cellspacing="0px"><!--cellspacing单元格间隙--> <thead></thead><tbody> <col span=&qu

normalize.css可以对css初始化,不同浏览器可以统一初始样式

/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font

关于reset.css的疑问:为什么一定要重置浏览器样式?

自开始做前端算起,我所做过的每一个项目中都会有一个reset.css,也就是重置样式表.我现在想想都不知道第一次是从哪儿弄来的一个重置样式表.快五年了,好像从来都没有质疑过关于重置样式表的内容. 这样一个样式表里往往会有一大段对“浏览器样式”的清除与重置.刚开始做前端的时候一度感觉,能写出来这么一个样式表似乎很酷.很牛:做时间久了,也自己开始针对不同项目写自己的reset.css了,但也不外乎是一大堆重置样式,有时候都不关心浏览器里每个元素有什么样的默认样式,只是唯恐漏掉哪个元素没有把样式重置掉

重置浏览器的默认样式(css reset)

(1)定义:首先css reset指的是重置浏览器的默认样式 (2)作用:因为现在的浏览器很多,并且每个浏览器都有自己的默认样式,这样就会导致一个页面在多个浏览器下展示产生差异,所以我们需要做一些处理使每个浏览器下展示一致,故需要css reset (3)内容:第一个:*{padding:0;margin:0;border:0;}第二个:你所用到的元素{padding:0;margin:0;border:0;},然而第一个虽然写起来简单,但是它却会将所有的标签重置,而我们可能没有必要将那么多的元

css扁平化博客学习总结(二)css样式重置

css样式重置 方法一:不推荐使用,这么写会让网页解析速度变慢. *{ margin: 0; padding: 0;} 方法二:大家常用的写法,比较流行. body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol,li, dl, dt, dd, form, a, fieldset, input, th, td{margin: 0; padding: 0; border: 0; outline:

分享一下自己在用的CSS样式重置代码

通过借鉴网上大牛们的经验和自己在工作中碰到的一些问题,总结出了这些比较常用的CSS样式重置的代码: @charset "utf-8"; /* 防止用户自定义背景颜色对网页的影响,添加让用户可以自定义字体 */ html{ color: #000; background: #fff; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; font-size: 100%; } /* IE6对positon:fixed的单独处

CSS入门(css简介与样式汇总、CSS的使用方式、CSS样式表的特征、CSS基础选择器和复杂选择器、边框阴影)

一.CSS的作用 1.以统一的方式实现样式的定义 2.提高页面样式的可重用性和可维护性 3.实现了内容(HTML)和表示(CSS)的分离 HTML和CSS之间有什么关系? HTML:构建网页的结构 CSS :构建HTML元素的样式 样式汇总: color:red 字体颜色 font-size:字体大小 font-family:字体样式 background-color 背景颜色 width:宽度 height:高度 字体使用实例(样式) font-family:字体的种类 font-size:字

HTML CSS标签类型转换、样式重置 、前段规范

HTML CSS 基础 标签默认值样式重置: (css reset)包含: body,p,h1,h2,h3,h4,h5,h6,dl,dd外边距 字体 ol,ul,a,img等标签的默认值样式重置 用群组进行重置 标签基本特性和转换 块和内嵌的特性及区别: 内联,内嵌,行内属性标签: 1.默认同行可以继续跟同类型标签 2.内容撑开宽度 3.不支持宽高 4.不支持上下的margin和padding 5.代码换行被解析 快属性: 1.默认独占一行显示 2.没有宽度时,默认撑满一排 display:bl

css样式重置,不建议用通配符

由于各个浏览器对css样式的默认样式不一致,所以有必要进行样式重置.在网上看到很多建议使用 *{margin:0;padding:0} 重置margin和padding.建议不这样子使用,原因主要是性能问题.如果用通配符重置样式,那么势必会花费很大时间.网站打开速度变慢. 所以reset时,按需而行.用到哪些标签就设置重置.