当浏览器调整大小时，如何将元素保留在它们的区域内？

当浏览器调整大小时，可以使用CSS中的一些技术和属性来保持元素在其区域内。

1. 使用百分比单位：可以将元素的宽度和高度设置为百分比值，相对于其父元素的宽度和高度。这样，当父元素的大小改变时，子元素也会相应地调整大小。例如，将元素的宽度设置为50%，则它将始终占据父元素宽度的50%。
2. 使用最大宽度和最大高度：可以使用CSS的max-width和max-height属性来限制元素的最大宽度和最大高度。这样，即使浏览器窗口调整大小，元素也不会超出指定的最大尺寸。例如，将元素的max-width设置为500px，则无论浏览器窗口调整到多大，元素的宽度都不会超过500px。
3. 使用媒体查询：可以使用CSS的媒体查询来根据浏览器窗口的大小应用不同的样式。通过在不同的屏幕尺寸下应用不同的样式，可以确保元素在不同大小的屏幕上保持适当的大小和位置。
4. 使用flexbox布局：flexbox是一种弹性布局模型，可以轻松地实现元素的自适应和响应式布局。通过将元素包裹在flex容器中，并使用flex属性来定义元素的大小和位置，可以确保元素在浏览器调整大小时保持在其区域内。
5. 使用CSS网格布局：CSS网格布局是一种二维布局模型，可以将页面划分为行和列，并通过指定元素所在的网格单元来控制元素的大小和位置。通过使用网格布局，可以确保元素在浏览器调整大小时保持在其区域内。

总结起来，当浏览器调整大小时，可以使用百分比单位、最大宽度和最大高度、媒体查询、flexbox布局和CSS网格布局等技术和属性来保持元素在其区域内。这些方法可以根据具体的需求和场景来选择使用，以实现元素的自适应和响应式布局。

腾讯云相关产品和产品介绍链接地址：

• 腾讯云官网：https://cloud.tencent.com/
• 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
• 腾讯云云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
• 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
• 腾讯云区块链服务（BCS）：https://cloud.tencent.com/product/bcs
• 腾讯云音视频处理（VOD）：https://cloud.tencent.com/product/vod
• 腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
• 腾讯云物联网（IoT）：https://cloud.tencent.com/product/iot
• 腾讯云移动开发（MPS）：https://cloud.tencent.com/product/mps