文章标签

在下面嵌入的视频中，Jen Simmons 解释了如何通过使用 width 和 height 属性来改进图片加载。问题在于，当图片首次加载时，会有很多卡顿，因为img 会自然地…

Andrew Welch 前几天提出一个CSS 小挑战，要求将一个普通的 div

• 垂直 + 水平居中
• 缩放以适应视口，并在其周围留有边距
• 保持任意纵横比
• 无 JS

我今天了解到关于基于百分比（%）的padding的一些知识，我之前对它的理解完全错误！我一直认为百分比填充是基于元素本身的。所以如果一个元素宽 1000 像素，并且padding-top: 50%，…

假设您想将 CSS-Tricks 网站放入一个<iframe></iframe>中。您可以这样做

<iframe src="https://css-tricks.org.cn"></iframe>

没有任何其他样式，您将得到一个大小为 300×150 像素的矩形。这甚至不在用户代理…

即使网页已完成视觉渲染，它也不会一成不变。媒体资源（如图片）可能会加载进来并导致布局发生变化，这取决于它们的大小，而这些大小通常在流式布局中直到它们加载完成后才会知道…

假设您在<img />中使用了一个大小为 800×600 像素的图片。它是否真的会在您的网站上显示为 800 像素宽？它很可能不会。我们倾向于将图片放入灵活的容器…

Rachel Andrew 说，CSS 工作组在最近的一次会议上设计了一个纵横比单位。其目的是为我们想要根据…计算元素高度的情况找到一个优雅的解决方案。

Rachel 为我们介绍了 CSS 工作组正在讨论的内容

• 样式化滚动条。这将包含诸如scrollbar-width和scrollbar-color之类的属性。我们现在最好的选择是专有的 WebKit 代码。
• 纵横比。我想

如果您需要一个纵横比大小的<div></div>（或任何可以包含子元素的元素），您可以做到。也许最简洁的方法是使用自定义属性大小的伪元素，通过基于宽度的填充来推导出正确的最小高度。

但媒体元素如<img …