The pitfalls of css-browser default style settings and css style

The pitfalls of css-browser default style settings and css style

Today, I wrote my own css style, and used the <ul> label. After setting a series of effects, I ran it. I found that the location is different from the setting. Open the check item on chrome and find the following section is added at the bottom of the <ul> label styles:

Ul, menu, dir {

Display: block;

List-style-type: disc;

-Webkit-margin-before: 1em;

-Webkit-margin-after: 1em;

-Webkit-margin-start: 0px;

-Webkit-margin-end: 0px;

-Webkit-padding-start: 40px;

} The following source is displayed: After the user agent stylesheet checks html and css, no special settings are found, and standard settings are also made in the html header. After Baidu's "user agent stylesheet", it is found that the browser has different default css settings for different html elements. Solution: 1. A simple method: Set a wildcard style at the beginning of the css file, for example, * {margin: 0px; padding: 0px ;}, overwrite the default settings of the browser; 2. A more complex method: Understand the default settings of common browsers, write a css file separately, and write all the styles to be corrected, this can be shared in future projects. I will discuss this issue in detail later.