怎么在CSS中使用Reset重置样式
本篇文章给大家分享的是有关怎么在CSS中使用Reset重置样式,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
创新互联建站主要从事成都网站设计、网站建设、外贸网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务北镇,十余年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:028-86922220
html{ /* 标准字体大小可以,在移动端使用的rem适配的话会动态改变。 */ font-size:14px; /* 使用IE盒模型(个人取舍,我一般设置width是这是盒子的真实大小,包括padding和border) */ box-sizing: border-box; } html,body{ /* 在有些手机浏览器中点击一个链接或着可点击元素的时候,会出现一个半透明的灰色背景; */ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* 提升移动端滚动的体验效果 */ -webkit-overflow-scrolling: touch; overflow-scrolling: touch; /* 与浏览器窗口高度一致 */ height: 100%; } body{ /* 有些背景默认为浅灰色,所以统一设置为纯白 */ background: #fff; /* 照着antd上面来的,在公司就别用微软雅黑了,不建议字体使用rem。 */ font:14px,-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei', 'Helvetica Neue',Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol' /* 使字体更加顺滑 */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
去除浏览器默认的margin和padding, 自行删减一些不必要的标签
body, p, h2, h3, h4, h5, h6, h7, dl, dd, ul, ol, th, td, button, figure, input, textarea, form, pre, blockquote, figure{ margin: 0; padding: 0; } a{ /* 小手 */ cursor: pointer; /* 取消超链接的默认下划线 */ text-decoration:none; /* antd里面还做了 , 看你团队需不需要这样的风格 */ transition: color 0.3s ease; } ol, ul{ /* 去除自带的ugly样式。 */ list-style:none }
这些节点部分属性没有继承父节点样式,所有继承一下,并取消outline,外轮廓的效果
a, h2, h3, h4, h5, h6, h7, input, select, button, textarea { font-family: inherit; font-size: inherit; font-weight: inherit; font-style: inherit; line-height: inherit; color: inherit; outline: none; } button, input[type='submit'], input[type='button'] { /* 可点击小手 */ cursor: pointer; } /* 取消部分浏览器数字输入控件的操作按钮 apperance可以改变控件的外观。 */ input[type='number'] { -moz-appearance: textfield; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; } /** * 删除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; } /** * 让html5中的hidden在IE10中正确显示 */ [hidden] { display: none; } template { /* 有些浏览器会显示template 不过template标签用的也少,自行取舍。 */ display: none; }
以上就是怎么在CSS中使用Reset重置样式,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。
分享标题:怎么在CSS中使用Reset重置样式
浏览路径:http://myzitong.com/article/psjdee.html