3

我对html和css完全陌生，所以我的问题可能非常基本，但希望你们能帮助我udnerstnad，

我正在使用以下 CSS 代码

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

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

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

我不明白这里的逻辑..

4

6 回答 6

2

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

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

这在CSS2 规范中是这样描述的：

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

于 2012-07-30T12:37:33.530 回答
1

为什么不将您的内容包装在一个 div 中，并将属性设置为那个？

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

并将相同的类应用于 div

.content
    {
        background-color:Olive;
        width:550px;           
        font-family:Verdana;
    }
于 2012-07-30T12:30:40.020 回答
0

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

于 2012-07-30T12:30:45.053 回答
0

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>
于 2012-07-30T12:31:03.807 回答
0

你应该试试这个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 。

于 2012-07-30T12:36:27.703 回答
0

这就是你要找的。

<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>
于 2012-07-30T12:44:41.423 回答