随记

任何一门编程语言，在学习之前都应该先弄清楚它的调试方法，毕竟没有不挖坑的人类！ 程序一旦出现问题，第一时间就是找到问题出在哪儿，其次才是拿出解决办法。如果都找不到问题原因，那又何从谈起解决办法呢？ 如何排查编程问题，这就是一门艺术了，同样的问题，也许 A 只需要 10 分钟，B 可能需要 30 分钟 Read More

截至目前，您应该对前端的 HTML + CSS 应该有了很清楚的认知，至少实现一个静态网页已经完全不在话下了。 当然，CSS 功能绝不止这些，一些不太常用的 CSS 相关知识，后续将通过案例进行分享。 那么咱们接下来看看 JavaScript 的相关知识，作为前端领域三剑客之一，JavaScript Read More

经常查看网页源码的同学应该都有注意到，基本上面向移动端的所有网站都有个 <meta name="viewport" xxx> 这样的HTML元素。 为什么需要 meta 标签？ 在移动端刚起步的时候，默认网页是以 PC 端的宽度渲染，这就导致用户看到的网页过小，需要用户手动缩放才能看到网页内容。 在 Read More

溢出：盒模型装不下内容的时候，超出盒子大小的内容就称之为内容溢出，这里的内容又分为盒模型和文本，所以 CSS 在处理溢出时候也分为文本和盒模型两种情况。 正常情况内容溢出应该换行自动撑开盒子大小，但某些情况下我们盒子大小可能是固定的，不允许自动撑开盒子大小，这种情况就需要处理溢出情况。 盒子溢出 盒 Read More

什么是路径动画？ 随手画一条不规则的线，让元素按照这条不规则的线运动起来，这就是所谓的路径动画。 前面说过的动画都只能针对某一个 CSS 属性，要想实现路径动画可没办法，路径动画必须借助 CSS3 的 offset 相关能力。 offset 相关属性 要实现路径动画，必须用到 offset 的相关属 Read More

什么是瀑布流？ 看一张图，以下图片来源于花瓣网截图： 如上图所示，瀑布流就是让内容按列显示，自动填充空白。 使用 column 实现瀑布流 源码： <div class="masonry"> <div class="item"> </div> <div class="item"> </div> <d Read More

@media 媒体查询的出现解决了什么问题？ 曾经，一个网页要兼容移动端和 PC 端，前端的代码复杂度嗖嗖嗖的飙升，需要使用多套代码对各种屏幕尺寸做适配。 @media 的出现解决了 CSS 中无法适配设备尺寸的问题，让 CSS 拥有了处理简单逻辑的能力。 媒体查询就像进店试穿衣服一样，穿得上，咱就 Read More

数学函数可以用来做什么？ 最基础的当然是用来进行四则运算了，再进一步可以用来平方，对数，幂，绝对值，取余等，当然还可以用来计算三角函数。 CSS 中的数学函数 灵活运用 CSS 中的数学函数，可以抛弃很多原本需要 JS 才能实现的布局场景。 calc() 最基础的四则运算函数，对头，就是用来做小学就 Read More

HELLO，这里是大熊的前端开发笔记。 曾经主题切换功能可以作为软件中亮眼的卖点存在，毕竟那时候要实现换肤可不容易，一套主题一套样式，这代码的重复率嗖嗖嗖的就涨上去了~~当然也可以借助 CSS 预编译 语言编译出多套 CSS 样式表。 没有用觉得我们其实并不需要多套样式表实现换肤？我们只是想要一个像 Read More

相关属性 @keyframes 定义动画的关键帧序列 animation-name 指定 @keyframes 动画的名称 animation-duration 动画单次循环的持续时间（必需属性，否则动画不会生效） animation-timing-function 动画速度曲线 animation Read More