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

概述我想仅设置具有填充的div的内容区域以显示其内容边界,就像开发工具中的内部框由Web浏览器着色.我已经尝试了很多东西,但是css建议还没有实现,或者我可能以错误的方式使用它. <div class="around"> <div class="div-with-padding outline-content"> stuff ... </div></div>.around { m 我想仅设置具有填充的div的内容区域以显示其内容边界,就像开发工具中的内部框由Web浏览器着色.我已经尝试了很多东西,但是CSS建议还没有实现,或者我可能以错误的方式使用它.

<div >  <div >    stuff ...  </div></div>.around { margin: 50px auto; wIDth: 400px; padding: 0px; }.div-with-padding { min-height: 200px; padding: 15px; }

为了比较,我在div中添加了一个大纲.位置：相对下方是必需的,因为如果其子位置是相对的,其子项的最大高度/宽度仅适合匹配的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.也许它不起作用,因为我设置了位置：绝对;不要改变页面本身.

第二次尝试：

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

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

我知道使用jquery这个问题变得容易了.如果有人只用CSS知道答案……我真的很想知道.还请更正我的代码片段中的错误(宽度：最大内容;等等).

谢谢！

(这篇文章包括对评论的一些调整)

解决方法 神奇的CSS属性称为“background-clip”.

HTML

<div >    outer-content    <div >        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

总结

以上是内存溢出为你收集整理的html – 样式只有带填充的div的内容区域全部内容，希望文章能够帮你解决html – 样式只有带填充的div的内容区域所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。