html - Border-Box 在 View 之外调整大小

Question

所以最近我想到了这个问题:我的包装器的最大宽度为 1440 像素，我想在它周围添加一个 10 像素的实线边框。当我添加它时，边框只占最大宽度的 10px 并且正在显示，一切都很好。但我希望边框不占用任何最大宽度，我想通过 1440px +

显示边框的 10px

一种解决方案是媒体查询，我知道，这也很有效。我只是想知道是否有一种解决方案，无需添加单独的包装器且无需媒体查询，因此当您将窗口大小时调整到 1440px 以上时，边框只会出现，而当您将窗口大小时调整到 1440px 以下时，边框就会被截断。

只为任何想知道的人。我有一个盒装布局，想要限制大屏幕的内容区域，但希望在小屏幕上使用全 Angular 。

谢谢! :-)

Answer 1

您可以添加一个相对于容器的位置并设置一个 z-index。然后有一个伪元素，如 :before 具有绝对位置和负 z-index，其高度和宽度设置为与父级匹配。这将把它放在你的内容后面，如果你添加了边框，你应该被设置。可能需要 overflow-x:hidden 在主体上，这样它就不会创建滚动条。我将很快为此创建代码以供引用。

或者一个不太复杂的选项是

outline:10px solid blue;

即使使用 border-box 的 box-sizing，轮廓也会超出元素。