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