欢迎访问覃师宁博客!
帝国cms使用教程手册

覃师宁博客 覃师宁博客

qinshining.com

当前位置:覃师宁博客 > 网页制作

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

来源:qinshining.com 编辑:覃师宁 时间:2020-12-18

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重置代码

 

文章评论

人参与,共有条评论

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