Question

我是CSS新手，并在制作网站的同时学习它。

我对如何定位元素感到困惑。我想知道我是否应该使用div来定位元素，或者我是否使用标签和ids直接进行。如果我使用标签名称和ID，我不需要分别使用div来定位元素。我可以同时设计风格和位置。

何时使用div而何时不使用？

实际上，我正在尝试构建这样的内容： enter image description here

Answer 1

HTML5使得div有点过时了，引入了页眉，页脚，旁边，部分，文章标签等等。在HTML5中，只有当内容无法放入我刚刚列出的更新，更合适的标签之一时，才应使用div。请查看此article以获得更好的说明。

Basis HTML5 template

Answer 2

如果我理解你的问题，我觉得你对一些非常基本的概念有误解。

基本上，div可以被认为是容纳其他元素的容器，面板或元素。你可以定位div，但你也可能想要定位任何其他元素，所以这里有一些非常基本的代码：

定位元素：

<!doctype html>
    <html lang="en">
    <head></head>
    <body>
        <div id="uniqueDiv">
            <!-- You cannot use the same ID on any element more than once on a page. If you need multiple elements with the same "id", use class instead. -->

            <img id="one" src="one.png" />
            <img id="two" src="two.png" />
        </div>
    </body>
</html>

* { margin: 0; padding: 0; outline: 0; border: 0; outline: none; border: none; }

uniqueDiv img {
    margin: 10px 0 0 0;
}

#one {
    float: left;
}

#two {
    float: right;
}

这是定位背后的基本前提。我没有为Padding添加示例，但是您不应该使用Padding来定位元素。你应该使用保证金。此外，以*开头的行称为CSS重置，重置样式表的目标是减少浏览器在默认行高，边距等方面的不一致性。

以下简要说明了此代码的用途：

最重要的代码显然是HTML。它应该放在自己的.html文件中。底部的CSS应放在自己的.css文件中。

所以，我们里面有1个div和2个图像。在这种情况下，我们希望在div的最左侧有一个图像，在最右边有另一个图像。我们还希望将两个图像向下推大约10个像素（定位）。

因此，uniqueDiv img {}用于将uniqueDiv中包含的所有图像从其div的顶部向下放置10个像素。 #one {}和#two用于将图像浮动到左侧和右侧。

Answer 3

根据优秀的书“Luke Stevens关于HTML5的真相”切换到“Sections”，“Footer”，“Aside”等等我的建议可能会出现无障碍问题，因为所有设备都无法识别HTML5打击这个你可以利用ARIA“角色”。您仍然可以使用Div并为您的布局指定“角色”，但我会采用HTML5方法。

这里有一些好消息;

Improving Web Accesibility

Aria Roles 101

CSS定位困境

3 个答案: