欢迎来到覃师宁博客!
帝国cms使用手册

什么是css样式重置,css重置样式的目的是什么

编辑:覃师宁来源:qinshining.com时间:2020-12-18 22:51:38阅读量:

css样式重置也成为css初始化,它的作用是针对不同浏览器进行属性样式的统一定义。因为目前市场上的浏览器大厂有几家,谷歌、火狐、360、ie等,每家浏览器默认样式还不一样,css样式重置目的就是设置同一个标签属性,在每个浏览器产生相同的样式效果。

css样式重置也是每个前端开发者在针对网站样式写入时经常会进行的必要操作。以下代码是覃师宁博客常用的.css样式重置样式,有需要的朋友可以搜藏

比如覃师宁博客常用的css reset:

  • * {
  •   -webkit-box-sizing: border-box;
  •      -moz-box-sizing: border-box;
  •           box-sizing: border-box;
  • }
  • *:before,
  • *:after {
  •   -webkit-box-sizing: border-box;
  •      -moz-box-sizing: border-box;
  •           box-sizing: border-box;
  • }
  • body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td {
  •     margin: 0;
  •     padding: 0;
  • }
  • body {
  •     background: #fff;
  •     color: #555;
  •     font-size: 14px;
  •     font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
  • }
  • td, th, caption {
  •     font-size: 14px;
  • }
  • h1, h2, h3, h4, h5, h6 {
  •     font-weight: normal;
  •     font-size: 100%;
  • }
  • address, caption, cite, code, dfn, em, strong, th, var {
  •     font-style: normal;
  •     font-weight: normal;
  • }
  • a {
  •     color: #555;
  •     text-decoration: none;
  • }
  • a:hover {
  •     text-decoration: underline;
  • }
  • img {
  •     border: none;
  •     vertical-align: middle;
  • }
  • ol, ul, li {
  •     list-style: none;
  • }
  • input, textarea, select, button {
  •     font: 14px "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
  • }
  • table {
  •     border-collapse: collapse;
  • }
  • html {
  •     overflow-y: scroll;
  • }
  • .clearfix:before,
  • .clearfix:after {
  •     content: " ";
  •     display: inline-block;
  •     height: 0;
  •     clear: both;
  •     visibility: hidden;
  • }
  • .clearfix {
  •     *zoom: 1;
  • }
  • .fl {
  •     float: left
  • }
  • .fr {
  •     float: right
  • }
  • .al {
  •     text-align: left
  • }
  • .ac {
  •     text-align: center
  • }
  • .ar {
  •     text-align: right
  • }
  • .hide {
  •     display: none
  • }

至于互联网上,网友分享的各互联网大厂的css重置代码,大家也可以借鉴,或者到对应的官网右键查看源代码找到对应css样式进行查看比较。

或者寻找个人博客模板比较出名的知更鸟、大前端查看对应的CSS重置代码

 

很赞哦!(

相关文章

更多回答

人参与,共有0条回复

为了响应国家网信办《网站要对跟帖评论审核管理规定》,网站评论将审核后发表

网创邦微信公众号