您现在的位置是:网站首页> 编程资料编程资料
CSS Reset 样式重置的实现示例css滚动条样式修改的代码CSS 设置滚动条样式的实现纯CSS3 Material Design风格单选框和复选框特效css 设置overflow:scroll 滚动条的样式 使用CSS3实现input多选框自定义样式的方法示例如何只在IE上加载CSS样式表css清除默认样式和设置公共样式的方法
2021-09-03
1089人已围观
简介 这篇文章主要介绍了CSS Reset 样式重置的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

前言:所有浏览器都有附带的默认样式,这些样式应用在每一个页面,叫做“用户代理样式表”。(如下需要梯子)
Chromium UA stylesheet -Google Chrome & Opera
Mozilla UA stylesheet - firefox
WebKit UA stylesheet - safari
虽然大部分相同,但也有很多样式是不一致的,如搜索输入框

所以我们需要reset css处理,统一不同浏览器差异确认团队开发的起始标准,弥补浏览器的‘缺点’。
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, h1, h2, h3, h4, h5, h6, 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, h1, h2, h3, h4, h5, h6, 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实现照片堆叠效果的实例代码jQuery和CSS3全屏展开纸张堆叠样式导航菜单特效jQuery和CSS3超酷3D堆叠式幻灯片特效源码HTML5+CSS3图片堆叠转瀑布流布局特效源码jQuery+CSS3实现堆叠卡片样式导航菜单特效源码CSS3炫酷堆叠卡片切换动画特效源码 14种jQuery+CSS3实现的堆叠式面板切换特效源码
- 六大布局之FrameLayout的使用CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局,左侧固定宽,右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题
- CSS3 毛玻璃效果使用CSS3制作倾斜导航条和毛玻璃效果Css3新特性应用之视觉效果实例CSS3毛玻璃效果(blur)有白边问题的解决方法利用CSS3实现毛玻璃效果示例源码使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法CSS毛玻璃效果如何实现css实现照片模糊效果类似毛玻璃效果
- CSS 外边距(margin)重叠及防止方法使用CSS实现三栏自适应布局(两边宽度固定,中间自适应)CSS实现三栏布局中间一栏自适应且随文字大小变化宽度的示例代码CSS columns实现两端对齐布局的示例代码用CSS Grid布局制作一个响应式柱状图的实现解决CCS中的margin:top塌陷问题css如何利用负margin技术实现平均布局解决margin 外边距合并问题 css 布局 之 两端布局的实例代码 (利用父级负的margin)
- 控制Flex子元素在主轴上的比例的方法flex布局被子元素撑开如何保持内容不超出容器的方法
- CSS 样式的使用方式、选择器 css3的focus-within选择器的使用CSS选择器中的正则表达式使用巧用CSS属性值正则匹配选择器(小技巧)css选择器四大类:基本、组合、属性、伪类css复杂选择器及css字体样式、颜色属性详解详解如何使用CSS3中的结构伪类选择器和伪元素选择器CSS3 新增选择器的实例css3 伪类选择器快速复习小结盘点CSS Selectors Level4中新增的选择器CSS 中的六个重要选择器(三秒就可以记住)
- CSS实现宽高等比自适应容器的方法CSS背景图片固定宽高比自适应调整的实现方法CSS 实现的图片宽高自适应固定边框CSS实现的图片宽高自适应固定边框CSS实现宽度自适应宽高16:9的矩形的示例
- 前端项目修改默认滚动条样式(小结)css 设置overflow:scroll 滚动条的样式 CSS3改变浏览器滚动条样式详解如何自定义CSS滚动条的样式纯css修改浏览器scrollbar滚动条样式示例CSS 设置滚动条样式的实例代码配置H5的滚动条样式的示例代码详解css3自定义滚动条样式写法CSS3自定义滚动条样式的示例代码纯CSS改变webkit内核浏览器的滚动条样式
- css骚操作表单验证功能的实现代码纯CSS实现表单验证的示例代码使用HTML5和CSS3表单验证功能纯CSS3实现表单验证效果(非常不错)jQuery+CSS3实现的留言表格表单内容验证特效源码htm5+CSS3实现的表单美化带输入验证特效源码
- 详解用backgroundImage解决图片轮播切换CSS3实现炫酷的切片式图片轮播效果手把手教你用纯css3实现轮播图效果实例纯CSS3实现图片无间断轮播效果
