开发者

What is the purpose of this CSS snippet?

开发者 https://www.devze.com 2023-03-27 12:42 出处:网络
I have the following sni开发者_开发知识库ppet in my stylesheet. What is the impact or purpose?

I have the following sni开发者_开发知识库ppet in my stylesheet. What is the impact or purpose?

* {
    margin:0;
    padding:0;
    top: 0px;
    left: 0px;
}


It is a reset. All elements will have 0 margin, padding, etc. after that.

Such resets are useful to normalize behavior (some browsers come with predefined margins, paddings, etc.) and to increase visual consistency across browsers.


It's a reset CSS. It's purpose is to remove default non-zero spacings for all (*) elements. All browsers have some default style sheet and they're not very consistent with each other. Take <form> as an example.

Note: Setting the left and top properties to 0px doesn't look right to me. It will most probably cause problems with absolute positioning. When positioning an element absolutely you may want to define only it's vertical or horizontal offset (not both), leaving the other offset unchanged. That reset CSS doesn't allow that because it gives values for both vertical and horizontal. Also you may want to position an element from the bottom. If you have that reset it will have both bottom and top which in most cases is not wanted and may alter the height of the element or not respect one of the offsets. In any case it will give you something not intended and break your layout.

For those who want to learn more: http://www.w3.org/TR/CSS2/visuren.html#absolute-positioning


It applies the rules contained within to all elements of the page; creating a predictible baseline for cascading rules.

The technique is called a "reset" (google for "CSS Reset") and is an approach to resolve different browsers using different default CSS rules.

These rules should applied as early as possible, typically at the start of the first-loaded CSS sheet.


The purpose of your snippet is to reset the margin, padding and set the position to the top-left corner of the viewport in your web-browser.


The Estric simbol is known as all /everything so the meaning of this is the CSS will be implemented over all elemetns and set the values as parametered.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号