Question

您好我有一个我正在开发的HTML网站： HTML代码是这样的：

HTML：

 <body>
--Rest of code-- 
</body>

的CSS：

    body{
    width:70%;
    margin-left:auto;
    margin-right:auto;
    }

这不起作用。页面不居中。但是，当我使用它时：

    <body>
    <div class="page-wrap">
    --Rest of code--
    </div>
    </body>

和CSS：

.page-wrap{
width: 70%;
margin-left:auto;
margin-right:auto;
}

这很有效。

我无法从概念上理解为什么在css中选择body不起作用。在body下的所有内容和div标签下的内容相同之后不是吗？

同样使用CSS，在同一行上我有一个像这样的代码

<div class="A">
<div class"container">
<p>Hello</p>
</div>
</div>

在CSS中，如果我要设置“hello”的样式，我必须使用

.A .container

且只有

.A

即使基本上不起作用.A和.container包含相同的内容。

任何人都可以解释这个概念吗？

Answer 1

您可能想尝试添加

html { width: 100%; }

这告诉身体与...相关的是70％。

另外，请确保您的整个代码都包含<html>标记。

JS Fiddle

Answer 2

实际上......你的两个代码都有效！ http://jsfiddle.net/x6JGs/1/

body{
    width:70%;
    margin-left:auto;
    margin-right:auto;
}

.A {
    color: red;
    background: silver;
}

Answer 3

/* for block elements with position relative */
.position-relative {
    margin-left: auto;
    margin-right: auto;
    width: {some-width};
}

/* for block elements with position absolute */
.position-absolute {
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: {some-width};
}
.parent-of-position-absolute {
    position: relative;
}

请注意，每个块元素的宽度自动为100％，而不是宽度为auto，并且会导致父元素的全宽。宽度100％会破坏这种情况，例如在IE中意味着100％的窗口。

将页面居中并不适用于身体选择器，但使用div页面换行

3 个答案: