1. 首页
  2. css

CSS\”内部\”问题

所以,你在做一个设计。您需要一个全宽度的容器元素,因为设计有一个从边到边的水平background-color。但里面的内容不一定要边到边。您想:

  1. 限制宽度(对于大屏幕)
  2. 填充边缘
  3. 使内容居中

这是web布局中的\”内部问题\”。这并不难,只是有很多考虑。\”内部\”问题。居中,最大宽度/填充容器在全宽色带内。你最喜欢的图案是什么?

(每天都是有趣的事情,有许多可能的解决方案可供考虑!)pic.twitter.com/pNYf5YsQMp

-Chris Coyier(@chriscoyier)2019年3月14日

经典的解决方案是外部和内部容器。

父元素的宽度自然与它自己的父元素的宽度相同,我们假设它是<body>元素,或者浏览器窗口的整个宽度。这需要background-color和垫子的左右两侧。内部元素是限制内部和中心宽度的因素。

<footer><div>
footer {--contentWidth: 400px;background: lightcoral;padding: 2rem 1rem;}.inside {max-width: var(--contentWidth);margin: 0 auto;}

这是我大脑首先达到的目标。不使用任何花哨的东西,感觉完全可以理解。\"inside\"元素并不是很理想,只是因为每次使用这种模式时都要记住将它添加到标记中,这让人觉得很忙,但它却没有什么其他的缺点?<h3

这些类型的限制不是我最喜欢的,因为我觉得一个健康的项目允许设计师和开发人员对最终的HTML、CSS和JavaScript输出进行任何控制,从而尽可能地做好工作。但是,唉,有时候你作为一个承包商的处境很奇怪,或者有遗留的CMS问题或者其他什么问题。

如果你只有一个元素可以处理,paddingsorrrrta kinnnda就行了。诀窍是使用calc()并从100%中减去内容最大宽度的一半。

<footer>Content</footer>
footer {--contentWidth: 600px;background: lightcoral;padding: 2rem calc((100% - var(--contentWidth)) / 2);}

这里的问题是它不能防止边缘接触,这可能使这完全不可接受。也许你可以选择里面的元素(段落之类的…)并添加填充(使用通用选择器,比如footer > *)。在<body>或其他地方加上填充物来防止边缘接触是很有诱惑力的,但这不起作用,因为我们需要边缘到边缘的背景色?

好吧,你总是可以做ol\"全宽实用程序的事情。这将在任何宽度的居中容器中工作:

.full-width {width: 100vw;margin-left: 50%;transform: translateX(-50%);}

,但也会使内部内容保持全宽。因此,您需要再次转到内部元素。

而且,一旦您有了一个垂直滚动条,100vw值将触发一个讨厌的水平滚动条。有些网站可以通过这样的方式去掉滚动条:

body { overflow-x: hidden; }

这很不错。如果你不能做到这一点,你可能需要在滚动条上设置一个显式的宽度,然后从100vw中减去它。

body {scrollbar-width: 20px; /* future standards way */}body::-webkit-scrollbar { /* long-standing webkit way */width: 20px;}.full-width {width: calc(100vw - 20px);}

即使这样也有点糟糕,因为这意味着在没有垂直滚动的情况下,全宽容器的宽度并不是很宽。我很想看到CSS在这方面的进步和帮助,可能是改进了viewport单元的处理。

还有很多其他方法来处理这个全宽容器,比如用边距拉到边缘等等。但是,它们最终都需要视口单位,并因此遭受与滚动条相关的相同命运。

如果您确实可以隐藏父对象上的溢出-x,那么极端的负边距和正填充就可以做到这一点。

这有点酷,因为它没有使用任何现代元素。所有古老的CSS属性。

CSS Grid或Flexbox可以在这里提供帮助吗?

墨西哥湾。不完全是这样。

我的意思是,当然,你可以设置一个三列的网格,将内容放在中间的列中,同时使用外部列作为填充。我不认为这是网格的一个特别引人注目的用法,它增加了复杂性,但没有任何好处——也就是说,除非你已经在这个范围内使用并利用了网格。

而是伪造边。

没有法律规定background-color需要来自一个单一的连续元素。你可以通过踢出一个巨大的box-shadow或在需要的地方放置一个伪元素来\"伪造\"左右两边。

我们在这里介绍了各种技巧

CSS\”内部\”问题 为WP2原创文章,链接:https://www.wp2.cn/css/css%e5%86%85%e9%83%a8%e9%97%ae%e9%a2%98/

发表评论

您的电子邮箱地址不会被公开。