九格宫抽奖相信大家都玩过，今天就用 JavaScript 写个九宫格抽奖玩玩。让中奖不再是梦！ 1.预览效果 image 效果图为屏幕录制软件生成，以至于出现滚动不连贯。实际运行中不会出现不连贯的滚动效果 2.完整代码 代码可直接复制运行查 ...

项目上线后，经常会报出用户一直点击导致连续出发事件引发体验上的问题，尤其是在监听浏览器滚动scroll，页面调整resise的时候，这个时候我们就需要通过节流/防抖来优化这个问题；防抖：防抖就是指在某个时间内再次触发事件则会进行重新计时，也 ...

CSS 语法解析过程 1.在浏览器系列文章中，今天终点讲下CSS解析这块内容.我们已知浏览器的渲染流程中HTML Parser会生成 DOM树，而 CSS Parser会将解析结果附加到 DOM 树上，如下图： image.png 解析分为 ...

1.图片向下撑大3像素问题 在一个盒子里面放一张图片，默认情况下，图片会向下撑大3像素，有以下几种解决方法： 1.1给图片添加display:block； 1.2给图片添加float:left； 1.3 给图片添加vertical-alig ...

BFC 块格式化上下文（Block Formatting Context，BFC） 是 Web 页面的可视化 CSS 渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。 下列方式会创建块格式化上下文： 根元素() ...

选择器的命名规范 1.模块化命名 例如： 与布局相关的样式以“g”为开头。如“g-content”和“g-header”； 与挂钩相关的样式以“j”为开头。如“j-open”和“j-request”； 与元件相关的样式以“m”为开头。如“m ...

前言 一个典型的drag操作是这样开始的：用户用鼠标选中一个可拖动的（draggable）元素，移动鼠标到一个可放置的（droppable）元素，然后释放鼠标。 在操作期间，会触发一些事件类型，有一些事件类型可能会被多次触发 第一部分 在拖 ...

1. float被设计出来的初衷是为了实现文字环绕效果。2. 被设置了float的元素会自动成为块级元素，display的表现形式为“block”，自动脱离文档流。并且其父元素的会发生塌陷，即高度为0。3. 一排设置了float:left的 ...

自从从事了前端行业，就得了个职业病，就是看到任何界面的效果都会思考自己怎么实现，这不看见Window10的日历系统，就动起了歪心思，想复现这个效果。 image 效果分析 边框的可见是跟随鼠标位置来改变，鼠标hover的日期显示边框，鼠标点 ...

一、元素分类 首先要知道元素分三种：内联元素（行内元素）、块级元素、内联块级元素。 1、内联（行内）元素 可与其他元素占一行 高、行高、内外边距不可更改 宽度为内容所占宽度，不可更改 容纳文本或其他行内元素 2、块级元素 独占一行 高、行高 ...