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

觉得它的风格很独特，尤其是其中一些边框。 嘿嘿，所以来一篇边框特辑，看看运用 CSS，可以在边框上整些什么花样。 谈到边框，首先会想到 border，我们最常用的莫过于 solid，dashed，上图中便出现了 dashed。 除了最常见的 solid，dashed，CSS b…

我们使用 @media 通过定义不同尺寸下页面的不同布局，从而实现响应式的页面。 在屏幕尺寸小于 375px 的时候 wrap 显示红色；当屏幕尺寸大于 375px 的时候，屏幕显示蓝色；当屏幕尺寸大于 980px 的时候会变为绿色。 先说一下原理：当屏幕尺寸小于我们设定的尺寸…

大家好，我是 Steven。 虽然我不打机，但我都知道 赛博朋克 2077 这个游戏，在它的网页上，有一个 Available Now 的按钮，当游标移到它之上的时候，会有一个好像故障的毛刺效果。 这一期，我们就会模仿并且实现这个效果。 打开 CodePen 编辑器 ( htt…

产品组的小仙女为了表示数据的流向提出向做一个动态的箭头，但是她没有想好要怎么做。于是，我给了她2套效果。啦啦啦啦~ 普通箭头我们通过一个正方形的div，显示 div 的上边框和右边框，同时旋转 45 度就可以实现一个直角的箭头。 而我们的产品想要的是钝角（大于90度）的多个箭头…

最近忙里偷闲，给自己加油充电的时候，发现自己脑海中布局这块非常的凌乱混杂，于是花了一些时间将一些常用的布局及其实现方法整理梳理了出来，在这里，分享给大家。 单列布局是最常用的一种布局，一般是将一个元素作为容器，设置一个固定的宽度，水平居中对齐。 一栏布局（通栏）头部和底部宽度一…

作为站酷前端小分队的一员，今天也来突击补充一下关于浏览器渲染的知识。渲染模块在执行过程中会被划分为很多子阶段，从输入 HTML，最后输出像素。我们把这样的一个处理流程叫做渲染流水线： 那具体的每一步浏览器是如何做的呢？这就是这篇文章主要探讨的内容。 单进程浏览器是指浏览器的所有…

本文是 “H5 必知必会” 系列第二篇。我们提到过，所谓 “H5” 本来应该是 HTML5 的简称。但是，在中国，“H5”并不是 HTML5 的简称那么简单，它更多地被用于指代内嵌在手机 App 中的网页。无论国外有没有 “H5” 这个说法（应该没有），反正在国内只要说到 Ap…

复习知识点有 3 个部分。 [x] 脱离文档流：脱离文档流的元素，将不再在文档流占据空间，而是漂浮在文档流上方。float: left/right 以及 position: absolute/fixed [x] 标准盒子：标准盒子的 contentWidth 等于设置的 wid…