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

Question

我是CSS的新手。在熟悉CSS之后发生了一些属性问题。像这样：

P1：检查#menu＆amp; #menu a code is here

P2：检查#menu a code is here

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

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

Answer 1

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

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

您几乎应该始终将css应用于您尝试设置样式的确切元素。

Answer 2

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

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;