Chrome 开发者工具 第十一章(CSS 容器查询)

CSS容器查询是一个新兴的功能,它允许开发者根据父级容器的属性来操纵元素的样式,这一功能将自适应设计的概念从基于页面转变为基于容器。在Chrome开发者工具的元素面板中,我们可以检查和调试使用了CSS容器查询的元素。

在元素面板中,被定义为查询容器的每个元素旁边都会显示一个container标记。点击这个标记可以切换容器及其后代的虚线叠加层,这有助于可视化地理解容器查询是如何影响布局的。

例如,如果一个元素使用了container-type: inline-size属性来定义容器,后代元素就可以查询其内嵌尺寸(横轴),并根据容器的宽度更改其样式。在元素面板中,当容器满足查询条件时,应用于后代元素的@container查询声明会被显示出来。 在示例中,如果容器的宽度超过400px,段落(p)元素会以块的形式显示在页面上,占据整个宽度。

如果宽度超过600px,后代元素会采用水平网格布局,标题(h1)在顶部,图片(img)在左侧。你可以通过调整容器的宽度并选择受影响的元素来检查这些@container声明。

如果你想找到并选择导致查询生效的容器元素,你可以将鼠标悬停在@container声明上方的元素名称上,然后点击。这会将你带到元素面板中相应的元素,并在样式窗格中显示查询的属性及其当前值。

通过这些工具,开发者可以更加灵活地控制布局,确保在不同尺寸的容器中元素都能保持良好的样式和布局。CSS容器查询的加入,为响应式设计提供了更多的可能性和精细度。

相关推荐
明月清风徐徐2 分钟前
Vue实训---2-路由搭建
前端·javascript·vue.js
王解11 分钟前
速度革命:esbuild如何改变前端构建游戏 (1)
前端·vite·esbuild
葡萄城技术团队18 分钟前
使用 前端技术 创建 QR 码生成器 API1
前端
DN金猿20 分钟前
Vue移动端网页(H5)预览pdf文件(pdfh5和vue-pdf)(很详细)
前端·vue.js·pdf
鸽鸽程序猿28 分钟前
【前端】javaScript
开发语言·前端·javascript
秦时明月之君临天下36 分钟前
React和Next.js的相关内容
前端·javascript·react.js
上官花雨1 小时前
什么是axios?怎么使用axios封装Ajax?
前端·ajax·okhttp
米奇妙妙wuu1 小时前
React中 setState 是同步的还是异步的?调和阶段 setState 干了什么?
前端·javascript·react.js
李刚大人1 小时前
react-amap海量点优化
前端·react.js·前端框架
闹闹没有闹1 小时前
socket连接封装
前端