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

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

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

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

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

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

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

相关推荐
还是大剑师兰特25 分钟前
D3的竞品有哪些,D3的优势,D3和echarts的对比
前端·javascript·echarts
王解25 分钟前
【深度解析】CSS工程化全攻略(1)
前端·css
一只小白菜~31 分钟前
web浏览器环境下使用window.open()打开PDF文件不是预览,而是下载文件?
前端·javascript·pdf·windowopen预览pdf
方才coding36 分钟前
1小时构建Vue3知识体系之vue的生命周期函数
前端·javascript·vue.js
阿征学IT41 分钟前
vue过滤器初步使用
前端·javascript·vue.js
王哲晓41 分钟前
第四十五章 Vue之Vuex模块化创建(module)
前端·javascript·vue.js
丶213641 分钟前
【WEB】深入理解 CORS(跨域资源共享):原理、配置与常见问题
前端·架构·web
发现你走远了41 分钟前
『VUE』25. 组件事件与v-model(详细图文注释)
前端·javascript·vue.js
Mr.咕咕44 分钟前
Django 搭建数据管理web——商品管理
前端·python·django
张张打怪兽1 小时前
css-50 Projects in 50 Days(3)
前端·css