Browser default style and CSS initialization

Why do you want to initialize CSS?

Build station veteran all know, this is to consider the browser compatibility problem, in fact, different browsers on some of the default value of the tag is different, if not the CSS initialization will often appear between browser page differences. Of course, the initialization style will have a certain impact on SEO, but the fish and bear cake can not be combined, but to minimize the impact of the case of initialization.

Believe that a lot of people have appeared more or less, sometimes in the layout of the page, do not know why set the page margins are always not up to their desired effect.

For example, I set the 60px in this property, but it becomes 92px.

Look at all the properties, it is the browser by default plus go.

Look again, why I was normal before I added float.

Added a float to become abnormal, here, I also do not have the margin attribute.

It turns out that float was added to make it out of the document flow

The browser then adds margin-top:16px and margin-bottom:16px to the default, and then 60+16+16=92;

Of course, there are a lot of similar questions, and here are some of the Web site's default CSS properties http://www.iecss.com/

So, what should we do to solve this problem?

• can be added in CSS

*{    margin:0;    padding:0;}

That's what many people write. This is really simple, but some people will be questioned: * Such a generic character when writing code is fast, but if the site is large, CSS style sheet file is large, so write, he will all the tags are initialized once, so that greatly enhance the load of the site run, It takes a long time for the site to load.

• There is also the possible use of the value of the property added, here refers to the Yahoo engineer provided by the CSS initialization sample code

Body,p,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:verdana, Arial, Helvetica, 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;} Ol,ul,li {list-style:none;} Input, textarea, select, button {font:14px verdana,helvetica,arial,sans-serif;} Table {border-collapse:collapse;} HTML {overflow-y: scroll;}. clearfix:after {content: "."; display:block; height:0; clear:both; visibility:hidden;}. Clearfix {*zoom:1;}

Then, every time you write a CSS, you don't have to worry about the problem.

More about browser default styles and CSS initialization related articles please follow topic.alibabacloud.com!

