随记

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

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

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

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

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

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

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

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

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

摘要： CSS3 规范出现之前，要实现一个动画效果那必须借助 JavaScript 的能力才够得着，所以当时的前端开发但凡听到动画交互，那眉头可就成了一个川字儿了~ transition 的出现，改变了实现动画难的困境，也让前端的交互不再生硬，所有的页面元素如同有了灵性一般。 transition 过渡 要 阅读全文