qq_53985958的博客

HTML5如何实现图片拖拽效果： 给拖拽对象设置 draggable 属性、准备开始拖拽时触发事件：ondragstart、拖拽到目标中移动触发事件：ondragover、释放鼠标后触发事件：ondrop如果没有阻止浏览器的默认行为将无法完成拖拽：e.preventDefault();...

Flex：Flexible Box的缩写，意为”弹性布局”开启Flex布局的标志：在父容器上定义 display:flex;决定主轴方向：flex-direction是否换行: flex-wrap决定主轴方向的排列方式： justify-content垂直轴/交叉轴的排列方向: align-items决定多条主轴的对齐方式：align-contentflex-wrap: wrap; 中间出现留白部分，如何解决?......

三种文档流：标准文档流(普通流)、定位流、浮动流BFC元素margin叠加-同级，出现高度重合BFC的子元素不会对外面的元素产生影响margin塌陷-父子高度坍塌-父子，浮动布局导致子元素对父元素产生了影响......

定位position+top: 0;bottom: 0;margin: auto;实现垂直居中 弹性布局: display:flex; [推荐]align-items:center;同级span标签+行内块元素基线对齐: vertical-align: middle;设置padding值 + 子元素高度 => 撑开父元素高度

margin值auto、position(子绝父相)+偏移值left+margin-left、position+偏移left+CSS2d transform、text-align:center;+display:inline-block;、display:flex;justify-content:center;margin塌陷:父元素为BFC:overflow:hidden;只设置left:50%;不能实现水平居中:left:50%;与transform:translateX(-50%);中的50%意义不同

CSS实现等比例缩放：object-fit 的使用