5 种场景分别是： 瀑布流 特点 纵向+高度排序 纯 CSS 多列实现，是最简单的瀑布流写法 纵向+高度排序+根据宽度自适应列数 通过 JS 根据屏幕宽度计算列数，在 web 端更加灵活的展示瀑布流 横向...实现思路 瀑布流实现思路如下： 通过 CSS column-count 分割内容为指定列； 通过 CSS break-inside 保证每个子元素渲染完再换行； 3....实现代码 .css-column { column-count: 4; //分为4列 } .css-column div { break-inside: avoid; // 保证每个子元素渲染完在换行...— 在纵向+高度排序的基础上，按照宽度自适应列数。...引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
.* 仅专业版 fal Font Awesome细体 light.js fa-light-300.* 仅专业版 fad Font Awesome双色 duotone.js fa-duotone-300....* 仅专业版 注意：fa前缀最新版本中已弃用。...列表中的图标 使用fa-ul和fa-li替换无序列表中的默认项目符号。...强化变形(Power Transform) 借助Font Awesome 5中SVG的强大功能，现在可以使用data-fa-transform元素属性任意缩放、定位、翻转和旋转图标。...Inner icons 在fa-layers元素内添加任意数量的图标 fa-layers-text 在fa-layers元素内添加以将文本放在图标顶部 fa-layers-counter 在图标右上方添加一个计数器
如果你在日常工作中使用CSS，那么你的主要目标很可能集中在使事情看起来是正确的。最终得到的正确结果远比如何实现更重要。这意味着相比正确的语法和视觉效果我们更少关注CSS的实现原理。...这些计算好的值会像存储在DOM树中的元素一样被存储在一个树中，毫无疑问会被称为CSS对象模型（CSS Object Model ）或CSSOM。 现在就可以开始渲染页面的过程了。...通常的样式是在页面中添加了一个引用css文件的link 标签，或者在HTML主体中使用 style 标签。即使最基本的页面也有由浏览器提供的默认样式。...堆叠底部的图层首先绘制，堆叠上方的元素出现在顶部（相对于底部来说是在上层）。 在一个绝对或相对定位的元素上设置z-index 是建立新的堆叠上下文的最常见方式。...关于堆叠最令人困惑的部分之一是可以在现有堆叠环境中建立新的堆叠上下文。 这意味着您可以拥有多层图层。 在这种情况下，并不总是拥有最高的z-index值显示在堆叠越高的位置。 就是这样!
在CSS入门系列文章 CSS入门11-定位与覆盖中我们对不同元素生成的盒的重叠情况作了比较与分析，讲到了z-index属性，这一节我们引入两个新的关键词，堆叠级别stack level和堆叠上下文stack...这也是我对一些名词经常会直接使用英文的原因，避免歧义。 2. 堆叠上下文 stack context 和堆叠级别 stack level 在CSS 2.2中，每个盒都有三个维度的位置。...根据文档树的顺序，在堆叠环境中具有相同堆叠级别的盒按照先后顺序堆叠。 根元素形成根堆叠上下文。其他堆叠上下文由具有非'auto'的'z-index'计算值的任何定位元素（包括相对定位元素）生成。...堆叠上下文不一定与包含块有关。在未来CSS级别中，其他属性可能会引入堆叠上下文，例如“ 不透明度opacity ” [CSS3COLOR]。 3. z-index属性 ?...在每个堆叠上下文中，绘制堆栈级别为0（在层6中），未定位的浮动（第4层），行内块（第5层）和行内表（第5层）中的定位元素，就好像这些元素本身产生了新的堆叠上下文，除了它们的定位后代和任何可能的子堆叠上下文也参与当前的堆叠上下文
仅使用CSS，您就可以通过边框创建一个三角形。 这是一个相当老的技巧。理想情况下，你会在一个宽度和高度都为零的元素上设置边框。所有的边框颜色都是透明的，除了那个将形成箭头的边框。...创建堆叠上下文的一种方法是使用 isolation: isolate CSS样式声明。 我们可以利用这种堆叠上下文技术来创建悬停效果，该效果可以交换按钮的背景。...然而，另一种不太受欢迎的在x轴上居中元素的方法是使用 text-align CSS属性。这个属性在居中文本时就能直接使用。要想在DOM中也居中其他元素，子元素需要有一个 inline 的显示。..."; } 12.表单验证视觉提示 仅使用CSS，您就可以向用户显示有关表单输入有效性的视觉提示。...我们可以在表单元素上使用 :valid 和 :invalid CSS伪类，当其内容验证成功或失败时，应用适当的样式。 请考虑以下HTML页面结构： <!
最后自己找到原因了，但是还是有小伙伴遇到同样的类似问题,今天一起探讨一下css堆叠上下文的问题 正文开始... fixed失效了 我们直接用具体案例来体会css堆叠上下文，因为官方veurpess-reco1...z-index越小，排得越下面 transform产生堆叠上下文 我们发现浮动+margin，position能产生上下文，除了这两个，新增的css3最新特性中还有transform也可以产生堆叠上下文...：transform、filter会产生堆叠上下文 同一个元素同时使用poistion与transform哪个优先级更高权重更大，首先是会执行定位，然后再执行transform,因此定位的优先级更高，先执行...，文章很多思考来自深入理解CSS中的层叠上下文和层叠顺序这篇文章 本文示例源码code example[3] 参考资料 [1]issue： https://github.com/vuepress-reco.../vuepress-theme-reco/issues/95 [2]深入理解CSS中的层叠上下文和层叠顺序： https://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index
正文 什么是 CSS 容器查询 简单来说: 容器查询允许开发者根据容器元素的大小来设置元素的样式。 它类似于 @media查询，不同之处在于它根据容器的大小而不是视口的大小进行判断。...这可能并不总是与视口的大小有关，而是与组件在布局中的放置位置有关。 例如，以下组件可能显示在网站布局的窄或宽列中。 如果有空间，它将显示为两列，否则，我们希望将其堆叠显示。...目前而言， 我们可以通过以某种方式识别该组件，比如通过添加一个类或使用其他选择器来定位元素，该选择器可以查看它在文档结构中的位置。 但是，这并不能完全实现媒体查询在整个布局中的作用。...媒体查询使我们能够根据视口的范围来改变元素的大小。 当我们添加一个类或目标元素时，我们决定当对象在侧边栏中时，它必须使用堆叠布局。...当我们使用媒体查询时，大多数时候我们都会指定可用的宽度（或内联大小）。 我们将列定义为: 该维度中,空间的百分比或分数。 因此，容器查询仅允许通过在一维中指示大小来扩展包含属性，这被描述为单轴遏制。
一、没有使用z-index时元素如何堆叠？ 首先，我们先了解下默认情况下，元素的堆叠，即在没有使用z-index时，元素是如何堆叠的。...demo5: https://codepen.io/verymuch/pen/PVoOoX/ 三、使用z-index自定义堆叠顺序 以上是CSS中对于各类元素的默认排序，那我们能否自定义排序呢？...DIV#3 DIV#8 其中DIV#4, DIV#5, DIV#6是DIV#2的子元素，可见其堆叠顺序被限制在DIV#2中，z-index的值只在DIV#2内部有效，然后DIV#2又作为一个整体与DIV...总结 以上，笔者从元素的默认堆叠顺序，讲到了堆叠上下文的生成。对上述内容了解之后，就能够很好地应对开发中所遇到的层级问题了。不过还是建议大家在开发前，提前规划好z-index的使用。...参考文献 深入理解CSS中的层叠上下文和层叠顺序2.Understanding CSS z-index
大家都知道，position:fixed 在日常的页面布局中非常常用，在许多布局中起到了关键的作用。...堆叠上下文（Stacking Context）：堆叠上下文是 HTML 元素的三维概念，这些 HTML 元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的 z 轴上延伸，HTML 元素依据其自身属性按照优先级顺序占用层叠上下文的空间...属性被设置为 "isolate"的元素， position: fixed 在 will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值 -webkit-overflow-scrolling...或者是在 position: fixed 中使用了 input 也会存在一些问题，这个有很多文章都描述过并且存在很多解决方案，本文不讨论这块问题。...这方面的问题，可以看看这篇文章：移动端web页面使用position:fixed问题总结 最后 系列 CSS 文章汇总在我的 Github ，持续更新，欢迎点个 star 订阅收藏。
但“z 轴”顺序，不完全由 z-index 决定，在层叠比较复杂的 HTML 元素上使用 z-index 时，结果可能让人觉得困惑，甚至不可思议。这是由复杂的元素排布规则导致的。 ? 2.1....当没有元素包含z-index属性时，元素按照如下顺序堆叠（从底到顶顺序）： 根元素（）的背景和边界； 位于普通流中的后代“无定位块级元素”，按它们在HTML中的出现顺序堆叠； 后代中的...“定位元素”，按它们在HTML中的出现顺序堆叠； 注意：普通流中的“无定位块级元素”始终先于“定位元素”渲染，并出现在“定位元素”下层，即便它们在HTML结构中出现的位置晚于定位元素也是如此。...浮动块元素被放置于非定位块元素与定位块元素之间： 根元素（）的背景和边界； 位于普通流中的后代“无定位块级元素”，按它们在HTML中的出现顺序堆叠； 浮动块元素；<<<< 位于普通流中的后代...“无定位行内元素”； 后代中的“定位元素”，按它们在HTML中的出现顺序堆叠； ?
除外）的子元素（包括 display:table 和 display:inline ） 拥有 z-index:0 的子堆叠上下文元素 拥有正 z-index: 的子堆叠上下文元素（正的越低越堆叠层级越低...堆叠上下文是HTML元素的三维概念，这些HTML元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的 z 轴上延伸，HTML 元素依据其自身属性按照优先级顺序占用层叠上下文的空间。...那么，如何触发一个元素形成 堆叠上下文 ？..."isolate"的元素， position: fixed 在 will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值 -webkit-overflow-scrolling...在层叠上下文中，其子元素同样也按照上面解释的规则进行层叠。 特别值得一提的是，其子元素的 z-index 值只在父级层叠上下文中有意义。
需要在标题之后和任何导航元素之前放置。 material-navigation 导航元素将显示在头部的左侧。 仅使用锚标签，material-button内置自己的样式。...对于抽屉外部的主要内容，将其包装在material-content元件中或具有material-content样式类的元素中。 固定性抽屉 固定性抽屉是不能关闭的抽屉。 它们完全由CSS提供。...这是使用标准material-list组件和一些特殊的CSS类来完成的。 顶级抽屉内容应该是具有可选组元素的MaterialListComponent，这些元素由元素上的group属性指定。...将MaterialListItemComponents用于抽屉中的条目。对于每个组，如果您需要组上的标签，请在组元素内直接使用块元素上的label属性。...当可堆叠抽屉打开时，任何现有的可堆叠抽屉将被展开以填充背景中的屏幕。 适用于延期内容。 Inputs: visible bool 抽屉的可见性。
表的border box、块级可替换元素或者在标准流中创建了新的BFC的元素（比如 overflow 值非 visibile 的元素），它们不能与其同属一个BFC中的浮动元素的margin box重叠。...浮动的内容会像浮动创建了新的堆叠上下文 Stacking Context 一样堆叠起来，但定位元素、创建了新的堆叠上下文并参与了浮动的父级堆叠上下文的元素除外。...它可以被任何元素设置，但仅适用于生成非绝对定位盒的元素。该属性值具有如下含义： left 该元素生成一个浮动到左侧的块盒。...但是在CSS2.2中，如果，在BFC中，有一个文档流内负垂直高度的外边距，使得浮动的位置高于它原本应当在的位置，所有这种负外边距被设为零，浮动的位置则未定义。...注意：CSS1中该属性适用于所有元素，因此所有元素都能实现效果。在CSS2和CSS2.2中， clear 属性仅支持块级元素。因此开发者们应当只将此属性应用于块级元素。
当不包含z-index属性和position属性时，规则很简单，所有元素的叠放顺序与其所在HTML文档中出现的先后顺序一致。（当然使用负margin来重叠内联元素的特例除外。）...当元素浮动float时，浮动块元素被放置于非定位块元素与定位块元素之间，具体的讲，浮动元素显示在普通流中的后代块元素之上，常规流中的后代行内元素之下。...1) z-index只在设置了position属性的元素上有效，没有position属性的元素上的z-index属性均不生效。 2) index值会产生堆叠上下文，堆叠上下文将在下一章中详细介绍。...每个堆叠上下文有一个单一的根元素，当元素上形成一个新的堆叠上下文时，堆叠上下文中的所有子元素按照堆叠顺序被局限在一个固定的区域内。...一些新的css属性，如 filters, css-regions, paged media等需要离屏渲染的属性，均能使元素形成堆叠上下文。
这篇我们来讲讲CSS定位。 一、Position(定位) CSS定位属性允许你为一个元素定位。它也可以将一个元素放在另一个元素后面，并指定一个元素的内容太大时，应该发生什么。...元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。 二、属性 1....三、重叠的元素 元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素 z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面） 一个元素可以有正数或负数的堆叠顺序： img{...具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。 注意： 如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面。...四、总结 本文基于Html基础，主要介绍了CSS中四种定位的方式。对于四种的定位表现形式，用丰富的案例 ，代码效果图的展示，帮助大家更好理解 。 最后，希望可以帮助大家更好的学习CSS3。
2.1 行距Leading和半行距half-leading CSS假定每种字体都有字体指标，用于指定基线以上的特征高度和指定其下的深度。在本节中，我们使用A来表示高度（给定尺寸的给定字体）和D深度。...注：推荐OpenType和TrueType字体（在转换到当前元素的字号后）的A和D使用该字体OS/2表格中的“sTypeAscender”和“sTypeDescender”特性。...字体在基线之上的高度和和基线之下的深度被假定为包含在字体内的特性。（更多细节，参见CSS3。） 在一个非替换行内元素上，line-height 指定一个高度用于计算行盒的高度。...同一行内格式化上下文中的行盒在高度上通常是变动的（比如，一行可能包含图片但其他行仅包含文本）。...中的IFC css中的bfc和ifc [译]:BFC与IFC 浅析css中的BFC、IFC、GFC和FFC css IFC 与 BFC分析
HTML负责定义页面的结构和内容，而CSS用于控制页面的样式和布局。在本篇博客中，我们将详细探讨如何将HTML和CSS结合使用，以创建精美的Web页面。 1....内联样式 在HTML中，可以使用内联样式（inline style）来为单个元素定义样式，这样的样式规则仅适用于特定的元素。...首先，在CSS中定义一个类： .my-class { font-size: 18px; font-weight: bold; } 然后，在HTML中使用该类： 这两个元素都应用了.my-class类定义的样式规则。 5. ID 选择器 ID选择器用于选择页面中的唯一元素。与类不同，每个ID在文档中只能出现一次。...这些属性可以帮助你调整元素之间的间距以及元素内部的空白。 z-index属性：用于控制元素的堆叠顺序。当多个元素重叠时，z-index值较大的元素将显示在较小的元素上方。 8.
今天主要想在这篇学习笔记中写的也不多，主要是针对:before和:after写一些内容，还有几个小样式略微带过的介绍下。 什么是:before和:after？ 该如何使用他们？...:before是css中的一种伪元素，可用于在某个元素之前插入某些内容。 :after是css中的一种伪元素，可用于在某个元素之后插入某些内容。...50px，transparent表示边框颜色是透明的，solid表示边框是实线的*/ border-top-color: black; /*这里我们仅将上边框的颜色设置为黑色，众所周知，css...比如我们的需求是做一个半透明的登录框吧(这里也是在代码中通过注释来解释)： body{ background: url(img/1.jpg) no-repeat...z-index的数值越大，该元素的堆叠层级越高。
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 注释：z-index 仅能在定位元素上奏效！ 可能到值： auto——默认。堆叠顺序与父元素相等。...number——设置元素的堆叠顺序。 inherit——规定应该从父元素继承 z-index 属性的值。 9、CSS3有哪些新特性？...起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before ::after。 27、你对line-height是如何理解的？...这种效果可以在鼠标单击，获得焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。...）；skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）；skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
