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

1. Flex布局 接下来，我们先提出两个概念：剩余空间和溢出空间，具体是什么意思我们后面慢慢解释。 2. flex-grow 传统的布局是子容器在父容器中从左到右进行布局，应用 flex 进行布局，那么父容器一定设置 display: flex，子容器要“占有”并且“瓜分”父…

本文的每一条，都是我曾经发过的掘金沸点，其中有很多条超过了百赞（窃喜）。 鉴于时不时有童鞋翻我以前的沸点，因此，本文收集了个人目前发过的所有CSS知识点动图，以便阅读。 需要说明的是，顺序仍是按当时发布顺序罗列的，还没有系统的总结，多多包涵。 另外这里，老姚谢谢各位一如既往的支…

（1）根元素（通常情况下就是html）被称为初始包含块，其尺寸等同于浏览器可是窗口的大小。 （2）对于position:relative/static（默认）的元素，其包含块由其最近的块容器祖先盒的content-box边界形成。 （3）对于position:fixed的元素，…

overflow属性用于指定块容器元素的内容溢出时的表现方式——滚动，裁剪，自适应。“BFC的最佳结界”只是其衍生出来的特性，“裁剪”才是其本职工作。在使用overflow做裁剪工作的时候需要注意裁剪的边界时border box的内边缘，来看下面的例子。 HTML中有两个标签是…

几乎从我们踏入前端开发这个领域开始，就不停地接触不同的布局技术。从常见的浮动到表格布局，再到如今大行其道的flex布局，css布局技术一直在不断地推陈出新。其中网格布局(grid)作为css3的产物，它更加贴近网页设计师所使用的布局策略，学习并利用好它可以让我们免受很多布局困扰…

自层叠样式表诞生以来，元素始终是矩形的，而且只能沿着横轴和纵轴放置。有些技巧能让元素看起来是倾斜的，但是底层的坐标方格并没有变形。CSS变形功能改变了这一现状，能以不同的方式改变对象的形态，而且还不只限于二维。 学习变形之前，先需要了解一下变形中的坐标系。在CSS中，笛卡尔坐标…

希腊神话讲述了一个关于宙斯创造云女神涅斐勒的故事。和其他希腊神话一样，这个故事极其怪异并且有点限制级。下面的表述则是一个比较简短且含蓄的版本（限制级，非战斗人员请撤离）。 涅斐勒（云神），据说是宙斯按照自己美丽妻子的形象创造的。传说有个凡人遇见了涅斐勒，一见钟情爱上了她并且在一…

BFC是block formatting context的缩写，中文名为“块级格式化上下文”。前面也多次提到了这个听起来十分拗口的属性，那么CSS设计这个属性的初衷是什么呢？ 记住一句话：拥有BFC特性的元素会形成类似“结界”的封闭内部空间，该元素内部的元素以及该元素本身都不会…