My CSS framework - base.css (reset browser default style)

My CSS framework - base.css (reset browser default style)

Copy code
The code is as follows:

@charset "utf-8";
/*
@Name: base
@Function: Reset browser default style
*/
/* Prevent users from customizing the background color of the web page and add a method to allow users to customize the font*/
html {
color:black;
background:white;
}
/* Margins usually make the styles appear differently in different browsers */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
margin:0;
padding:0;
}
/* Note that form elements do not inherit the parent font*/
body,button,input,select,textarea {
font:12px SimSun,tahoma,arial,sans-serif;
}
input,select,textarea {
font-size:100%;
}
/* Remove the margins of each Table cell and make their edges overlap*/
table {
border-collapse:collapse;
border-spacing:0;
}
/* IE bug fixed: th does not inherit text-align*/
th {
text-align:inherit;
}
/* Remove the default border */
fieldset,img {
border:none;
}
/* ie6 7 8(q) bug is displayed as inline performance*/
iframe {
display:block;
}
/* Remove the border of this element in Firefox*/
abbr,acronym {
border:none;
font-variant:normal;
}
/* consistent del style */
del {
text-decoration:line-through;
}
address,caption,cite,code,dfn,em,th,var {
font-style:normal;
font-weight:500;
}
/* Remove the mark before the list, li will inherit it*/
ol,ul {
list-style:none;
}
/* Alignment is the most important factor in typesetting, don't center everything*/
caption,th {
text-align:left;
}
/* From Yahoo, let the title be customized to adapt to multiple system applications*/
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:500;
}
q:before,q:after {
content:'';
}
/* Unify superscript and subscript */
sub, sup {
font-size:75%;
line-height:0;
position:relative;
vertical-align:baseline;
}
sup {
top:-0.5em;
}
sub {
bottom:-0.25em;
}
/* Make the link underlined when hovering*/
a:hover {
text-decoration:underline;
}
/*Underline is not displayed by default to keep the page simple*/
ins,a {
text-decoration:none;
}
/* Remove the focus dot line in IE6 and 7*/
a:focus,*:focus {
outline:none;
}
/* Clear floats */
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
overflow:hidden;
}
.clearfix {
zoom:1; /* for IE6 IE7 */
}
.clear{
clear:both;
display:block;
overflow:hidden;
height:0;
line-height:0;
font-size:0;
}
/* Set display and hiding, usually used in conjunction with JS*/
.hide {
display:none !important;
visibility:hidden;
}
.block {
display:block !important;
}
/* Set inline to reduce bugs caused by floating */
.fl {
float:left;
display:inline;
}
.fr {
float:right;
display:inline;
}

<<:  A brief discussion on the difference between Mysql primary key index and non-primary key index

>>:  A brief discussion on whether CSS will block page rendering

Recommend

Detailed explanation of how to enable slow query log in MySQL database

The database enables slow query logs Modify the c...

About installing python3.8 image in docker

Docker Hub official website 1. Search for Python ...

The most convenient way to build a Zookeeper server in history (recommended)

What is ZooKeeper ZooKeeper is a top-level projec...

Sample code for implementing horizontal infinite scrolling with pure CSS3

The examples in this article are all written in s...

Pricing table implemented with CSS3

Result: Implementation Code html <div id="...

About the problem of writing plugins for mounting DOM in vue3

Compared with vue2, vue3 has an additional concep...

Use iframe to submit form without refreshing the page

So we introduce an embedding framework to solve th...

Summary of nginx configuration location method

location matching order 1. "=" prefix i...

Nginx routing forwarding and reverse proxy location configuration implementation

Three ways to configure Nginx The first method di...

2017 latest version of windows installation mysql tutorial

1. First, download the latest version of MySQL fr...

HTML table markup tutorial (18): table header

<br />The header refers to the first row of ...

How to purchase and install Alibaba Cloud servers

1. Purchase a server In the example, the server p...

Linux Network System Introduction

Table of contents Network Information Modify the ...