html - 我可以在一个 CSS 选择器中同时使用百分比 (100%) 和像素 (-30px)

Question

我正在修改 Wordpress Responsive 的子主题。 我试图将我的 H1 帖子/页面标题放在一个盒子里，并且成功了。

问题是...我需要将页眉的左填充设置为 15px，每当我这样做时，页眉所在的框就会变得太宽。

我将框设置为 width: 100%; 我需要使用百分比，因为我正在修改响应式主题。 但是因为我想要带有 padding-left: 15px; 的内部元素 (H1) ...所有这一切都是使宽度为 100% + 15px，这是我不想要的。

我正在尝试将框(或内部的 H1)设置为 100% 减去 15 像素...请告诉我，这甚至可能吗？

...不幸的是，当我用 Firebug 查看页面时，我看到 h1 { } 和另一个命令 .entry-title, .post-title { } 在 HTML 中似乎没有分开，像这样:

<h1 class="entry-title post-title">Header!</h1>

我曾尝试将两个 CSS 元素之一设置为宽度 100%，另一个设置为 -15px，但无济于事。我还尝试了一些基本的 z-index 尝试，将一个设置为 z-index: 99; ，将另一个设置为 z-index: 1; ，这没有要么工作。

感谢阅读

Answer 1

您正在寻找的是 calc CSS 中的函数。对于您的具体情况，您需要执行以下操作:

h1 {
    width: calc(100% - 15px);
}

也就是说，前提是我正确理解了您的问题。上面所做的是将 h1 标签的宽度设置为其父元素的 100%，减去 15px。