css
13篇文章 · 0订阅
  • CSS 实现文本"不定行数"截断
    偶然发现，在某乎热榜页有一个很有意思的布局，这里的标题会制约内容的行数，所以文本超出是 "不定行" 的。详细规则如下： 整个容器高度是固定的，标题和内容总共 3 行 标题最多2行，超出省略 内容由剩余
    前端 CSS
    CSS 实现文本"不定行数"截断
  • 我用最蹩脚的方式写了一个「序列帧动画」 🍂
    🌟 在浑然不知的情况下，某菜狗用最蹩脚的方式去完成序列帧动画，尝试了 css 和 js 两种方式，共实现了三套代码。欢迎大家阅读吐槽～
    前端 JavaScript
    我用最蹩脚的方式写了一个「序列帧动画」 🍂
  • 请务必收下这10+个加载特效，保证让你的项目大放异彩⭐
    为什么好看的动画都在别人的项目？？ 这次给前端工友们收集了10+个高逼格加载动画效果！！复制就可以直接使用！！收藏等于学会！！
    前端 CSS
    请务必收下这10+个加载特效，保证让你的项目大放异彩⭐
  • 常用的多列等高布局收藏
    我们要实现的效果就是当各个栏目内容不一样的情况下，保证各个栏目还是对齐的。想要实现的效果如下图所示： 元素设置的padding-bottom尽可能大一些，并且需要设置一样大小的margin-bottom负值去抵消padding-bottom撑大的区域，正负一抵消，对于页面布局不…
    CSS
  • 熟悉又陌生的containing block
    如果干巴巴的问一个前端什么是containing block。大部分都不知所云。官方示意如下： 简单来说就是——无特殊情况下，containing block（包含块）就是最近的块元素的content area（内容区）。 最内部的即为内容区。 inner的宽度是多少呢？毫无疑…
    前端 Element Chrome
  • CSS动画：animation、transition、transform、translate傻傻分不清
    在平时开发过程中，由于都是自己捣鼓玩的项目，并没有UI设计给我的设计图，更没有什么特效要求，导致对css动画一直都不是很熟悉，但是作为即将进入实习单位的萌新程序员，要时刻准备着设计师要求的各种动画，于是有了这一篇文章。 什么叫过渡？字面意思上来讲，就是元素从这个属性(color…
    CSS JavaScript 前端
  • 进一步了解flex布局—来实现这些常见布局吧
    flex布局具有便捷、灵活的特点，熟练的运用flex布局能解决大部分布局问题，这里对一些常用布局场景做一些总结。 flex:0 0 25%,相当于flex-basis:25%，使得每一个列表项的宽度占外层容器(本例中的ul元素)的25%，因此每行最多能够排开四个列表项。 各大U…
    HTML CSS 前端
  • 愈发熟练的 CSS 技巧
    rem+simple-flexible适配方案简单解析rem相对于根元素<html>的font-size的大小来计算坐作为一个单位；simple-flexible是根据手淘团队lib-flexible
    CSS JavaScript 前端
  • [译] Font-size：一个意外复杂的 CSS 属性
    这可能是每一个写过 CSS 的人都知道的属性。它随处可见。 但它也十分的复杂。 我曾经也这么认为，直到我开始致力于实现 stylo。 Stylo 是一个将 Servo 的样式系统集成到 Firefox 中的项目。这个样式系统负责解析 CSS，确定哪些规则适用于哪些元素，通过级联…
    Ruby Firefox CSS
  • 有了white-space:nowrap；妈妈再也不担心我不会横向滚动布局了
    对于多个元素同在同一行的布局，比较常见的是轮播，还有就是二级分类菜单。本文讲解了如何采用white-space:nowrap来实现，适用任意个数的item，并且不用计算父容器宽度
    CSS