视口概念 视口（viewport）是网页设计中一个至关重要的概念，它指的是用户在屏幕上可见的网页区域。理解视口的概念对于创建响应式网页和优化用户体验至关重要。 视口主要分为两种类型：视觉视口（visual viewport）和布局视口（l...
坐标系 在图形上下文中指定像素的位置时（就像代数中指定坐标系一样），像素的位置是相对于上下文中的一个固定点定义的，这个固定点称为原点。位置指定为沿上下文每个维度从原点偏移的像素数。 本指南介绍了 CSS 对象模型使用的标准坐标系。这些...
使用容器大小和样式查询 容器查询使您能够根据特定容器的特征，为嵌套在该容器内的元素应用样式。查询根据查询条件对容器是否返回真或假。 容器查询与媒体查询类似。@media at-rule允许基于视口大小或其他设备特征为元素应用样式。同样...
使用 CSS 局限 CSS 局限（CSS containment）通过允许浏览器将页面的一个子树与页面的其余部分隔离，以提高网页的性能。如果浏览器知道页面的某个部分与其余内容是独立的，就可以优化渲染并提升性能。 contain 和 con...
CSS 容器查询 容器查询使你能够根据元素容器的大小应用样式。例如，如果容器在周围的上下文中可用的空间更少，你可以隐藏某些元素或使用较小的字体。容器查询是媒体查询的另一种选择，后者根据视口大小或其他设备特征为元素应用样式。...
使用容器滚动状态查询 容器滚动状态查询是一种容器查询类型。与基于容器大小选择性地应用样式到后代元素不同，滚动状态查询允许您基于容器的滚动状态选择性地应用样式到后代元素。这可能包括容器是否部分滚动、是否吸附到滚动吸附容器祖先元素，或者通过...
使用特性查询 特性查询 使用 CSS 的 at 规则 @supports 创建。它给予 web 开发者一种测试浏览器是否有对某个确定特性的支持，而后提供基于测试结果生效的 CSS 的方法。在此指南中你将学习如何使用特性查询实现渐进式增强...
处理多列布局中的内容断开 在多列布局中，列框之间的内容断开方式与分页媒体中页面之间的断开方式相同。在这两种情况下，您都可以使用CSS fragmentation模块的属性来控制内容断开的位置和方式。在本指南中，我们将了解断开机制如何在多...
处理 Multicol 中的溢出 在本指南中，我们将了解 multicol 如何处理溢出，包括在列框内以及内容超出容器容量的情况。...
跨越和平衡列 在本指南中，我们将探讨如何在多列容器内使元素跨越多个列，以及如何控制列的填充方式。...
开发学习网
HTML 简介 2年前 (2024-05-05)