最近都在看小马哥的 Spring 视频教程，通过这个视频去系统梳理一下 Spring 的相关知识点，就在一个晚上，躺床上看着视频快睡着的时候，突然想到当我们在使用 SpringMVC 时，Spring...容器是如何与 Servlet 容器进行交互的？...虽然在我的博客上还有几年前写的一些 SpringMVC 相关源码分析，其中关于 Spring 容器如何与 Servlet 容器进行交互并没有交代清楚，于是趁着这个机会，再撸一次 SpringMVC 源码...因此，ContextLoaderListener 最主要的作用就是在 Tomcat 启动时，根据配置加载 Spring 容器。 ?...在将 Spring 容器初始化最后以一个元素的形式保存到 Servlet 容器之后，那么 SpringMVC 在初始化时，是如何拿到 Spring 容器的呢？
然而，这还不够，这不是一个可用的滚动容器。 滚动容器有什么问题 问题是，与滑动相比，它们并不能提供良好的体验。在触摸屏上滑动手势的主要好处是，我们可以用一根手指水平或垂直滚动。...Scroll Snap Type 根据CSS规范，scroll-snap-type 属性定义在滚动容器中的一个临时点（snap point）如何被严格的执行。...这意味着，滚动必须对齐到滚动容器的开始处。 在下图中，每次用户向右滚动时，浏览器都会将项目捕捉到容器的开头。...如果你使用的是手机或平板电脑，可以向右移动滚动条或使用触摸。应该能感受到每个项目是如何从其容器的开始抓取的。 演示地址：https://codepen.io/shadeed/pe......image.png 使用 Scroll-Snap-Stop 有时，我们可能需要一种方法来防止用户在滚动时意外跳过一些重要的项。如果用户滚动太快，就有可能跳过某些项。
然而，这还不够，这不是一个可用的滚动容器。 滚动容器有什么问题 问题是，与滑动相比，它们并不能提供良好的体验。在触摸屏上滑动手势的主要好处是，我们可以用一根手指水平或垂直滚动。...Scroll Snap Type 根据CSS规范，scroll-snap-type 属性定义在滚动容器中的一个临时点（snap point）如何被严格的执行。...这意味着，滚动必须对齐到滚动容器的开始处。 在下图中，每次用户向右滚动时，浏览器都会将项目捕捉到容器的开头。...如果你使用的是手机或平板电脑，可以向右移动滚动条或使用触摸。应该能感受到每个项目是如何从其容器的开始抓取的。 演示地址：https://codepen.io/shadeed/pe......使用 Scroll-Snap-Stop 有时，我们可能需要一种方法来防止用户在滚动时意外跳过一些重要的项。如果用户滚动太快，就有可能跳过某些项。
但是在响应式网页设计中，服务器向所有设备展现的HTML代码都是相同的，仅通过使用CSS用于改变设备上页面的呈现方式。...在缺少viewport meta标签时，移动浏览器将默认使用桌面端的网页样式，所以如果需要开发具有响应式网页时，需要添加viewport标签，以下是标准实现： <meta name="viewport"...适用于桌面设备的样式，我们利用与上一节中的示例类似的媒体查询将容器main元素设置为flex-wrap: nowrap，这样可以确保子元素不会换行，通过在媒体查询中设置div为flex-basis: 33%...（ 图2） Flexbox提供了一种很好的方式来实现多样化、流畅的布局。在某些情况下，我们在垂直空间可能没有这样的自由。我们可能需要把一个元素放在固定的高度内。...position: relative 容器元素上的子元素允许子元素利用相对于其的绝对位置。
在常规实现方式里也是在这个中间列里做文章，如何使中间列内容不被左右列遮挡。...节点声明display:flex后，生成的FFC容器里所有子节点的高度都相等，因为容器的align-items默认为stretch，所有子节点将占满整个容器的高度。每列声明flex:1自适应宽度。...在SPA里有遇过因为有滚动条或无滚动条而导致页面路由在跳转过程里发生向左或向右的抖动吗？这让强迫症患者很难受，此时可用calc()巧妙解决该问题。...由于行内元素在当前行排版产生溢出会自动将其余节点排版到下一行，因此还需声明white-space:nowrap使所有行内元素在一行内排版完毕。若产生滚动条，还需对容器的height做适当的微调。...在使用该技巧时必须基于flex布局。
视差滚动====视差滚动是一种效果，能够使不同层次的元素以不同的速度进行滚动，从而产生了视觉上的深度感和动态效果。...scroll背景相对于元素本身固定，而不是随着它的内容滚动（对元素边框是有效的）。对父元素css_demo设置overflow: scroll，当元素内容超出页面时滚动。...z>0 的三维元素比正常大，而 z<0 时则比正常小，大小程度由该属性的值决定。元素涉及 3d 变换时，perspective 可以让我们眼睛看到 3d 立体效果，有空间感。...transform-style 设置元素的子元素是位于 3D 空间中还是平面中。...通过设置transform-style和 perspective，使该容器的子元素处在3D空间中，然后设置 transform: translateZ使物体在滚动的时候在Y轴移动位移不同，产生视觉差。
:checked 单选框或复选框被选中 如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？...:after 在元素内部最前添加内容 :before 在元素内部最后添加内容 :nth-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n :...非IE浏览器下，容器不设高度且子元素浮动时，容器高度不能被内容撑开。 此时，内容会溢出到容器外面而影响布局。这种现象被称为浮动（溢出）。...可以参考面向对象的CSS 元素竖向的百分比设定是相对于容器的高度吗？ 元素竖向的百分比设定是相对于容器的宽度，而不是高度 全屏滚动的原理是什么？ 用到了CSS的那些属性？...时不能平滑滚动的问题怎么处理？
视差滚动 视差滚动是一种效果，能够使不同层次的元素以不同的速度进行滚动，从而产生了视觉上的深度感和动态效果。...scroll 背景相对于元素本身固定，而不是随着它的内容滚动（对元素边框是有效的）。 对父元素css_demo设置overflow: scroll，当元素内容超出页面时滚动。...z>0 的三维元素比正常大，而 z<0 时则比正常小，大小程度由该属性的值决定。元素涉及 3d 变换时，perspective可以让我们眼睛看到 3d 立体效果，有空间感。...transform-style 设置元素的子元素是位于 3D 空间中还是平面中。...通过设置transform-style和 perspective，使该容器的子元素处在3D空间中，然后设置transform: translateZ使物体在滚动的时候在Y轴移动位移不同，产生视觉差。
你可以在一段时间内使CSS属性发生变化，控制过渡的速度，并创建基于关键帧的动画效果。...justify-content: space-between;让我们的项目之间保持良好的间距。然后我们使用flex: 1;给项目添加了相同的宽度，填满了整个容器的空间。简洁而简单。...可以根据元素的可用空间来进行元素的改变，如下所示： 由于容器查询的存在，样式是动态的。改变视口的大小会根据每个元素的可用空间触发相应的变化。...语法与媒体查询有些相似，只是你只需定义在容器大小满足条件时所需的样式： 以下是实际应用的样子： /* Create a containment context */ .post { container-type...font-weight: bold; } } 滚动驱动的动画 仍处于实验阶段 根据滚动容器的滚动位置控制动画的播放。
问题学习法就是强调有意注意有关解决问题的信息，使学习有了明确的指向性，从而提高学习效率。...:nth-type-of(3n)去除子元素尾部margin .mg-item:nth-of-type(3n){ margin-right: 0; } 注：如果容器可以滚动，在IE和firefox...下会忽略padding-bottom的值，chrome则不会，此时可以通过margin-bottom实现滚动容器的底部留白 其本质区别在于：chrome是子元素超过父元素content box尺寸触发滚动条显示...，而IE和Firefox浏览器是超过padding box尺寸时触发滚动条显示 2.margin合并条件 块级元素，但不包含浮动和绝对定位元素 在默认文档流下只出现在垂直方向 margin合并的三种场景...:border box: 一个设置了overflow: hidden的元素同时设置了padding和border,则子元素超出容器宽高设置时,裁切的边界是border box内边缘而不是padding
属性来实现示例代码如下： .container { display: flex; } .right { flex: 1; /* flex: 1; 表示 flex-grow: 1; 即该项占所有剩余空间...实现CSS代码如下： .container { display: flex; } .right { flex: 1; /* flex: 1; 表示 flex-grow: 1; 即该项占所有剩余空间...绝对定位的方式 通过绝对定位的方式实现Sticky Footer布局的步骤如下： 设置最外层容器高度为100%； 让子元素元素相对于容器元素进行定位，并设置容器元素最小高度为100%； 在中间区域设置padding-bottom...Flex方案 实现步骤如下 开启 flex 布局 将子元素布局方向修改为垂直排列 设置最小高度为当前视口，使不管中间部分有多高，始终都可以保持在底部 设置中间部分容器高度为自适应 实现CSS代码如下：...使用calc函数实现 实现步骤如下： 通过 calc 函数计算出中间容器的高度。 中间出现滚动条的容器设置overflow: auto即出现滚动条的时候出现滚动条。
引言 视差滚动（Parallax Scrolling）是一种效果， 能够使不同层次的元素以不同的速度进行滚动， 从而产生了视觉上的深度感和动态效果。...transform-style 设置元素的子元素是位于 3D 空间中还是平面中。...通过设置transform-style和 perspective，使该容器的子元素处在3D空间中， 然后设置transform: translateZ使物体在滚动的时候在Y轴移动位移不同，产生视觉差。...它定义了 观察者（即浏览器窗口）与 3D 元素之间的距离，从而影响到元素的透视效果。 透视效果是指当元素在 3D 空间中移动时，根据其与观察者的距离，产生的远近感和大小变化。...在上图中，应该在屏幕底部的按钮被隐藏了。 更糟糕的是，当用户第一次使用手机访问网站时，地址栏会显示在页面顶部， 因此用户体验是很糟糕的。
在使用绝对定位时有两个注意点：第一个是如果网页宽高较大时（大于浏览器可视区宽高），并且元素最终相对于body定位了，实际上它只是相对浏览器首屏的宽高进行偏移，而不是整个网页的宽高。...，使子元素变成行内元素，可以实现块级元素的水平居中。...要想项目自动的调整自身的大小以适应弹性盒子中可用空间的变化，还需要依赖项目自身的一些属性。...*/ flex-grow:1; /*定义可以放大的比例，默认是0，表示不放大，1表示放大1倍，2表示放大2倍，以此类推。如果所有项目都设置成相同数字，那么容器的可用空间会被项目等分。...如果所有项目都设置成相同数字，那么容器的可用空间会被项目等分。*/ flex-basis:auto; /*定义项目占用主轴的长度，可以是width或height属性一样的值。
.mg-item:nth-of-type(3n){ margin-right: 0; } 复制代码 注：如果容器可以滚动，在IE和firefox下会忽略padding-bottom的值，chrome...则不会，此时可以通过margin-bottom实现滚动容器的底部留白 ?...其本质区别在于：chrome是子元素超过父元素content box尺寸触发滚动条显示，而IE和Firefox浏览器是超过padding box尺寸时触发滚动条显示 2.margin合并条件 块级元素，...margin合并,可用来清除浮动的影响....裁切界限:border box: 一个设置了overflow: hidden的元素同时设置了padding和border,则子元素超出容器宽高设置时,裁切的边界是border box内边缘而不是padding
flex布局是CSS3新增的一种布局方式，可以通过将一个元素的display属性值设置为flex从而使它成为一个flex容器，它的所有子元素都会成为它的项目。...可以使用justify-content来指定元素在主轴上的排列方式，使用align-items来指定元素在交叉轴上的排列方式。还可以使用flex-wrap来规定当一行排列不下时的换行方式。...对于容器中的项目，可以使用order属性来指定项目的排列顺序，还可以使用flex-grow来指定当排列空间有剩余的时候，项目的放大比例，还可以使用flex-shrink来指定当排列空间不足时，项目的缩小比例...fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义。...19、CSS属性overflow属性定义溢出元素内容区的内容会如何处理? 参数是scroll时候，必会出现滚动条。 参数是auto时候，子元素内容大于父元素时出现滚动条。
我想了想，好像然后就没有“然后”了，让一个div容器滚动就完事了。 然而，事非经过不知难，原理虽然简单没说头，但是细节操作还是有些上手成本的。 为了更好理解，我们拿实例说话。...我们可以利用绝对定位元素的拉伸特性，使内滚动容器高度自适应匹配。...窗体，不是元素，因此，上面滚动事件八辈子都不会执行。...但是，麻烦的事情是，如果弹框自身高度很高，却又没法滚动呢(浏览器可用高度700像素，弹框有900像素高)？...感谢你的阅读，本文由 腾讯ISUX 版权所有，转载时请注明出处，违者必究，谢谢你的合作。
本文主要是简单的介绍一下什么是视差滚动，实现方式以及如何在现有框架(vue/react)中使用视差滚动。 什么是视差滚动？ 视差效果， 最初是一个天文术语。...当我们看着繁星点点的天空时，较远的恒星运动较慢，而较近的恒星运动较快。当我们坐在车里看着窗外时，我们会有相同的感觉。远处的山脉似乎没有动，附近的稻田很快过去了。许多游戏使用视差效果来增加场景的三维度。...transform-style: preserve-3d和perspective: xpx，那么处于这个容器下的子元素就会处于 3D 空间中; 2、给子元素分别设置不同的transform: translateZ...()，这时不同子元素在 3D Z 轴方向距离屏幕的距离也就不一样; 3、滚动滚动条，由于子元素设置了不同的transform: translateZ()，那么他们滚动的上下距离translateY相对屏幕...总结下来就是: 父容器设置transform-style: preserve-3d和perspective: xpx，子元素设置不同的transform: translateZ() 看完了用 css 实现滚动视差的两种方式
6 如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？...该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。...BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。 计算BFC的高度时，浮动元素也会参与计算。...父级div定义zoom 21 上下margin重合的问题 在重合元素外包裹一层容器，并触发该容器生成一个BFC。...参数是scroll时候，必会出现滚动条。 参数是auto时候，子元素内容大于父元素时出现滚动条。 参数是visible时候，溢出的内容出现在父元素之外。 参数是hidden时候，溢出隐藏。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
