样式只有带填充的div的内容区域

Question

我想仅设置具有填充

的内容区域，以显示其内容边界，就像开发工具中的内部框由网络着色浏览器。我已经尝试了很多东西，但是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是必需的，因为它的子的最大高度/宽度只适用于匹配的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;
}

问题是如果父母的填充= 30px并不总是相同的话。我尝试了很多但没有成功。

我知道使用jQuery这个问题变得容易了。如果有人只用css知道答案......我真的很想知道。还请更正我的代码段（width: max-content;等）中的错误。

谢谢！

（这篇文章包括对评论的一些修改）

1 个答案:

答案 0 :(得分：1)

魔术css属性被称为＆＃34; background-clip ＆＃34;。

<强> 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，这样你就可以更好地看到正在发生的事情。 里面是另一个内容，填充和＆＃34;背景剪辑：内容框＆＃34;。

＆＃34;背景剪辑＆＃34;就像＆＃34;（ - moz-）border-box＆＃34;一样。它告诉浏览器如何处理特定于背景的盒子模型。

最棒的是什么？ 浏览器支持几乎是普遍的95％： http://caniuse.com/#feat=background-img-opts

Answer 1

魔术css属性被称为＆＃34; background-clip ＆＃34;。

<强> 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，这样你就可以更好地看到正在发生的事情。 里面是另一个内容，填充和＆＃34;背景剪辑：内容框＆＃34;。

＆＃34;背景剪辑＆＃34;就像＆＃34;（ - moz-）border-box＆＃34;一样。它告诉浏览器如何处理特定于背景的盒子模型。

最棒的是什么？ 浏览器支持几乎是普遍的95％： http://caniuse.com/#feat=background-img-opts