css在身体上应用宽度

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; } html { background-color: yellow; } ，你会看到这是不是在所有的情况。 <body>标签的特殊之处在于它旨在包含HTML页面的全部内容。 当你应用背景时，默认是它绘制整个背景页面，除非另外设置了html的背景。

看到这个jsfiddle示例。 与上面的其他海报一样，我强烈建议使用<div>元素来包装，调整大小和为内容着色。

这在CSS2规范中描述如下：

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

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 个解决方案

解决方案1
1 2012-07-30 12:30:40

解决方案2
1 已采纳 2012-07-30 12:37:33

解决方案3
0 2012-07-30 12:30:45

解决方案4
0 2012-07-30 12:31:03

解决方案5
0 2012-07-30 12:36:27

解决方案6
0 2012-07-30 12:44:41

css在身体上应用宽度

问题描述

6 个解决方案

解决方案1 1 2012-07-30 12:30:40

解决方案2 1 已采纳 2012-07-30 12:37:33

解决方案3 0 2012-07-30 12:30:45

解决方案4 0 2012-07-30 12:31:03

解决方案5 0 2012-07-30 12:36:27

解决方案6 0 2012-07-30 12:44:41

解决方案1
1 2012-07-30 12:30:40

解决方案2
1 已采纳 2012-07-30 12:37:33

解决方案3
0 2012-07-30 12:30:45

解决方案4
0 2012-07-30 12:31:03

解决方案5
0 2012-07-30 12:36:27

解决方案6
0 2012-07-30 12:44:41