Question

所以在过去的几个月里，我自学了网页设计。当然还有更多需要学习的内容，但我觉得我对目前为止的知识有着坚定的把握。我最近想知道的一件事是div是多么必要，特别是当我最终使用绝对定位时。例如，我最近编写了以下代码：

<section id="header-section">
        <header class="main-header">
            <h1>The Voice of Jeremy Donahue</h1>
                <nav class="main-navigation">
                    <ul>
                        <li><a href="http://www.thevoiceofjeremydonahue.com/about">About</a></li>
                        <li><a href="http://www.thevoiceofjeremydonahue.com/contact">Contact</a></li>
                    </ul>
                </nav>
        </header>
</section>

当我在很多页面上阅读源代码时，我觉得事情通常都是这样或非常相似的。当然，我的假设是，作为设计师，您拥有艺术许可，无论如何都可以安排您想要的页面，同时牢记用户体验并保持代码的语义。

然而，很多时候我最终使用{position：absolute}属性定位我的元素，并完全忽略包含div。所以我的想法是，如果我有一个例如H1并且我打算按照我的描述定位它，那么为什么甚至打扰把它放在div中？对于我定位它的任何其他元素都是这样的。为什么不将它们作为独立元素？我想知道，出于语义原因这样做是否仍然是好的，或者如果它被认为是以这种方式分组的最佳实践。我希望我已经清楚地描述了这一点。

为了尽可能具有描述性，这里是我到目前为止对本页特定迭代应用的CSS。它没有接近完成（显然），但你可以看到我已应用于此标题部分的绝对定位。

/*global*/

* {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
            box-sizing: border-box;
}

html {
    height: 100%;
}

body {
    background: rgb(234, 234, 234);
}

body, .container {
    min-height: 100%;
}

.container {
    background: white;
    margin-top: 6.25em;
}

header {
    position: absolute;
    top: 0.625rem;
    background: transparent;
    text-align: center;

}

ul {
    list-style-type: none;
}

a {
    text-decoration: none;
}

/*typography*/

h1 {
    font-family: 'Parisienne', cursive;
    font-size: 2.5rem;
    color: #2713e7;
    position: relative;
    top: 1.25rem;

}

/*lists*/

.main-navigation {
    position: relative;
    top: 2.5rem;
}

.main-navigation li  {
    position: absolute;
    top: 10px;
    display: inline-block;
    margin-right: 10%;
    font-family: 'Atomic Age', cursive;
    font-size: 1.5625rem;

}

/*borders*/

.main-navigation {
    border: 2px solid black;
}

.main-navigation li  {
    display: inline-block;
    border: 2px solid black;


}

Answer 1

<强> 1。所以在过去的几个月里，我自学了网页设计。

干得好！坚持下去。

<强> 2。但是，很多时候我最终使用{position：absolute}属性定位我的元素，并完全忽略包含div。

不好，你不想每次都从画布上定位你的元素。你呢？ position: absolute将基于它最近的相对位置的祖先来定位元素，如果它没有，则必须根据画布定位它。

3 所以我的想法是，如果我有一个H1的例子，我打算按照我的描述进行定位，那么为什么还要把它放在div中呢？对于任何其他元素我也一样定位它这样的方式。为什么不将它们作为独立元素？

有许多方法可以给猫做皮肤，做你觉得最舒服的事情。您将找不到许多进行此类设置的网页设计师。并将每个元素分别放在页面上，因为您最终会在文档中添加许多很多类，这是一个很大的禁忌。

由于存在绝对定位，因此在大多数元素周围都需要div

1 个答案: