印第安米饭

解决方案：给flex容器后面添加和子元素同宽的伪元素 .image-container { display: flex; justify-content: space-between; flex-wrap: wrap; &::after { content: ""; width: 272px; } } }

我一直很困惑绝对定位后父盒子的高度会变为0，如何让绝对定位的元素撑开父盒子呢？我在StackOverflow上找到的高分解决方案如下：Absolutely positioned elements are completely removed from the document flow, and thus their dimensions cannot alter the dimensions...

在使用elementUI的card时候，发现如果内容高度设置了100%，虽然会全部撑开card盒子，但是下阴影会超出整个区域高度，导致出现滚动条，可以为内容设置calc(100% - 阴影尺寸)，但是兼容性可能会有欠缺，所以我们使用一个万金油方法：position:absolute我们知道如果想上下左右居中一个盒子，.center-box{ postion:absolute; ...

触发BFC：顺便BFC盒子一般就3个用途，不要自己搞得很复杂：1、清除浮动，比如设置了overflow:hidden;、position:absolute;、float:left;的元素，【其内部】的浮动会被清除（注意清除浮动说的都是float产生的浮动，position:absolutefixed那不叫浮动）2、修复margin折叠(也就是子元素设置垂直margin，结果变成父元素产生了m...

个人理解：在当前盒子里，背景会相对盒子等距离反方向移动，造成一种盒子上下滚动，背景图原地不动的效果。PS：只和当前设置了背景的盒子有关系，和其他所有元素都没关系上图，除了背景图片，多设置一句即可background-attachment:fixedPS：如果大家想自行测试，一个大盒子，设置上背景，下面写一堆字，就像此gif，设置大盒子的background-attachment:fixe...

一、margin塌陷（collapsing）定义：块级元素的上外边距和下外边距有时会合并（或折叠）为一个外边距，其大小取其中的最大者注意浮动元素和绝对定位元素的外边距不会折叠（因为这里触发了 块格式化上下文 BFC）。外边距折叠也只会发生在属于同一BFC的块级元素之间。导致margin塌陷的三种情况：1、相邻元素之间毗邻的两个元素之间的外边距会折叠（除非后一个元素需要清除之前的浮动）。...

使用pointer-events，none 值还指示鼠标事件穿过该元素，并指向位于元素下面的元素。

position: absolute元素溢出overflow: hidden元素的时候，如果其第一个含有position属性(static除外)的祖先元素（一直到body）是overflow: hidden元素祖先元素的时候，则不隐藏；否则，隐藏。或者记住这个：火星人在地球触发了法律，如果火星人的老爸在这法律之外，则这个火星人啥事没有；否则，坐牢！...

就拿chrome 来说，创建一个图层要有以下其中一个条件：1：一个dom 元素拥有 3d 或 透视变换的css 属性（persepective, transform）2：video 标签3：拥有3d 上下文或加速 2d 上下文的 canvas 节点4：混合插件 flash5：自己做的opacity 动画 或 使用一个动画 webkit 变换的元素6：拥有 translate3d 或 t...

规则一：max-width 会覆盖width设置, 但 min-width设置会覆盖 max-width.规则二：

第一个参数：一个设定帧到下一个设定帧之间区别在于：设置start，①你是看不到第一个设定帧的（也就是from 和 0% 的那里），②倒数第二步就是最后一个设定帧（也就是 to 或 100% 那里）③就变换完成了，最后一步不会发生变化也就是比end整体前移了一步从第二步开始变，比我们设定的步数要少一步我们实践一下：假设初始设定为 red ，过渡时间设置为1s：@keyframes gra...