html - 带有填充的 div 的仅样式内容区域

Question

我只想为 div 的内容区域设置样式有填充以可视化其内容边界，就像开发工具中的内部框由网络着色一样浏览器。我已经尝试了很多东西，但要么是 css 建议还没有实现，要么我以错误的方式使用它。

<div class="around">
  <div class="div-with-padding outline-content">
    stuff ...
  </div>
</div>

.around { margin: 50px auto; width: 400px; padding: 0px; }
.div-with-padding { min-height: 200px; padding: 15px; }

为了比较，我在 div 中添加了轮廓。下面的 position: relative 是必需的，因为如果它的位置是相对的，它的 child 的最大高度/宽度只适合匹配的 div。

.outline-content {
  outline: 1px solid red;
  position: relative; /* in the original post I've used bootstrap instead */
}

我发现无法在原始 div 中执行此操作，因此我添加了一个伪元素。

第一次尝试:

.outline-content::before {
  content: '';
  position: absolute;
  width: max-content; height: max-content;
  outline: 1px dotted blue;
}

我不太明白 max-content 是如何工作的。我也试过其他人mdn .也许它不起作用，因为我已将 position: absolute; 设置为不更改页面本身。

第二次尝试:

.outline-content::before {
  content: '';
  position: absolute;
  width: calc(100% - 30px); height: calc(100% - 30px);
  outline: 1px dotted blue;
}

问题是如果父级的 padding = 30px 不总是相同的话，如何获取它。我尝试了更多但没有成功。

我知道使用 jQuery 这个问题变得很简单。如果有人知道仅使用 css 的答案……我真的很想知道。还请更正我的代码片段中的错误(width: max-content; 等)。

谢谢!

(这篇文章包括对评论的一些改编)

Answer 1

神奇的 css 属性称为“background-clip”。

HTML

<div class="outer">
    outer-content
    <div class="inner">
        inner-content
    </div>
</div>

CSS

.outer {
    display:inline-block;
    background-color: red;
    border: 1px solid black;
    padding: 10px;
}

.inner {
    width: 100px;
    height: 100px;
    padding: 10px;
    background-clip: content-box;
    -moz-background-clip: content-box;
    background-color: green;
    border: 1px solid black;
}

示例: http://jsfiddle.net/u2vyqdc6/2/

如你所见:

一个包含一些内容和一些填充的周围 div，以便您可以更好地看到正在发生的事情。 里面是另一个包含内容、填充和“background-clip: content-box”的 div。

“background-clip”就像“(-moz-)border-box”一样工作。它告诉浏览器如何处理特定于背景的框模型。

最好的是什么？ 浏览器支持率几乎达到 95%: http://caniuse.com/#feat=background-img-opts