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

JS Canvas interface and animation effects

Table of contents Overview Canvas API: Drawing Gr...

The difference between char and varchar in MYSQL

CHAR and VARCHAR types are similar, differing pri...

Vue recursively implements three-level menu

This article example shares the specific code of ...

JavaScript example code to determine whether a file exists

1. Business Scenario I have been doing developmen...

Complete example of vue polling request solution

Understanding of polling In fact, the focus of po...

js regular expression lookahead and lookbehind and non-capturing grouping

Table of contents Combining lookahead and lookbeh...

How to configure redis sentinel mode in Docker (on multiple servers)

Table of contents Preface condition Install Docke...

Detailed explanation of object literals in JS

Table of contents Preface 1. Set the prototype on...

VM VirtualBox virtual machine mount shared folder

One environment Install VMware Tools on CentOS 7 ...

Detailed explanation of the use of umask under Linux

I recently started learning Linux. After reading ...

Solution for front-end browser font size less than 12px

Preface When I was working on a project recently,...

An article to help you learn CSS3 picture borders

Using the CSS3 border-image property, you can set...

Five solutions to cross-browser problems (summary)

Brief review: Browser compatibility issues are of...

Simple understanding and examples of MySQL index pushdown (ICP)

Preface Index Condition Pushdown (ICP) is a new f...

Using HTML web page examples to explain the meaning of the head area code

Use examples to familiarize yourself with the mean...