文章目录 一、打印 Android 中当前运行的 Activity 任务栈信息 二、Activity 任务栈信息分析 三、Activity 在相同 Stack 的不同 Task 情况 一、打印 Android...id ; 下图中 , 红色矩形框内容是 CSDN 博客页面内容 , 绿色矩形框内容是 CSDN 博客首页内容 ; 默认状态下 , 相同的应用 , 打开的 Activity , 其 Activity 都在同一个任务栈中...; 三、Activity 在相同 Stack 的不同 Task 情况 ---- 默认状态下 , 同一个应用启动的两个 Activity 都在相同 Stack 的相同 Task 中 , 但是如下情况会出现...Activity 在相同 Stack 的不同 Task 中 ; 参考 【Android 应用开发】Activity 任务亲和性 taskAffinity 设置 ( taskAffinity 属性 )...singleTask 启动模式 , 则新启动的 Activity 放在另一个 Task 中 ; 注意 : 两个 Activity 虽然在不同的 Task 任务中 , 但还是在相同的 Stack 栈中
处理交互式更新的过程是相同的，只是在连续循环中完成，理想情况下每秒可以处理 60 帧！不过，我们先来看一下浏览器如何显示简单的网页。...DOM 构建： 最后，由于 HTML 标记定义不同标记之间的关系（一些标记包含在其他标记内），创建的对象链接在一个树数据结构内，此结构也会捕获原始标记中定义的父项-子项关系：HTML 对象是 body...对象的父项，body 是 paragraph 对象的父项，依此类推。...要了解 CSS 处理所需的时间，您可以在 DevTools 中记录时间线并寻找“Recalculate Style”事件：与 DOM 解析不同，该时间线不显示单独的“Parse CSS”条目，而是在这一个事件下一同捕获解析和...某些节点通过 CSS 隐藏，因此在渲染树中也会被忽略，例如，上例中的 span 节点—不会出现在渲染树中，—因为有一个显式规则在该节点上设置了“display: none”属性。
03 grid-template-areas 该属性用于指定网格单元格应在整个父容器中按列和行进行承载的空间量。这个属性可以让我们直观地看到自己在做什么。 我们称之为布局的蓝图（模板）。...06 justify-items 此属性用于沿着X轴 [主轴] 在网格容器内定位网格项（子项）。...它的4个值表示情况如下： 07 align-items 此属性用于沿Y轴[Cross Axis]在网格容器内定位网格项（子项）。...03 grid-area 首先，我们需要设置 grid-template-areas☝️完成后，我们必须在子类中指定父类中使用的名称，如下所示： 在父容器内指定网格模板区域 在带有网格区域的子类中指定在父容器中使用的名称...04 Justify-self 该属性用于沿X轴 [主轴] 在网格容器内定位1个单独的网格项（子项）。
如果您导入不同类型的资源(例如，如果在js中导入一个css文件)， 它新建一个子包，并在父级中保留一个引用。...相反，它及其所有依赖项都被放置在一个单独的包(bundle)，例如一个css文件中。当使用css modules时，导出的类被放置在JavaScript包中。.../custom.scss' SCSS 文件中的依赖可以使用 @import 语句。...这甚至可以在第三方 node_modules 中工作：如果配置文件是作为包的一部分发布的，转换会自动打开，且仅适用于该模块。由于只处理需要转换的模块，因此可以快速打包。...Autoprefixer ， cssnext 和其他工具的目标浏览器可以在 .browserslistrc 文件中指定： > 1% last 2 versions CSS Modules 的启用方式稍有不同
这样的特性导致的结果是，一旦你在不同的地方定义了相同的css命名，那么它们的样式就会相互覆盖，最终导致的style错乱，从而影响整个网页布局。...我相信对于每一个前端开发者都遇到过这种css样式覆盖的情况，值得庆幸的是，这些问题前辈都已经给出了解决方案。 在Vue中我们通过Scoped与Module来解决。...scoped作用的阻止上层的css样式传递到下层，限制当前css作用域，使其只对当前组件生效。 知道了它的作用，下面我们在开深入看下它的实现。 ? ?...scoped的实现是借助了PostCSS实现的，一旦增加了scoped，他会将之前覆盖的样式转换成下面的样式 scss"> .content[data-v-67e6b31f]...module的用法也很简单，只要在style中增加module属性即可。不同之处是它在布局中的引用，都需要添加前缀$style。因为通过module作用的style都被保存到$style对象中。
往期css3文章 CSS3基础属性大全 CSS3动画属性 animation详解（看完就会） CSS3 transform 2D转换之移动 旋转 缩放（详细讲解看完就会） CSS3 Z—Index 详解...是因为flex布局会将行内元素转换成行内快元素，标签的大小由设置的宽高决定，而不是内容，元素之间的缝隙也消失了。 ...所以变成了第一个，此属性可以帮助我们不修改标签的位置来改变页面元素。...总结 常见父项属性 flex-direction：设置主轴的方向 justify-content：设置主轴上的子元素排列方式 flex-wrap：设置子元素是否换行 align-content：设置侧轴上的子元素的排列方式...子项目占的份数 align-self 控制子项自己在侧轴的排列方式 order 属性定义子项的排列顺序（前后顺序）
虽然能够正常使用，但是，对于各个配置项，并不是很清楚。这几天利用空余时间，理一下几个 loader 和 插件的使用。...loader 只是将 css 转换，并不会直接插入到文档中 因此后续还需要用的其它 loader，推荐用法： { test: /\..../css/index.scss”);’ 导入 index.scss 文件，发现 index.scss 中的 css 属性并没有经过 postcss 转换。...我们知道，对于 es6 新特性，不同浏览器支持情况是不一样的，我们使用 loader 的目的就是将 es6 转换为可被浏览器接受的 javascript 语法，似乎跟前面 css 的 postcss-loader...polyfill 和 runtime 两个模块功能几乎一样，但是实现方法不同 polyfill 会污染全局对象，但是使用简单，如果不是作为公共模块提供给其它应用，可以使用此配置。
3、 CSS 弹性盒子 在 CSS3 中的 CSS flexbox 出现之前，布局网页是一项艰巨的任务。开发人员需要数百行代码来设计一个简单的布局。 CSS flexbox 让我们的生活变得轻松。...第 2 步：应用于弹性项目的属性： 这些是用于 flex 容器的直接子级的属性。此外，flex 容器的直接子项会自动成为 flex 项。 有 6 个 flex-item 属性。...您还可以使用 SCSS 变量和 mixin 让您的生活更轻松一些。此外，SCSS mixin 让您可以重用 CSS 代码块。 如何定义和使用 CSS 变量？ 在全局范围内定义 CSS 变量。...此外，可以使用我们在全局范围中声明的相同语法在局部范围内覆盖全局变量。...通常用冒号 (2:3) 分隔的高度和宽度表示。在 2:3 的示例中，元素的宽度为 2 个单位，高度为 3 个单位。 在 CSS 中，它的宽度和高度由正斜杠 (2/3) 分隔。
接下来，widget 一个个确定 子项 的 位置（在 x 轴上确定水平位置，在 y 轴上确定垂直位置）。 最后，widget 将其自身大小告知父项（当然这个大小也要符合原始约束）。...父项：你的宽度必须在 90 到 300 像素之间，高度在 30 到 85 像素之间。 Widget：我想有 5 像素的 padding，所以我的子项最多有 290 像素的宽度和 75 像素的高度。...widget不知道，也无法确定自己在屏幕上的位置，因为它的位置是由父项决定的。 由于父项的大小和位置又取决于上一级父项，因此只有考虑整个树才能精确定义每个 widget 的大小和位置。...示例 1 Container(color: Colors.red) 屏幕是 Container 的父项。它强制红色的 Container 与屏幕大小完全相同。...Center 将 宽松 的约束传递给 Container 来做到这一点。最终，Center 的主要目的是将其从父项（屏幕）获得的严格约束转换为对其子项（Container）的宽松约束。
props可以实现父子组件通信,在vue3中我们可以通过defineProps获取父组件传递的数据。... 我是默认插槽填充的结构 具名插槽： 顾名思义，此插槽带有名字在组件内部留多个指定名字的插槽。.../scss', // 配置 vue 中 scss 样式格式化 'stylelint-config-recess-order', // 配置stylelint css属性书写顺序插件, '...不同阶段请求的状态(如接口地址等)不尽相同，若手动切换接口地址是相当繁琐且易出错的。于是环境变量配置的需求就应运而生，我们只需做简单的配置，把环境状态切换的工作交给代码。...，因此在index.scss引入reset.scss @import reset.scss 在入口文件引入 import '@/styles' 但是你会发现在src/styles/index.scss全局样式文件中没有办法使用变量
例如，你知道下面的 CSS 代码中的按钮是什么颜色吗?...:is(html) button { color: red; } :where(html) button { color: blue; } 在上面的例子中，虽然以 :where() 开头的块在以...:has() 一个相关但非常不同的伪类是:has()。:has() 允许选择包含匹配选择器(或选择器集)的子元素的父元素。...但是，CSS 似乎现在已经都能获取到我们曾经需要SCSS(或其他预处理器)才能获得的特性。...但我认为在某个时间点上，它们确实是处理任何重要CSS的强制要求，而现在情况不再如此了。 最后一个惊喜 我想说的是，CSS的未来仍然是光明的。CSS 工作组正积极致力于直接向CSS中添加嵌套选择器。
2.1.1 选择器嵌套 避免了重复输入父选择器，复杂的 CSS 结构更易于管理 2.1.2 父选择器 & 在嵌套 CSS 规则时，可以用 & 代表嵌套规则外层的父选择器。...被导入的文件将合并编译到同一个 CSS 文件中，另外，被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。...使用参数时建议加上默认值 2.6 SCSS @extend（继承）指令 在设计网页的时候通常遇到这样的情况：一个元素使用的样式与另一个元素完全相同，但又添加了额外的样式。...也就是说，如果 " / " 在 SassScript 中把两个数字分隔，编译后的 CSS 文件中也是同样的作用。...2.10.4 List 函数 List 函数操作 List，length() 返回列表长度，nth() 返回列表中的特定项，join() 将两个列表连接在一起，append() 在列表末尾添加一个值
，将数据源与视图进行绑定，从而实现源数据与用户呈现的一致性 从数据源到视图：插值、组件中的属性、dom 元素的 property 3、css 样式、css 类 从视图到数据源：事件 视图与数据源之间的双向绑定...通过在模板表达式中使用管道运算符（|）则可以完成相应的结果转换 4.3.1、模板表达式中的特殊运算符 angular 模板表达式是 javascript 的子集，相对于常见的 javascript 运算符...@Input 用来获取数据，@Output 用来向外发送数据 4.4.2、子组件获取父组件信息 在父组件中，添加对于子组件的引用，并将需要传递的数据 or 方法绑定到子组件上 传递数据直接将父组件中的属性值赋值给绑定在子组件上的属性就可以了...在组件中使用服务 在需要使用的组件中引入服务，然后在组件的构造函数中通过依赖注入的方式注入这个服务，就可以在组件中完成对于这个服务的使用 在父组件中对数据进行赋值，然后调用服务的方法改变数据信息...---- 装饰器是一种特殊类型的声明，它能够被附加到类声明，方法， 访问符，属性或参数上，就像是 C# 中的特性↩ 元数据是用来描述数据的数据项，例如这里的 selector 是为了描述 Component
例如，你知道下面的 CSS 代码中的按钮是什么颜色吗?...:is(html) button { color: red;}:where(html) button { color: blue;}在上面的例子中，虽然以 :where() 开头的块在以 :is()...:has()一个相关但非常不同的伪类是:has()。:has() 允许选择包含匹配选择器(或选择器集)的子元素的父元素。...但是，CSS 似乎现在已经都能获取到我们曾经需要SCSS(或其他预处理器)才能获得的特性。...但我认为在某个时间点上，它们确实是处理任何重要CSS的强制要求，而现在情况不再如此了。最后一个惊喜我想说的是，CSS的未来仍然是光明的。CSS 工作组正积极致力于直接向CSS中添加嵌套选择器。
: { // 下一代的 CSS 转换插件 browsers: [ // 兼容,不指定默认则是该插件默认范围,最近两个版本 '>1%', 'last 4 versions....我发现很无解, // vh vw 是相对视窗而不是父类的... // 所以退而求次..rem 的可控性比较强,可以同时考虑 PC 和移动端的转换 扯完这个,我们来扯点实际的 ---- 语法比较(...// & 都代表父类自身 // scss a { color:#333; .test{ color:#f00; } &:hover{ color...// scss $red:#f00; $grey:#ccc; a{ color:$red; background-color:$grey; } // cssnext // 在:root定义变量...同理,scss 可以完全模拟出 cssnext 的几个颜色函数的实现, 反过来 cssnext是内置直接可以用的(有好几个计算不同类型的颜色的函数),但是又不能处理太复杂的计算 比如根据条件判断这些,传入不同的变量再去运算
如何在Flexbox中对齐子项 Flexbox能非常直观地处理子项的水平对齐和垂直对齐。 你可以使用align-items对flex容器中的所有子项设置统一的对齐。...如果你想给个别元素设置不同的对齐方式，使用align-self。元素的对齐方式跟它所在父容器的flex-direction有关。如果它的值是row（意味着元素水平排列），对齐方式是指在垂直轴上。...例如，你让一些元素在容器中分别有不同的对齐方式，你需要： 设置每个元素的align-self属性为合适的值。...可以的值有center，flex-start，flex-end，stretch（默认值：子项被拉伸以适应它们的容器）和baseline（子项被放置在父容器的baseline上）。...使用flex属性，你能够对照flex容器中其他元素来控制弹性子项的大小。
这是第 133 篇不掺水的原创 本文首发于政采云前端团队博客：如何利用 SCSS 实现一键换肤 https://www.zoo.team/article/theme-scss 前言 在项目开发过程中...如果在开发过程中写死 CSS 样式的话在面对这样的需求的时候就会真·痛苦面具了。所以我们需要提前定义一整套 CSS 的环境变量体系，在开发过程中就使用这套体系，未雨绸缪才能立于不败之地。...但是由 SASS3 开始引入的 SCSS 语法完全兼容现有的 CSS 语法，能够在生成真正的 CSS 文件之前预处理一些逻辑，比如变量，循环，嵌套，混合，继承，导入等，使其在逻辑上能够拥有部分 JS 的特性...可自定义其他主题 vue.config.js 配置项处理 我们不想每次都引入 CSS 变量，可以在配置项中利用 CSS 插件自动注入全局变量样式。...如果 key 不存在 map 中，将返回 null 值。此函数包括两个参数： map：定义好的 map。key：需要遍历的 key。
嵌套(Nesting) 6.1 嵌套规则 (Nested Rules) Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器。...& (Referencing Parent Selectors: &) 在嵌套 CSS 规则时，有时也需要直接使用嵌套外层的父选择器，可以用 & 代表嵌套规则外层的父选择器。...=，此外，每种数据类型也有其各自支持的运算方式。 7.1 数值运算 Sass支持数字的加减乘除、取整等运算 (+, -, *, /, %)，如果必要会在不同单位间转换值。...这种选择器的优势在于：如果不调用则不会有任何多余的css文件，避免了以前在一些基础的文件中预定义了很多基础的样式，然后实际应用中不管是否使用了 @extend去继承相应的样式，都会解析出来所有的样式。...导入文件 Sass的导入( @import)Sass文件规则和CSS的有所不同，编译时会将 @import的scss文件合并进来只生成一个CSS文件。
在它们之间放置调用每个插件的管道（pipes ），并将转换的结果输出到下一个管道。 Globs Globs是引用文件的通配符模式。globs(glob 字符串)或glob的数组用作任务源中的输入。...npm install 此命令读取package.json文件并安装所需的所有依赖项。...运行以下命令并观察，/ scss文件夹中的所有SCSS文件都将编译到相应目录中的CSS中： gulp scss 请注意，在本示例中，我们指定了要运行的任务。...第一个表示包括在子文件夹在内所有文件夹中以“.scss”结尾的文件，第二个表示排除以“_”开头的文件。。这样我们可以使用SCSS的内置函数@import来连接_page.scss文件。...Browserify Browserify分析应用程序中的“require”调用并将其转换为捆绑的JavaScript文件。另外，还有一个可以转换成浏览器代码的npm软件包列表。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
