— CSS 权威指南：Eric Meyer、Estelle Weyl 这篇文章鼓励构造 UI 时使用更多纯 CSS 和更少的 JS。...熟悉所有的 CSS 是实现这个目标的一种方法 —— 另一种是实施最佳实践和尽可能的减少代码。 1、::first-line | 选择首行文本 这个伪元素选择器选择换行之前文本的首行。...通过 ::selection 伪元素选择器，我们可以将样式应用于高亮区域。...这个伪类选择器应用于根元素，多用于存储全局 CSS 自定义属性。 5、:empty | 仅当元素为空时触发 这个伪类选择器将选中没有任何子项的元素。该元素必须为空。...12、:checked | 选择一个选中的复选框 这个应用于已经被选中的复选框。
布局对比 1.1传统布局 兼容性好 布局繁琐 局限性，不能再移动端很好的布局 1.2 flex布局 操作方便，布局极其简单，移动端使用比较广泛 pc端浏览器支持情况比较差 IE11或更低版本不支持flex或仅支持部分...当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。...flex子项目占的份数 align-self控制子项自己在侧轴的排列方式 order属性定义子项的排列顺序（前后顺序） 4.1 flex 属性 flex 属性定义子项目分配剩余空间，用flex来表示占多少份数...user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> css.../normalize.css"> css/index.css"> 4.常用初始化样式 body { max-width: 540px;
虽然许多开发人员熟悉常用的CSS属性，但也有一些较为陌生的属性可能被忽视了。在本文中，我们将探讨10个你可能没有使用过的CSS属性。...1. gap gap 属性是一种方便的方式，用于指定网格或弹性盒子项之间的间距，而无需额外的边距或填充属性。...我们可以使用任何有效的CSS长度值或关键字 normal 来定义间隔。如果只指定一个值，则应用于行和列。...这是一个将模糊效果应用于元素背景的示例： .element { backdrop-filter: blur(10px); } 使用这个CSS，元素后面的背景将被模糊10像素，创造出一个视觉上吸引人的效果...应用于容器元素，该元素内的内容将从上到下垂直流动，并且字形将向右侧设置。
总第279篇 2018年 第71篇 前言 微前端由ThoughtWorks 2016年提出，将后端微服务的理念应用于浏览器端，即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。...由于这些系统之间存在大量的连通和交互诉求，因此我们希望能够按照用户和使用场景将这些系统汇总成一个或者几个综合的系统。...因此我们通过将HR系统整合为一个应用的方式，来解决以上问题。...“子项目”对外输出不需要入口HTML页面，只需要输出的资源文件即可，资源文件包括js、css、fonts和imgs等。...”的reducers，把“子项目”的数据流挂载了redux上 “子项目”的弹出窗全部挂载在一个全局的div上，并为这个div添加对应的项目作用域，配合“子项目”构建的CSS，确保弹出框样式正确 上述代码中还看到了
现代 CSS 布局使开发人员只需按几下键就可以编写十分有意义且强大的样式规则。上面的讨论和接下来的帖文研究了 10 种强大的 CSS 布局，它们实现了一些非凡的工作。 01....超级居中：place-items: center 对于第一个“单行”布局，让我们解决所有 CSS 领域中最大的谜团：居中。...向组件添加 display: grid 将为您提供一个单列网格，但是主区域的高度将仅与页脚下方的内容一样高。...，并将剩余空间 ( 1fr ) 应用于主区域，而auto调整大小的行将采用其子项的最小内容的大小，以便该内容大小增加，行本身将增长以进行调整。...grid-template-columns: repeat(12, 1fr); } .child-span-12 { grid-column: 1 / 13; } 现在您有一个 12 列的轨道网格，我们可以将子项放在网格上
在CSS 中使用wrapper可能有多种方式，这些方式中，有些会带来一些问题。 在本文中，将介绍 CSS中 的 wrapper 布局，它们如何工作，如何使用它们以及何时不使用它们。...wrapper元素可以防止子项超出其边界。 考虑下图： ? 我们这里有aside和main元素，它们被放在了wrapper 元素中。当然，.wrapper元素有一个宽度。....wrapper { width: 1170px; max-width: 100%; } 我们还可以更简单点，仅使用 max-width。...当然，我们可以直接在标签内对 --wrapper-width 进行赋值，这样就能动态设置我们想要的值。...现在，当将display:flex应用于.site-header元素时，.wrapper的后代项将成为.site-header的子项。 ?
中那样对框模型进行细分我还可以直接编辑它的属性，Firefox 会为我提供影响框模型的所有属性的细目分类。...，允许你在 UI 中的任何位置创建灵活的列或行，当元素具有显示 flex 时，它还具有 x 和 y 轴，你可以在其上对齐其子项。...Grid 允许你考虑大图布局，当你将元素设置为显示网格时，它对开发人员更加友好，你可以将其子项定义为一堆列和行。 ? 列的宽度可以用网格模板列属性定义，我们在这里有三个值： ?...现在你永远不必担心在你的 HTML 中给东西编号，在构建一个复杂的下拉菜单时，你可能会假设一些 JavaScript 涉及到管理菜单的打开和关闭状态，但是你可能会惊讶于仅使用简单的 CSS 就能做到多远...现在，你很可能熟悉，当你进入表单输入或单击按钮时应用于元素的焦点伪类。 ? 问题在于构建下拉菜单时，你可能会使用焦点打开菜单，但是当你单击该菜单内的某些内容时，它会失去焦点并关闭。
在一个包装器上添加 display: flex，让子项挨着排序。 问题是，当空间不足时，那些子项默认不会被包裹成一个新的行。我们需要用 flex-wrap: wrap 来改变这一行为。...对此有不同的解决方案： margin flexbox gap（谨慎使用） padding（可应用于每个子元素的父元素） 增加空的元素，作为间隔。 为了简单起见，我使用 gap。...CSS网格中的最小内容尺寸 与flexbox类似，CSS grid对其子项目有一个默认的最小内容尺寸，即auto。这意味着，如果有一个元素比网格项大，它将溢出。...为了解决这个问题，我们有三种不同的解决方： 使用 minmax() 将 min-width 应用于网格项目 在网络中添加 overflow: hidden 作为一种防御性的CSS机制，我会选择第一种，即使用...当使用minmax()函数时，auto-fit关键字将扩展网格项目以填补可用空间。而auto-fill将保留可用的空间，而不改变网格项的宽度。
例如，我们可以传递一个 getTemplate 函数，将图片的相对路径转为绝对路径，它会在处理模板时使用： start({ getTemplate(tpl,...rest) { // 为了直接看到效果...另一种可能的方案是使用CSS模块（CSS Modules）。CSS模块是一种将CSS类名局部化的方式，可以避免全局样式冲突。...使用 hash 来区分子项目：这种方式可以通过自定义 activeRule 来实现，但需要对子项目进行一定的修改，将子项目的路由加上前缀。...在项目间共享组件时，可以考虑以下几种方式： 父子项目间的组件共享：主项目加载时，将组件挂载到全局对象（如window）上，在子项目中直接注册使用该组件。...方案二是通过主项目将依赖通过props传递给子项目，子项目在独立运行时使用传递过来的依赖，避免与主项目的全局变量冲突。
另一种可能的方案是使用CSS模块（CSS Modules）。CSS模块是一种将CSS类名局部化的方式，可以避免全局样式冲突。...在项目间共享组件时，可以考虑以下几种方式： 父子项目间的组件共享：主项目加载时，将组件挂载到全局对象（如window）上，在子项目中直接注册使用该组件。...使用 CSS 变量定义样式 将组件的样式使用 CSS 变量定义,这样可以通过改变 CSS 变量的值来修改样式。...babel-plugin-import Babel 插件: 使用如 babel-plugin-import 的 Babel 插件可以在编译时将导入整个库的语句转换为仅导入使用的组件。...将CSS打包进JS:通过构建工具,将CSS文件内容注入到JS中。 优点: 使用简单,只需要引入JS即可。 天然支持按需加载。 缺点: 需要额外的runtime,可能影响性能。 难以利用浏览器缓存。
瀑布流页面布局，故名思义就是页面上的元素子项像瀑布一样进行上下紧凑布局，一般图片类网站、电商类或者博客类的网站经常会使用这种布局，使得展示的元素比较紧凑和丰富， 类似下图这里总结一下瀑布流布局主要有以下特征...：瀑布流布局的子项可以具有不同的高度，与标准网格相比，瀑布流布局看起来更自然。...当只有一个值时，该值将同时应用于行和列之间的间距。上例中，行和列之间的间距均为 20px。当gap属性存在两个值时，第一个值表示行之间的间距（即 row-gap）。...grid-row: span 15;：这个网格项将跨越 15 行。由于每行高度为 10px，总高度将为 150px。...grid-row: span 20;：这个网格项将跨越 20 行，总高度将为 200px。grid-row: span 30;：这个网格项将跨越 30 行，总高度将为 300px。
注册到全局上 js.unshift(...self.files); } ); }); 3.主项目的 html 要访问子项目里的编译后的 js / css 等资源，需要进行代理转发...，直白来说子项目的入口文件 main.js 就是将主项目和子项目联系起来的桥梁。...，则无需重复加载，直接跳转即可 if (!...main.js 仅需要将子项目的 routes 暴露给主项目即可，代码如下： import routes from '....这里有个 trick 上文忘记提及，就是子项目打包后的入口文件并没有加上 chunkhash，直接就是 main.js（子项目其他的 js 都有 chunkhash）。
在本教程中，重点将放在 SVG 的过滤器上 —— 但不只是将它们应用于 SVG 图像，我将向你展示如何将它们应用于任何常规页面的内容上。...实际上我们是通过告诉 CSS 过滤器所拥有的 ID，然后再把过滤器应用于 SVG 的方式来实现。使用同样的方法，过滤器也可以用于常规文本。...创建动画 回到 page.css 文件并添加关键帧，如下所示。这将会把字体大小从零垂直宽度扩展到 5.5 垂直宽度。把它应用于标题后，文本会在屏幕上放大并被放置到位。...代码也可以添加到其它文件中，但是为了将所有导航 CSS 放在同一个地方，我们还是把下面的代码写到 design.css 中。...然后创建每个菜单项的悬停元素，以便当用户将鼠标悬停在上面时进行更改。当菜单项返回其原始位置时，菜单的每个子项都会有 0.4 秒的变换时间。
接着，我们来看看如何使用CSS scroll snap。 CSS Scroll Snap 简介 要在容器上使用scroll snap，它的子项目应该内联显示，这可以用我上面解释的方法之一来实现。...然后，我们需要向子项（即.section__item）添加scrolln-snap-align。...参见下图： image.png 滚动容器的 start 子项目将吸附到其水平滚动容器的开始处。 image.png 滚动容器的 center 子项目将吸附到其滚动容器的中心。...image.png 滚动容器的 end 子项将对齐到其滚动容器的末尾。...请注意，当用户再次向右滚动时，.item-3会捕捉到滚动容器的开头，这意味着仅具有边距的元素将受到影响。
接着，我们来看看如何使用CSS scroll snap。 CSS Scroll Snap 简介 要在容器上使用scroll snap，它的子项目应该内联显示，这可以用我上面解释的方法之一来实现。...然后，我们需要向子项（即.section__item）添加scrolln-snap-align。...参见下图： 滚动容器的 start 子项目将吸附到其水平滚动容器的开始处。 滚动容器的 center 子项目将吸附到其滚动容器的中心。 滚动容器的 end 子项将对齐到其滚动容器的末尾。...请注意，当用户再次向右滚动时，.item-3会捕捉到滚动容器的开头，这意味着仅具有边距的元素将受到影响。...头像列表 对于此用例，我感兴趣的是将center作为scroll-snap-align的值。
背景： 在做移动端项目时，遇到了一个问题，css设置商品的高度是自动的，但是左边的商品的高度，莫名就变高了，有很大的一块空白，如下图。 但当左右两数据相同时，高度显示又是正常的。...原因： 最后，找到问题所在，原来是flex布局，会让其子项的高度一致 。所以，才会出现上面的情况。 Flex 布局会默认： 把所有子项变成水平排列。 默认不自动换行。...让子项与其内容等宽，并把所有子项的高度变为最高子项的高度。...问题： Flex布局如何让子项保持自身高度 解决方案： 直接在 flex 容器上，将 align-items 设为 flex-start ,或者 align-items 属性的其他值都可以, 子项就会保持其自身的高度了
今天，我们在全球拥有 130 多万用户 *，我们看到 Vue 被应用于各种不同的场景，从在传统的服务器渲染的页面上添加交互性，到拥有数百个组件的完整的单页应用。Vue 3 将这种灵活性进一步提升。...我们为单文件组件 (SFC，即 .vue 文件) 提出了两个新特性： ：在 SFC 中使用 Composition API 的语法糖 ：单文件组件中状态驱动 CSS...变量 这些功能已在 Vue 3.0 中实现并可用，但仅出于收集反馈的目的而提供。...尽管某些框架子项目可能仍需要进一步的工作才能达到稳定状态 (特别是 devtools 中的路由器和 Vuex 集成)，但我们认为今天使用 Vue 3 启动新的绿色项目是合适的。...请查阅 Vue 3 工具库指南以获取有关所有框架子项目的详细信息。
例子：旅游博客 travel_blog.mp4 在此示例中，我们将旅行博客的基线设置在右侧，并将content-visibility：auto应用于左侧的分块区域。...但是，当处理完全不在屏幕上的内容使，浏览器将跳过渲染工作，仅样式化和布局元素框本身。 加载页面的性能好像它只包含完整的屏幕上的内容以及每个非屏幕上的内容的空白框。...首先，我们将内容分成几部分： ?...这意味着它好像有一个“内在大小”尺寸的子项一样进行布局，从而确保未调整大小的div仍然占据空间。contains-intrinsic-size用作占位符大小，而不是呈现的内容。...结论： content-visibility和CSS Containment Spec意味着您的CSS文件将获得一些令人兴奋的性能提升。
它是所有网格项的「直接父元素」。...项目 项目是网格容器的子元素（即「直接后代」）。...子项甚至可以跨越多行/列。 grid-row[11]和grid-column[12]属性允许我们指定网格子项应该占据哪些轨道。 如果我们希望子项占据单个行或列，我们可以通过其编号来指定。...grid-column: 3将使子项位于第三列。 网格子项还可以跨越多个行/列。...当我们将子项分配到网格时，我们使用这些线来锚定它们。如果我们希望子项跨越前3列，它需要从第1行开始，并在第4行结束。 负数行号 在从左到右的语言中，比如英语，我们从左到右计算列。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
