1

这是一个公认的概念，将您的设计和功能分开是很好的。美好的。在这种情况下，让我们将 HTML 和 CSS 分开，特别是菜单层次结构的组织。

嵌套<ol>,<ul>的问题<li>在于，它们似乎与基于百分比的样式完全违反直觉（在响应式设计的设置中）。

我的问题：

我有一个深几层的列表，如下所示：

<ul>
  <li>
    <a>Item 1</a>
    <ul>
      <li>
      <a>Submenu 1</a>
        <ul>
          <li>
            <a>Submenu 1 (1)<a>
          </li>
          <li>
            <a>Submenu 1 (2)<a>
          </li>
          <li>
            <a>Submenu 1 (3)<a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

假设我想以与文档正文相同的方式来设置此列表的样式，以实现响应式 Web 设计relative。absolute所以我用一种方法来设计顶部的样式ul以继续列表：

body > ul{

  position:relative;

  width:20%;

}

一切都很好。但是，如果我随后需要将绝对位置或相对宽度/高度赋予<li>嵌套在列表更深处的 's 怎么办？它们现在遵循顶级的百分比样式<ul>（因为它已被定义为relative）。这基本上意味着如果我希望所有列表项的大小与window. 随后的列表不能被赋予与顶部相同的百分比样式，它们需要加倍/减半/混蛋。

这似乎完全违背了风格和形式分离的整个过程。表单 (HTML) 应该确定数据的关系，而样式 (CSS) 应该确定可视化并提供以任何它认为合适的方式“分离”表单的能力。

我的问题：

  1. 是否可以忽略已定义为fixed//这样的父坐标空间relative？absolute100%100%body

  2. 我是否在 HTML/CSS 关系背后的哲学中遗漏了一些东西，以及如何最好地利用它？

  3. 如果我继续做 Web 开发，我会在 35 岁之前把头发都扯掉吗？

免责声明：

我正在寻找一个可以带给我内心平静的答案，而不是针对单个浏览器的单一修复。如果答案是“无法完成”，请解释您为什么以及对无法完成的事实感到高兴。

4

1 回答 1

1

我对你想要达到的目标很感兴趣。这不是我必须做的事情，但你提出了一个有趣的观点。我还认为您可能误解了某些继承的工作方式。仅仅因为您将相对定位放在元素上并不会改变子元素获取宽度的方式。百分比宽度总是根据其父元素获得宽度，无论是相对定位还是其他。在大多数情况下，父级填充其父级的空间等。在涉及 CSS 时肯定需要掌握一定数量的“禅”，是的，继续进行 Web 开发可能会导致头发脱落！买一个压力球，你应该没问题 :) 至于高度，那是另一回事，因为它是马车，通常不会捡起来'

但是，在使用百分比时你必须小心，如果你要对你的样式进行通用并且你有父/子关系，那么确实字体大小可以减少你指出的。诀窍是根据样式将百分比放在节点树的末尾，并将其他不影响自身的东西（颜色等）放在更通用的样式上。

在大多数情况下，您可以实现所需的目标，但有时确实需要一些计划。

但是正如你所说，如果你定位一些相对的东西，然后在它内部的嵌套级别定位一些绝对的东西，它总是会从它的祖先中的第一个元素开始计算出它的位置，这个元素已经被赋予了相对或绝对定位。我很确定没有办法解决这个问题，除非你点击 javascript 并即时进行一些计算。

于 2013-09-12T18:03:01.113 回答