当前位置: 首页 > news >正文

container的讲解

我们做开发经常会遇到这样的一个需求,要开发一个响应式的网站,但是我们需要我们的元素样式跟随着我们的元素尺寸大小变化而变化。而我们常用的媒体查询(Media Queries)检测的是视窗的宽高,根本无法满足我们的业务需求,这时我们常常会用到一个container属性,容器查询来实现我们的,元素样式跟随着我们的元素尺寸大小变化而变化。的业务需求。但是container是就要好几个属性可以使用的。今天我们就来好好介绍一下这几个属性。

container的属性介绍

containercontainer-typecontainer-name 的简写属性,用来显式声明某个元素是一个查询容器,并且定义查询容器的类型(由 container-type 指定)和查询容器的名称(由 container-name 指定,使用反斜杠(/)隔开。

container-type表示指向容器的类型,是水平方向的(对应宽度),还是包括垂直方向的(对应宽度和高度)。

语法如下:

container-type: normal;
container-type: size;
container-type: inline-size;

其中normal是默认值,表示不建立容器元素,size表示水平和垂直方向都建立,inline-size是只在水平方向建立,会给元素同时应用layout、style和inline-size容器状态。

container-name的作用

container-name的作用是给容器元素命名,这个属性在页面中存在多个容器元素的时候,可以帮我们区分不同的容器属性,不至于搞混。

假设如下CSS代码:

@container (max-width: 780px) {p {font-size: 20px;}
}

如果页面中存在多个容器元素,则这些元素中的 <p> 元素都会应用 font-size: 20px;,但我们的初衷可能就只有某一个容器元素才应用相关样式,此时container-name就很有作用了。

例如:

.container-a {container: inline-size aside;
}
.container-b {container: inline-size banner;
}
@container banner (max-width: 480px) {p {font-size: 20px;}
}

此时,只有banner这容器元素内的 <p> 元素才会文字字号才会是20px

相关文章:

container的讲解

我们做开发经常会遇到这样的一个需求&#xff0c;要开发一个响应式的网站&#xff0c;但是我们需要我们的元素样式跟随着我们的元素尺寸大小变化而变化。而我们常用的媒体查询&#xff08;Media Queries&#xff09;检测的是视窗的宽高&#xff0c;根本无法满足我们的业务需求&…...

JavaScript 箭头函数

&#xff08;许多人所谓的成熟&#xff0c;不过是被习俗磨去了棱角&#xff0c;变得世故而实际了。那不是成熟&#xff0c;而是精神的早衰和个性的消亡。真正的成熟&#xff0c;应当是独特个性的形成&#xff0c;真实自我的发现&#xff0c;精神上的结果和丰收。——周国平&…...

简单理解Transformer注意力机制

这篇文章是对《动手深度学习》注意力机制部分的简单理解。 生物学中的注意力 生物学上的注意力有两种&#xff0c;一种是无意识的&#xff0c;零一种是有意识的。如下图1&#xff0c;由于红色的杯子比较突出&#xff0c;因此注意力不由自主指向了它。如下图2&#xff0c;由于…...

Vue3面试题:20道含答案和代码示例的练习题

Vue3中响应式数据的实现原理是什么&#xff1f; 答&#xff1a;Vue3中使用Proxy对象来实现响应式数据。当数据发生变化时&#xff0c;Proxy会自动触发更新。 const state {count: 0 }const reactiveState new Proxy(state, {set(target, key, value) {target[key] valueco…...

Oracle数据库创建用户

文章目录 1 查看当前连接的容器2 查看pdb下库的信息3 将连接改到XEPDB1下&#xff0c;并查看当前连接4 创建表空间5 创建用户6 用户赋权7 删除表空间、用户7.1 删除表空间7.2 删除用户 8 CDB与PDB的概念 1 查看当前连接的容器 SQL> show con_name;CON_NAME ---------------…...

互联网摸鱼日报(2023-04-30)

互联网摸鱼日报&#xff08;2023-04-30&#xff09; InfoQ 热门话题 被ChatGPT带火的大模型&#xff0c;如何实际在各行业落地&#xff1f; Service Mesh的未来在于网络 百度 Prometheus 大规模业务监控实战 软件技术栈商品化&#xff1a;应用优先的云服务如何改变游戏规则…...

第二章--第一节--什么是语言生成

一、什么是语言生成 1.1. 说明语言生成的概念及重要性 语言生成是指使用计算机程序来生成符合人类自然语言规范的文本的过程。它是自然语言处理(NLP)领域中的一个重要分支,涉及到语言学、计算机科学和人工智能等领域的交叉应用。语言生成技术可以被广泛地应用于自动问答系…...

HTML <!--...--> 标签

实例 HTML 注释&#xff1a; <!--这是一段注释。注释不会在浏览器中显示。--><p>这是一段普通的段落。</p>浏览器支持 元素ChromeIEFirefoxSafariOpera<!--...-->YesYesYesYesYes 所有浏览器都支持注释标签。 定义和用法 注释标签用于在源代码中…...

TinyML:使用 ChatGPT 和合成数据进行婴儿哭声检测

故事 TinyML 是机器学习的一个领域,专注于将人工智能的力量带给低功耗设备。该技术对于需要实时处理的应用程序特别有用。在机器学习领域,目前在定位和收集数据集方面存在挑战。然而,使用合成数据可以以一种既具有成本效益又具有适应性的方式训练 ML 模型,从而消除了对大量…...

JavaScript中的Concurrency并发:异步操作下的汉堡制作示例

这篇文章想讲一下JavaScript中同步与异步操作在一个简单的示例中的应用。我们将以制作汉堡为例&#xff0c;展示如何使用同步方法、回调函数&#xff08;callbacks&#xff09;和Promise与async/await来实现该过程。 Let’s imagine we’re trying to make a burger: 1. Get …...

微信小程序开发一个多少钱

小程序开发是当前比较流行的一项技术服务&#xff0c;能够为企业和个人带来巨大的商业价值和社会价值&#xff0c;但是小程序开发费用也是潜在的成本之一。在选择小程序开发服务时&#xff0c;了解开发费用如何计算、影响价格的因素以及如何降低成本等方面的知识&#xff0c;可…...

Python基础入门(2)—— 什么是控制语句、列表、元组和序列?

文章目录 01 | &#x1f684;控制语句02 | &#x1f685;列表03 | &#x1f688;元组04 | &#x1f69d;序列05 | &#x1f69e;习题 A bold attempt is half success. 勇敢的尝试是成功的一半。 前面学习了Python的基本原则、变量、字符串、运算符和数据类型等知识&#xff0c…...

计算机专业大一的一些学习规划建议!

大家好&#xff0c;我是小北。 五一嗖的一下就过啦~ 对于还在上学的同学五一一过基本上意味着这学期过半了&#xff0c;很多大一、大二的同学会有专业分流、转专业等事情。 尤其是大二的时候&#xff0c;你会发现身边有些同学都加入各种实验室了&#xff0c;有忙着打ACM、学生…...

万万没想到在生产环境翻车了,之前以为很熟悉 CountDownLatch

前言 需求背景 具体实现 解决方案 总结 前言 之前我们分享了CountDownLatch的使用。这是一个用来控制并发流程的同步工具&#xff0c;主要作用是为了等待多个线程同时完成任务后&#xff0c;在进行主线程任务。然而&#xff0c;在生产环境中&#xff0c;我们万万没想到会…...

Springboot整合Jasypt实战

Springboot整合Jasypt实战 引入依赖 <dependency><groupId>com.github.ulisesbocchio</groupId><artifactId>jasypt-spring-boot-starter</artifactId><version>3.0.5</version> </dependency>配置jasypt # 配置jasypt相关信息…...

计算机网络笔记:DNS域名解析过程

基本概念 DNS是域名系统&#xff08;Domain Name System&#xff09;的缩写&#xff0c;也是TCP/IP网络中的一个协议。在Internet上域名与IP地址之间是一一对应的&#xff0c;域名虽然便于人们记忆&#xff0c;但计算机之间只能互相认识IP地址&#xff0c;域名和IP地址之间的转…...

C语言函数大全-- s 开头的函数(4)

C语言函数大全 本篇介绍C语言函数大全-- s 开头的函数&#xff08;4&#xff09; 1. strdup 1.1 函数说明 函数声明函数功能char * strdup(const char *s);用于将一个以 NULL 结尾的字符串复制到新分配的内存空间中 注意&#xff1a; strdup() 函数返回指向新分配的内存空间…...

Linux常见指令 (2)

Linux常见指令 ⑵ 补充man描述:用法:例子 echo描述:用法:例子 echo 字符串例子 echo 字符串 > 文件例子 追加重定向(>>)例子 输出重定向(>)来创建文件 && (>)来清空文件 cat描述:用法:例子 cat && cat 文件补充:例子 cat 文件 && cat &…...

shell脚本4

字符串变量 格式介绍&#xff1a;单引号 varabc 双引号 var"abc" 不使用引号 varabc 区别&#xff1a;单引号&#xff0c;原样输出&#xff0c;不会解析里面的变量 双引号&#xff0c;会解析变量&#xff0c;并且可以使用子双引号&#xff0c;需要转…...

递归思路讲解

最近刷到了树这一模块的算法题&#xff0c;树相关的算法题几乎都是用递归来实现的&#xff0c;但递归的思路却有点抽象&#xff0c;每次遇到递归&#xff0c;都是通过递归来深度或广度地遍历树&#xff0c;但对于递归遍历树的遍历路线&#xff0c;却有点抽象难懂&#xff0c;不…...

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段&#xff1a; 构建阶段&#xff08;Build Stage&#xff09;&#xff1a…...

C++_核心编程_多态案例二-制作饮品

#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为&#xff1a;煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例&#xff0c;提供抽象制作饮品基类&#xff0c;提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...

以下是对华为 HarmonyOS NETX 5属性动画(ArkTS)文档的结构化整理,通过层级标题、表格和代码块提升可读性:

一、属性动画概述NETX 作用&#xff1a;实现组件通用属性的渐变过渡效果&#xff0c;提升用户体验。支持属性&#xff1a;width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项&#xff1a; 布局类属性&#xff08;如宽高&#xff09;变化时&#…...

3.3.1_1 检错编码(奇偶校验码)

从这节课开始&#xff0c;我们会探讨数据链路层的差错控制功能&#xff0c;差错控制功能的主要目标是要发现并且解决一个帧内部的位错误&#xff0c;我们需要使用特殊的编码技术去发现帧内部的位错误&#xff0c;当我们发现位错误之后&#xff0c;通常来说有两种解决方案。第一…...

ssc377d修改flash分区大小

1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列&#xff0c;以便知晓哪些列包含有价值的数据&#xff0c;…...

【无标题】路径问题的革命性重构:基于二维拓扑收缩色动力学模型的零点隧穿理论

路径问题的革命性重构&#xff1a;基于二维拓扑收缩色动力学模型的零点隧穿理论 一、传统路径模型的根本缺陷 在经典正方形路径问题中&#xff08;图1&#xff09;&#xff1a; mermaid graph LR A((A)) --- B((B)) B --- C((C)) C --- D((D)) D --- A A -.- C[无直接路径] B -…...

c# 局部函数 定义、功能与示例

C# 局部函数&#xff1a;定义、功能与示例 1. 定义与功能 局部函数&#xff08;Local Function&#xff09;是嵌套在另一个方法内部的私有方法&#xff0c;仅在包含它的方法内可见。 • 作用&#xff1a;封装仅用于当前方法的逻辑&#xff0c;避免污染类作用域&#xff0c;提升…...

云原生周刊:k0s 成为 CNCF 沙箱项目

开源项目推荐 HAMi HAMi&#xff08;原名 k8s‑vGPU‑scheduler&#xff09;是一款 CNCF Sandbox 级别的开源 K8s 中间件&#xff0c;通过虚拟化 GPU/NPU 等异构设备并支持内存、计算核心时间片隔离及共享调度&#xff0c;为容器提供统一接口&#xff0c;实现细粒度资源配额…...

C++实现分布式网络通信框架RPC(2)——rpc发布端

有了上篇文章的项目的基本知识的了解&#xff0c;现在我们就开始构建项目。 目录 一、构建工程目录 二、本地服务发布成RPC服务 2.1理解RPC发布 2.2实现 三、Mprpc框架的基础类设计 3.1框架的初始化类 MprpcApplication 代码实现 3.2读取配置文件类 MprpcConfig 代码实现…...