老规矩，还是先说说业务场景：有一个图片列表，可以添加、删除和更改，其中呢删除时设计给的设计稿时悬浮（hover）在图片上时显示删除的图标，所以就有了这个用before实现icon的场景进入正文，首先我们有一张图片（这里我就用了一个随机200x200px的api）：<img src="

Grid lines(网格线)、Grid column（列）和Grid row（行）通过grid-template-columns可以将网格分成指定大小的几列，其值可以是：具体的长度（px、rem）、百分比长度（%）、fr、repeat等（具体可参见grid-template-columns - C

我们使用Visio、OmniGraffle、Process On等这些画图软件时，点击一个元素会出现几个小圆圈和一个方框，表示这个元素目前是选中的一个状态，最近项目中也要做类似的效果，就查了查相关的内容，记录下两种实现方式：一、添加div这种方法很好理解，就是把一个元素放在一个新的div中，同时添加

flex布局的基本概念Flexible Box模型，通常被称为flexbox，是一种一维的布局模型。它给flexbox的子元素之间提供了强大的空间分布和对齐能力。flexbox的两根轴线flex布局的所有属性都跟两根轴线有关，主轴和交叉轴，主轴由flex-direction定义，交叉轴垂直于主轴。主

一、效果展示自动滚动滚动到底部延迟一秒自动回到顶部悬浮暂停滚动、放大并可手动滚动二、实现原理用一个较小的div（一般称为wrap）挡住后面更大的列表，利用Js获取列表并更改其scrollTop达到滚动效果。html代码<div id="review_box" class=&

position：static(默认)｜relative｜absolute｜fixed｜stickystatic（正常）定位静态定位，指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。relative