css在身体上应用宽度
[英]css applying width on the body
问题描述
I am completely new to html and css so my question could be very basic but hope you guys can help me udnerstnad, 
我是html和css的全新，所以我的问题可能非常基本，但希望你们能帮助我udnerstnad，
I am using following css code 我正在使用以下css代码
body
{
background-color:Olive;
width:550px;
font-family:Verdana;
}
I am setting width to 550px and as a result all my paragraphs contract to 550px but the background is applied to the whole page even beyond the 550px 我将宽度设置为550px，因此我的所有段落都收缩到550px但背景应用于整个页面甚至超过550px
I understand that because of inheritance the child elements would have inherited the width property from body, but I was thinking that if I set width property of body to 550px then background should be visible in 550px wide area and not the full page, 我理解，由于继承，子元素将从body继承width属性，但我想如果我将body的width属性设置为550px，那么背景应该在550px广区而不是整页中可见，
I don't get the logic here.. 我在这里没有得到逻辑..
6 个解决方案
解决方案1
1 2012-07-30 12:30:40
Why not wrap your content in a div, and set the properties to that? 为什么不将您的内容包装在div中，并将属性设置为？
<body>
<div class="content">
... content here
</div>
</body>
and apply the same classes to the div 并将相同的类应用于div
.content
{
background-color:Olive;
width:550px;
font-family:Verdana;
}
解决方案2
1 已采纳 2012-07-30 12:37:33
If you apply a color to the html, for example html { background-color: yellow; } 如果你将颜色应用于html，例如html { background-color: yellow; } html { background-color: yellow; } , you'll see this is not the case at all. html { background-color: yellow; } ，你会看到这是不是在所有的情况。 The <body> tag is special in that it is intended to encompass the entire contents of the HTML page. <body>标签的特殊之处在于它旨在包含HTML页面的全部内容。 When you apply a background, then, the default is for it to paint the entire background page, unless html s background has otherwise been set. 当你应用背景时，默认是它绘制整个背景页面，除非另外设置了html的背景。
See this jsfiddle example. 看到这个jsfiddle示例。 Like the other posters above, I highly recommend using a <div> element to wrap, size, and color your content. 与上面的其他海报一样，我强烈建议使用<div>元素来包装，调整大小和为内容着色。
This is described in the CSS2 specifications as so: 这在CSS2规范中描述如下：
The background of the root element becomes the background of the canvas and covers the entire canvas, anchored (for 'background-position') at the same point as it would be if it was painted only for the root element itself.
解决方案3
0 2012-07-30 12:30:45
You can use a container div that wraps your whole page and acts like a "fake" body . 你可以使用一个包装整个页面的容器div ，就像一个“虚假”的body 。 Then if you apply these style to this div your problem will be solved. 然后，如果您将这些样式应用于此div您的问题将得到解决。
解决方案4
0 2012-07-30 12:31:03
css CSS
#wrapper {
width: 550px;
margin: 0 auto;
text-align: left;
}
HTML: HTML：
<body>
<div id="wrapper">
Piece of text inside a 550px width div centered on the page
</div>
</body>
解决方案5
0 2012-07-30 12:36:27
You should try this http://jsfiddle.net/ajaypatel_aj/8tfKc/ HTML 你应该试试这个http://jsfiddle.net/ajaypatel_aj/8tfKc/ HTML
<div id="wrapper">Test me!</div>
CSS CSS
*{
margin:0;
padding:0;
}
body{
text-align:center; /*For IE6 Shenanigans*/
font-family:Verdana;
}
#wrapper{
width:550px;
margin:0 auto;
text-align:left;
background-color:Olive;
}
Answer is simple applied body color will set to whole page you must have to use div . 答案是简单的应用体色将设置为整页必须使用div。
解决方案6
0 2012-07-30 12:44:41
This is what you are looking for. 这就是你要找的东西。
<html>
<head>
<title>
Your title goes here.
</title>
</head>
<style type="text/css">
#test
{
background-color:Olive;
width:550px;
font-family:Verdana;
}
</style>
<body>
<div id='test'>
Hello
</div>
</body>
Another answer is: 另一个答案是：
<html>
<head>
<title>
Your title goes here.
</title>
</head>
<style type="text/css">
html
{
background-color:white;
}
body
{
background-color:Olive;
width:550px;
font-family:Verdana;
}
</style>
<body>
Hello
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.