Question

我是html和css的新手，所以我的问题可能非常基本，但希望你们能帮助我udnerstnad，

我正在使用以下css代码

    body
    {
        background-color:Olive;
        width:550px;           
        font-family:Verdana;
    }

我将宽度设置为550px，因此我的所有段落都缩小为550px，但背景应用于整个页面甚至超出550px

据我所知，由于继承，子元素会从body继承width属性，但我想如果我将body的width属性设置为550px，那么背景应该在550px广区而不是整页中可见，

我在这里没有得到逻辑..

Answer 1

为什么不将内容包装在div中，并将属性设置为？

<body>
<div class="content">
 ... content here
</div>
</body>

并将相同的类应用于div

.content
    {
        background-color:Olive;
        width:550px;           
        font-family:Verdana;
    }

Answer 2

如果您将颜色应用于html，例如html { background-color: yellow; }，您将会发现根本不是这种情况。 <body>标记的特殊之处在于它旨在包含HTML页面的全部内容。当你应用背景时，默认是它绘制整个背景页面，除非设置了html背景。

请参阅此jsfiddle示例。与上面的其他海报一样，我强烈建议您使用<div>元素来包装，调整内容并为内容着色。

CSS2 specifications中描述了这一点：

根元素的背景成为画布的背景并覆盖整个画布，锚定（对于“背景位置”）与在仅为根元素本身绘制时相同的点。根元素不会再次绘制此背景。

Answer 3

您可以使用包装整个页面的容器div，就像“假”body一样。然后，如果您将这些样式应用于此div，您的问题就会得到解决。

Answer 4

css

#wrapper {
    width: 550px;
    margin: 0 auto;
    text-align: left;
}

<强> HTML：

<body>
    <div id="wrapper">
        Piece of text inside a 550px width div centered on the page
    </div>
</body>

Answer 5

你应该试试这个http://jsfiddle.net/ajaypatel_aj/8tfKc/ HTML

<div id="wrapper">Test me!</div>

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;
}

答案是简单的应用体色将设置为整页必须使用div。

Answer 6

这就是你要找的东西。

<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>

另一个答案是：

<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>

css在身体上应用宽度

6 个答案: