如何决定在 CSS 中为初学者放置属性的位置？答案

【问题标题】：How to decide where to put property in for beginner in CSS?如何决定在 CSS 中为初学者放置属性的位置？
【发布时间】：2015-05-13 14:03:33
【问题描述】：

我是 CSS 新手。在熟悉 CSS 之后，出现了一些关于属性的地方的问题。像这样：

P1：检查#menu & #menu a code is here

P2：查看#menu a code is here

在#menu{ } 和#menu a{ } 中，float: right、position: relative 等不同的财产位置似乎是相同的结果...

现在我很困惑，何时以及如何决定将这些属性放在正确的位置？谁能给我一些基本的想法？ :)

【问题讨论】：

贴一些代码，而不是截图。当你在它的时候，把它全部扔到fiddle。
你能解释一下你想问什么吗？我不太明白。
对不起，伙计们。我是新来的，并尽力描述。现在代码已开启。请看一看。

标签： html css web typesetting

【解决方案1】：

在上面的示例中，您应该将其应用于锚标记，因为您希望将其用作按钮。

如果您将这些样式应用到 div，那么您需要在锚点上使用 display: block;。

您几乎应该始终将 css 应用到您要设置样式的确切元素上。

【讨论】：

所以强烈建议将样式放在正确的元素上？好的，我以后会注意的。有时，我觉得一些教程视频在父级中添加元素，在子级中添加一些元素。很难知道何时将元素放入...

【解决方案2】：

试试这个我已经简化了你的代码，作为一个初学者你可以通过最佳实践来熟悉 css ...

body { 
    font-family: 'myriad pro', helvetica, sans-serif;
    color: #444;
}
a {
    color: #444;
    text-decoration: none;
}
#header {
    float: left;
    width: 96%;/*if you use box-sizing you can put 100% */
    padding: 2%;
}
#logo {
    float: left;
}
#logo h1 {
    margin: 0;
}
#logo h1 span {
    font-weight: normal;
}
#menu {
    float: right;
    margin: 0;
    list-style: none;
}
#menu a {
    border-radius: 25px;
    display: block;
    border: solid 2px #444;
    padding: 5px 20px;
    line-height: 24px;
}
#menu a:hover {
   background: #444;
   color: #fff;
}

<div id="header">
    <div id="logo">
        <h1><span>d</span>tech</h1>
    </div>
    <ul id="menu">
        <li><a href="#"><span>Get in touch</span></a></li>
    </ul>
</div>

【讨论】：

谢谢卡西！！！我想知道专业工程师如何处理这个问题。我会尽力做到的！:D