Pitfalls encountered by css - browser default style settings

Today I wrote the css style, which used the

tag. After setting a series of effects, I ran it and found that the position and settings were different. Open the check item on chrome and find that the following paragraph is added at the bottom of the styles of the
tag:

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 source displayed next to

is: user agent stylesheet

After checking the html and css, I found that there are no special settings, and standard settings are also made in the html header. After searching "user agent stylesheet" on Baidu, I found that the browser has corresponding css default settings for different html elements.

Solution:

1. A relatively simple method: set a wildcard style at the beginning of the css file, such as *{margin:0px;padding:0px;}, overwriting the browser Default settings;

2. A more complicated method: Understand the default settings of several common browsers, then write a separate css file, and write all the styles that need to be corrected in it. You can use it when doing projects in the future. shared.

I will add more when I have time to learn more about this issue.

For more pitfalls encountered with CSS - browser default style settings. For related articles, please pay attention to the PHP Chinese website!