样式标头，宽度为100％，不使用position属性

Question

Here is my HTML structure:

 div { position: absolute; width: 100%; top: 0; left: 0; background-color: gray; color: white; text-align: center; } 

 <div>header</div> 

Can I make exactly the same thing (like the result of code above) without position property ?

Answer 1

Sure, just be sure to set margin: 0; and padding: 0; on your html and body elements as well, because most browser stylesheets set non-zero default values for these properties:

 div { width: 100%; background-color: gray; color: white; text-align: center; } html, body { margin: 0; padding: 0; } 

 <div>header</div> 

Answer 2

To debug, you can see...

 div { width: 100%; top: 0; left: 0; background-color: gray; color: white; text-align: center; } * { border: 1px solid red; } 

 <div>header</div> 

One soution could will be remove margin/padding from body.

(NOTE: if you are using bootstrap like row etc, you might have margin left or right for 15px, for that situation you might need use xxx { margin: 0 !important; padding: 0 !important;}

 div{ width: 100%; top: 0; left: 0; background-color: gray; color: white; text-align: center; } body { margin: 0; padding: 0; } 

 <div>header</div> 

Answer 3

Sure you can, for every block element, since their default width is 100%. You can then also erase the width: 100%, and the top/left properties.

To get the same effect as in your example, just make sure to set margin to 0 for html and body , which sets their otherwise default margin to zero:

 html, body { margin: 0; } div{ background-color: gray; color: white; text-align: center; } 

 <div>header</div> 

Answer 4

Here by default browser (User agent stylesheet) applied a default margin to the body tag. So u can override the style of the body tag.

 div{ width: 100%; background-color: gray; color: white; text-align: center; } body { margin: 0px; } 

 <div>header</div> 

Hope this is what you where looking for.