-2

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

我对如何定位元素感到困惑。我想知道我应该使用 div 来定位元素还是直接使用标签和 id 来做。如果我使用标签名称和 ID，我不必单独使用 div定位元素。我可以同时设计风格和定位。

何时使用 div 何时不使用？

实际上，我正在尝试构建这样的东西：在此处输入图像描述

4

3 回答 3

3

如果我正确理解了您的问题，那么在我看来，您对一些非常基本的概念有误解。

基本上，adiv可以被认为是承载其他元素的容器、面板或元素。您可以定位 a 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 和两个图像。在这种情况下，我们希望在 div 的最左侧有一个图像，在最右侧有另一个图像。我们还希望将两个图像向下推大约 10 个像素（定位）。

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

于 2013-09-22T07:28:41.273 回答
3

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

基础 HTML5 模板

于 2013-09-22T07:01:19.890 回答
1

根据优秀书籍“卢克史蒂文斯关于 HTML5 的真相”，我的建议切换到“节”、“页眉”、“页脚”、“旁白”等可能会出现可访问性问题，因为 HTML5 不能被所有设备识别，所以要解决这个问题可以利用 ARIA“角色”。您仍然可以使用 Div 并为您的布局分配“角色”，但我会采用 HTML5 方法。

这里有一些好信息；

提高 Web 可访问性

咏叹调角色 101

于 2013-09-22T07:23:07.827 回答