属性指定了弹性子元素在父容器中的位置。...justify-content 属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。...flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。 center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。...space-between -各行在弹性盒容器中平均分布。 space-around - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。...center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
正文内容 一、认识CSS中的3D特性 CSS3引入了强大的3D变换功能，允许开发者对页面元素实现三维空间内的复杂布局和动画效果。...rotate3d(x, y, z, angle)：指定一个旋转轴向量和角度来旋转元素。 scale3d(x, y, z)：按比例缩放元素在三个维度上的尺寸。...Perspective 属性： perspective：设置在父容器上，为子元素提供透视效果，模拟真实世界中近大远小的立体视觉。 perspective-origin：定义透视视角的位置。...Transform-style 属性： transform-style: preserve-3d：应用于父级元素，使得其内部子元素能够在各自的三维空间中应用3D变换。...div>作为轮播图的容器，并在其内部放置五个.carousel-item类别的元素，分别代表轮播图的不同图片项。
元素宽度在不设置的情况，它的本身父容器是100%。...解决高度塌陷 父元素在文档流中会默认被子元素撑开 如果此时给子元素添加浮动效果 子元素就会脱离文档流 从而造成父元素的高度塌陷 此时页面便会混乱 如果给父元素设置高宽便会使父元素锁死 不能随子元素变化随意撑开...y轴旋转 rotateZ:表示元素沿着z轴旋转 transform-style: 用来设置嵌套的子元素在3D空间中显示效果。...层级选择器： 匹配所有后代元素 匹配直接子元素 匹配所有在该元素后的next元素 匹配该元素的所有同辈元素 位置选择器： :first匹配第一个元素 :last获取最后一个元素 :not去除所有与给定选择器匹配的元素...:even匹配所有索引值为偶数的元素 :odd 匹配所有索引值为奇数的元素 :eq匹配一个给定索引值的元素 :gt匹配所有大于给定索引值的元素 :lt匹配所有小于给定索引值的元素 后代选择器，子代选择器
CSS技巧大杂烩 01 Safari 中z-index的层级问题 在Safari浏览器下(此Safari浏览器包括iOS的Safari，iPhone上的微信浏览器，以及Mac OS X系统的Safari...浏览器)，当我们使用3D transform变换的时候，如果祖先元素没有overflow:hidden/scroll/auto等限制，则会直接忽略自身和其他元素的z-index层叠顺序设置，而直接使用真实世界的...例如下面的场景，图中红框里面的模块，使用 3D transform变换，进行旋转动画，但是在Safari浏览器下，忽略了二维码遮罩层的z-index,结果使用了真实世界的3D视角进行渲染。...因此，可以给容器添加一个伪元素的子元素用于撑起内容，该子元素拥有一个padding-top:100%，同时给容器一个max-height尝试限制容器的高度，最后内容用绝对定位的方式添加即可。...，需要通过构建BFC来保证容器不会受到影响，因此这里可以给容器一个overflow:hidden来保证伪元素的margin不会塌陷。
有利于搜索引擎优化（SEO），搜索引擎爬虫会根据不同的标签来赋予不同的权重 HTML5新特性有哪些 语义化标签 音视频处理API(audio,video) canvas / webGL 拖拽释放(Drag...比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。...没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声 明）。 inherit: 规定应该从父元素继承 position 属性的值。...box重叠 BFC是一个独立容器，容器里面的子元素不会影响到外面的元素 计算BFC的高度时，浮动元素也参与计算高度 元素的类型和display属性，决定了这个Box的类型。...less来解决这个问题) viewport适配的原理 viewport适配方案中，每一个元素在不同设备上占据的css像素的个数是一样的。
在 opacity 或者 transform 上做动画的元素 6. CSS filter 7. 子元素有自己的层的，父级元素也会有复合层 8. ...撒彩带 z-index 在动画性能里的影响很大，所以先来个侧视图吧： 当前等级结构在等级标志中，彩带在文案弹窗中；图中灰色和黑色部分都是没有动画的，彩色的标识是有动画的 03.png 所以按照以下条件：...根据 DOM 结构，在进度条容器后面的结构 – “静态内容”也会有自己的复合层； 2. 进度条的同级但是 z-index 略高的元素 – 等级标志。...由进度条容器导致的两个复合层，其实只需要把父元素 – 进度条容器的 z-index 提高，就能解决同级复合层影响的问题。...z-index 越高的元素，它做动画时所波及的元素越少。在与flash、canvas还有video无关的页面上，总结一下原则： 1. 动画元素的 z-index 要高于同级无动画元素 2.
，处于正常文本流中（会忽略top、bottom、left、z-index的声明） relative 相对定位，相对于其本身正常位置进行定位。...作用是能够提供一个有效的帮助我们管理一个容器中子元素的排列、对齐和分配空白空间。...；@import只能等页面完全载入以后加载 z-index、层叠属性 z-index属性的局限性：只能在定位元素上有效果 判断元素在Z轴上的堆叠顺序，不仅仅是直接比较两个元素的z-index值的大小，堆叠顺序和层叠上下文...层叠上下文的产生方法有：设置定位元素position且非static值并设置z-index属性的具体数值、transform属性值不是none、父元素的display属性值为flex,子元素z-index...: 默认0，定义子元素相对于其他子元素在元素分配完还有剩余空间情况下的放大比例 flex-shrink:默认1，定义子元素相对于其他子元素在父元素空间不足时相对于其他子元素的缩放比例 flex-basis
CSS 选择器是从右往左解析的，这样效率较高，从子元素向上寻找父元素的情况在大多数正常情况下都比正向从父元素查找子元素要快得多，从左到右的查找在大多数规则读到最后（最右）才会发现是不匹配的，这样会做费时耗能...两个冒号和一个冒号的作用其实一致的，只是在 CSS3 中为了区分伪类选择器和伪元素选择器，在语义上更清晰明了； 伪类选择器：:hover :link :active :target :not(s) :focus...font-size 设置为 0； 3、设置 letter-spacing 为适当大小； 25、Z-Index 栈 Z-Index 只在设置了 position 属性（非 static）的元素上生效；父元素的...：display:flex; 弹性元素：父容器的直接子元素，并且没有脱离文档流（非 absolute 属性）。...都有定位属性的同级元素，z-index 大者居上；如果是非同级的元素， 则会忽略元素本身 z-index，取与对比元素同级的祖先元素的 z-index 属性，大者居上 。
inline-block; white-space: nowrap; } .text{ display: inline-block; width: 100%; } 理论上父元素宽度应该是子元素宽度之和...margin .mg-item:nth-of-type(3n){ margin-right: 0; } 注：如果容器可以滚动，在IE和firefox下会忽略padding-bottom的值，chrome...则不会，此时可以通过margin-bottom实现滚动容器的底部留白 其本质区别在于：chrome是子元素超过父元素content box尺寸触发滚动条显示，而IE和Firefox浏览器是超过padding...:border box: 一个设置了overflow: hidden的元素同时设置了padding和border,则子元素超出容器宽高设置时,裁切的边界是border box内边缘而不是padding...8.元素-webkit-overflow-scrolling设为touch z-index负值在block下面，实际应用： 1.
: center; //当网格的长小于整个容器时，整个网格在它的父容器内的上下对齐方式 （口内一个田） justify-content: center; //当网格的宽小于整个容器时，整个网格在它的父容器内的左右对齐方式...url()表示字体在服务器上的位置，format()用来说明字体格式。 21....36. z-index失效 z-index在以下情况下会失效： 祖先元素position为relative、absolute、fixed时，子元素的z-index失效。...可以把BFC看做一个容器，容器里边的元素不会影响到容器外部的元素。BFC是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局。...46.fixed定位后，背景变透明 背景色和opacity都不是透明的，但是从表面来看元素变透明了，实际上并不是被fixed的元素变透明了，只是因为这个元素没有z-index属性，跟底层元素进行了重叠，
:1304:0:0:0.awebp 容器转换是过渡的主角，容器转换用在将一个元素转换为另一个元素。...在每个场景中都有一个组件变换为另一个组件，并以动画方式切换 "内部" 内容，同时维护一个共享的 "外部" 容器。...在过渡过程中，通过传入页面在传出屏幕上淡入，容器的内容 (列表项和详情页) 发生了交换。...如果您发现您的返回动画没有执行，可能是在共享元素就绪之前开始了过渡。 接下来进入我们的搜索页面。...接下来，默认情况下，过渡会在场景根层次结构内的所有子视图上运行，这意味着一个共享轴过渡会应用于邮件列表上的每一封邮件以及搜索页面的每一个子视图。
z-index属性在什么情况下会失效通常 z-index 的使用是在有两个重叠的标签，在一定的情况下控制其中一个在另一个的上方或者下方出现。z-index值越大就越是在上层。...z-index属性在下列情况下会失效：父元素position为relative时，子元素的z-index失效。...注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。...它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。...可以使用justify-content来指定元素在主轴上的排列方式，使用align-items来指定元素在交叉轴上的排列方式。还可以使用flex-wrap来规定当一行排列不下时的换行方式。
inline-block; white-space: nowrap; } .text{ display: inline-block; width: 100%; } 复制代码 理论上父元素宽度因该是子元素宽度之和....mg-item:nth-of-type(3n){ margin-right: 0; } 复制代码 注：如果容器可以滚动，在IE和firefox下会忽略padding-bottom的值，chrome...但不包含浮动和绝对定位元素 在默认文档流下只出现在垂直方向 margin合并的三种场景 相邻兄弟元素 父级和第一个/最后一个子元素 * 解决方案： 父级设置为块级格式化上下文元素...裁切界限:border box: 一个设置了overflow: hidden的元素同时设置了padding和border,则子元素超出容器宽高设置时,裁切的边界是border box内边缘而不是padding...8.元素-webkit-overflow-scrolling设为touch 复制代码 z-index负值在block下面，实际应用： 1.
1.viewBox 用于在实际的svg上截取一小块，放大到整个svg显示，属性的值有四个数字，分别是左上角的横坐标和纵坐标、视口的宽度和高度。...style中可以设置长宽、位置等属性，可以设置fill、stroke等相关属性； 3.fill填充 fill属性设置对象内部、以及子元素填充的颜色，值为none时无填充； fill-opacity设置填充的透明度...当SVG文档被渲染的时候，这2个元素不会被渲染到图形中。这个2个元素之间差别不是太大，title在有些实现中是作为提示信息出现的，所以通常title是放到父元素的第一个位置上。...g元素是可以嵌套的， 组合起来的图形元素就和单个的元素一样，可以给id值，这样，需要的时候(例如动画和重用一组元素)只用引用这个id值就可以了， 组合一组图形元素可以统一设置这组元素的相关属性(fill...搭配css3的动画，也可以使用svg专有的动画标签元素。
position: relative; 子 mask 容器设置 position: absolute;并撑满整个容器 编写动画 class，不妨让左滑入 class 为 enter_left，则左边动画可写为...，100%时刚好到达父容器右边界，同理很容易写出各个方向的 css 动画 JS 判断滑块方向 上一步我们已经完成了一大半，写出了各个方向的动画，难点是如何判断鼠标进入容器的方向 我们可以画图分析，如下图...http://photo.tuchong.com/2732846/ft640/20811104.webp"> 注意：不要用 mouseout 和 mouseover 事件，该事件会导致鼠标滑入子元素时也触发鼠标事件...使用 event.target.getBoundingClientRect()获得当前鼠标的相信信息； Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置...返回值是一个 DOMRect 对象，返回的结果是包含完整元素的最小矩形，并且拥有 left, top, right, bottom, x, y, width, 和 height 这几个以像素为单位的只读属性用于描述整个边框
CRUD ① append():父元素将子元素追加到末尾 * 对象1.append(对象2): 将对象2添加到对象1元素内部，并且在末尾 ② prepend():父元素将子元素追加到开头...* 对象.empty():将对象的后代元素全部清空，但是保留当前对象以及其属性节点 6. 动画 1...." - swing：动画执行时效果是 先慢，中间快，最后又慢 - linear：动画执行时速度是匀速的 * fn：在动画完成时执行的函数，...① 普通 for 遍历 ② jq对象.each(callback) * jquery对象.each(function(index,element){}); - index:就是元素在集合中的索引...】 * for(元素对象 of 容器对象) 8.
(0, 0, 0)、will-change: transform等，开启硬件加速 动画元素尽量用fixed、absolute定位方式，避免reflow 对动画元素应用高一点的z-index，减少复合层数量...在没有硬件加速的情况下，浏览器通常是依赖于CPU来渲染生成网页的内容，大致的做法是遍历这些层，然后按照顺序把这些层的内容依次绘制在一个内部存储空间上（例如bitmap），最后把这个内部表示显示出来，这种做法就是软件渲染...; } to { left: 100px; } } 对于动画的每一帧，浏览器都要重新计算元素的形状位置（reflow），把新状态渲染出来（repaint），再显示到屏幕上 整页reflow和repaint...两条建议： 给动画元素应用高z-index，最好直接作为body的子元素，对于嵌套很深的动画元素，可以复制一个到body下，仅用于实现动画效果 给动画元素应用will-change，浏览器会提前把这些元素塞进复合层...，但减小了90%的内存消耗 4.考虑对子元素动画与容器动画 容器动画可能存在不必要的内存消耗，比如子元素之间的空隙，也会被当做有效数据发送给GPU，如果对各个子元素分别应用动画，就能避免这部分的内存消耗
padding值，保证总宽高不变 II.padding不允许设置负值 III.背景可以延伸到padding区域 IV.当需要调整子元素在父元素中的位置关系时，可以通过给父元素设置padding来实现 容器溢出...：简单 缺点：当子元素存在定位时，定位在父元素框之外的部分将会被隐藏掉 c) 在浮动的子元素末尾添加一个空div，并设置如下样式： .clear{clear:both;height:0;overflow...outline:none;} 3.在IE6不能识别较小高度的容器（一般为10px） 解决方案： a）给容器添加overflow:hidden; b）给容器添加font-size:0; (如果容器高度为0...margin属性的元素外层再嵌套一个盒子，并设置overflow:hidden; 11.假传圣旨问题 描述：给子元素设置margin-top应用在了父元素上 解决方案： 1）把给子元素设置的margin-top...将会失效 c) 我们把设置了display:flex;属性的元素叫做flex容器，把里面的子元素叫做flex项目 d) 当给元素设置了弹性盒以后，随之会产生两根轴线：主轴和交叉轴 ◆ Flex容器属性
实际上我遇到了 WindowInsets 的问题，也就是说我实际上最终得到的是以下结果： ? 过渡动画破坏了状态栏的效果。 Woops，跟我在第一篇文章中展示的效果不太一样 ?。...其实当你在使用 fragment 过渡动画时，退出（Fragment A）和进入（Fragment B）的内容视图实际上经历了以下几个过程： 过渡动画开始。...Fragment B 的进入动画和“共享元素进入”过渡动画开始执行。 View B 被设置成可见的。 当 Fragment A 的退出动画结束的时候，View A 从容器视图中移除。...Fragment B 的进入动画和‘共享元素进入’过渡动画开始执行。 View B 被设置成可见的。 当 Fragment A 的退出动画结束的时候，View A 从容器视图中移除。...我实现这一点的方法是通过在容器视图（在这个例子中就是在宿主 activity）里添加一个 OnApplyWindowInsetsListener，它会手动分发 WindowInsets 给所有的子 view
index() 方法 1.3 jquery 动画 通过 animate 方法可以设置元素某属性值上的动画，动画执行完后会执行一个函数。...[a-z0-9] : 匹配a到z或者0到9中的任意一个字符 限制开头与结尾： ^ 以紧挨的元素开头 $ 以紧挨的元素结尾 那么参数部分，常用的有： g：global，全文搜索，默认搜索到第一个结果接停止...答：事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。...，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。... 2、 prepend() 和 prependTo()：在现存元素的内部，从前面放入元素 3、 after() 和 insertAfter()：在现存元素的外部
领取专属 10元无门槛券
手把手带您无忧上云
