Question

为什么我们在此菜单上使用这三个属性。我不确定为什么我们需要这三个属性。我真的很想知道这方面的技术方面吗？

margin: 0;
padding: 0;
overflow: hidden;

HTML：

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

CSS：

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

Answer 1

ul元素的默认margin/padding为40px，具体取决于您的浏览器。所以将这些属性放到ul：

ul {
    margin: 0;
    padding: 0;
}

在浏览器上覆盖它的默认行为。请参阅此处的文档： https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation#Finding_Consistency

然后，由于overflow:hidden元素中的浮动li元素，因此使用ul属性。以下是对相关文档的解释

使用overflow属性与可见值不同的值（其值默认）将创建一个新的块格式化上下文。这是技术上必要 - 如果浮动与滚动相交它会强行重新包装内容。重新包裹会发生在每个滚动步骤之后，导致慢滚动体验。

来源：https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

Answer 2

填充和边距的默认值为零（取决于浏览器）。所以我不认为如果删除它们会有任何区别。

溢出：隐藏是一个属性，它会使任何文本从你的div中删除，即它不会显示在屏幕上并被剪裁。

溢出：如果文字超出你的div，则自动会显示滚动条。

还有更多选项可供选择，请通过以下链接获取更多信息::

link

Answer 3

Note that overflow: hidden is also used to clear floats in your element. At least I do that :)

i.e.

ul {
   overflow: hidden;
}

li {
   float: left;
}

https://jsfiddle.net/jff5pnx7/

Answer 4

对于溢出：隐藏部分，我认为最好的答案就是来自w3schools的这个例子：overflow hidden example所发生的事情是，所有不能容纳在允许空间内的内容都会被剪切掉，并且不会以任何方式显示。< / p>

边距和填充之间的差异在this question中的stackoverflow中进行了解释。

为什么我们使用overflow：hidden;

4 个答案: