嵌套的flex容器，子flex的高度会超过父容器高度，并导致父容器高度变大。 效果如下，可以很明显的看到， 顶层节点App的高度是正常的，但是content却被子容器给撑开了。 其中App作为最外层，是个定高的flex box。 title和content title也是定高的…

多行文本展开收起是一个很常见的交互， 如下图演示 实现这一类布局和交互难点主要有以下几点 位于多行文本右下角的“展开收起”按钮 “展开”和“收起”两种状态的切换 当文本不超过指定行数时，不显示“展开收

display 设置了 none 属性会隐藏元素，且其位置也不会被保留下来，所以会触发浏览器渲染引擎的回流和重绘。 不会，因为 BFC 是页面中一个独立的隔离容器，其内部的元素不会与外部的元素相互影响，比如两个 div，上面的 div 设置了 float，那么如果下面的元素不是…

本文是笔者写CSS时常用的套路。不论效果再怎么华丽，万变不离其宗。 有时候，我们需要给多个元素添加同一个动画，播放后，不难发现它们会一起运动，一起结束，这样就会显得很平淡无奇。 那么如何将动画变得稍微有趣一点呢？很简单，既然它们都是同一时刻开始运动的，那么让它们不在同一时刻运动…

一、纯图片的DIVhtml代码（以下效果皆围绕这个代码展开）：1、缓动上移效果图：2、放大效果效果图：3、框内放大效果效果图：4、蒙层效果效果图：二、上图下文的DIV不建议将整个div放大，会导致文字

white-space、word-break、word-wrap（overflow-wrap）估计是css里最基本却又容易让人迷惑的三个属性了，估计很多人都有把它们搞混或用错的经历。必须系统整理一下，今天我们就把这三个属性彻底搞清楚！ 可以看到，nbsp;和</br>可以正常发…

Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案！！

动画是前端工作中很重要的一部分，有趣的交互动画实现常常能让用户刚到惊艳，兴奋，并更愿意使用你的产品。熟练掌握动画是前端工程师的必备技能之一。这篇文章将从零开始介绍如何实现一个音量发射的动画。 前两天看到朋友圈有朋友分享了个链接——你见过最反人类的设计是什么？。里面列了很多反人类…

继上一篇html篇之后，看到小伙伴留言说期待后面整理的CSS和JS篇，工具人小编整理出了本篇有关CSS部分的知识点。本篇文章作为对CSS知识点的统筹，囊括了目前大部分在面试当中常见的内容，包括一些易踩雷的知识点。文章篇幅较长，建议收藏慢慢细品。 文中篇概念性的内容也蛮多，小编一…