css - 收藏集 - 掘金

作者: 5fc9b6410f4f | 来源:发表于2017-06-01 17:07 被阅读2704次

CSS 绝对底部 - 前端 - 掘金
来自国外的设计达人，纯CSS，可以实现: 当正文内容很少时，底部位于窗口最下面。当改变窗口高度时，不会出现重叠问题。甚至，创造该CSS的人还专门成立一个网站介绍这个CSS底部布局方案。不知道他有没有去申请专利:)<!DOCTYPE html> &l...

CSS 自定义属性 — 使用篇 - 前端 - 掘金
译者注：抱歉带来欠佳的阅读体验。使用文本代码无法成功发布文章，所以本篇中的代码暂时全部使用的是图片。推荐大家阅读公众号版本，公众号版本，公众号版本！待译者联系到知乎专栏工作人员后再尝试修改本文。使用篇的翻译来自两篇文章，原文分别是 ...

CSS3 之 3D 动画制作 - 前端 - 掘金
css3的3d起步要玩转css3的3d，就必须了解几个词汇，便是透视(perspective)、旋转(rotate)和移动(translate)。透视即是以现实的视角来看屏幕上的2D事物，从而展现3D的效果。旋转则不再是2D平面上的旋转，而是三维坐标系的旋转...

为元素添加边框，你有多少种好办法？ - 掘金
腾讯云技术社区-掘金主页持续为大家呈现云计算技术文章，欢迎大家关注！作者：莫卓颖背景相信大家在做项目的过程中会经常遇到这样的一个需求，鼠标hover到某个元素的时候为这个元素添加边框，这个简单的需求仅需注意添加边框后不会对原有的位置造成布局的影响从...

CSS 命名方式 --BEM - 前端 - 掘金
原文地址：https://github.com/zhongxia245/blog/issues/48 一、背景挺早就听说过BEM了，也大概的知道怎么用，但是具体 BEM 指啥，具体有啥要求，还不是很清楚，然后今天就学习了下。二、BEM（Block，Elem...

16种方法实现水平居中垂直居中 - 掘金
熟悉水平居中和垂直居中的方法, 不为别的, 就为用的时候能够信手拈来. 下面直接步入正题.原文：16种方法实现水平居中垂直居中水平居中 1) 若是行内元素, 给其父元素设置 text-align:center,即可实现行内元素水平居中. 2) 若是块级元素,...

CSS 技巧（二）：形状 - 前端 - 掘金
形状本章代码比较多，可以访问仓库获取源代码。 1. 自适应的椭圆背景知识：border-radius属性的基本用法使用b...

理解 CSS 命名规范 --BEM - 前端 - 掘金
理解CSS命名规范--BEM 2017-04-05 最近在写博客主题的时候发现一个很严重的问题，由于css的命名并不是很规范，导致自己在后期修改的时候很是头疼，有些样式需要在浏览器中打开开发者工具去找，很是无奈。所以决定在写完主题之后...

5 个技巧避免不必要的浏览器兼容性问题 - 掘金
本文作者：John Howard 编译：胡子大哈翻译原文：http://huziketang.com/blog/posts/detail?postId=58d8f4d17413fc2e8240855e 英文连接：5 Tricks to Avoid Cro...

CSS 技巧（三）：视觉效果 - 前端 - 掘金
《css揭秘》学习笔记系列，记录和分享各种实用技巧，共同进步。源代码可访问仓库地址视觉效果 1. 单侧投影 1.1 单侧投影 ...

详解 CSS 七种三栏布局技巧 - 前端 - 掘金
三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在开发十分常见，那么什么是三栏布局？比如我打开某东的首页：映入眼帘的就是一个常见的三栏布局：即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽度自适应。下面围绕的这样的目的，即左右...

CSS三栏布局的四种方法 - 掘金
前言总括：不管是三栏布局还是两栏布局都是我们在平时项目里经常使用的，也许你不知道什么事三栏布局什么是两栏布局但实际已经在用，或许你知道三栏布局的一种或两种方法，但实际操作中也只会依赖那某一种方法，本文具体的介绍了三栏布局的四种方法，并介绍了它的使用场景。 ...

有效解决 css sprite 图片使用 rem 单位边角缺失的问题 - 前端 - 掘金
起因在移动端使用 rem 布局时 sprite 图片也需要用 rem 单位。但由于浏览器对小数单位精度解析的差异，在不同设备上一些图片看起来会缺了一点点，或者多了一点点.....

谈谈一些有趣的 CSS 题目（十四）-- 纯 CSS 方式实现 CSS 动画的暂停与播放！ - 前端 - 掘金
开本系列，谈谈一些有趣的 CSS 题目，题目类型天马行空，想到什么说什么，不仅为了拓宽一下解决问题的思路，更涉及一些容易忽视的 CSS 细节。解题不考虑兼容性，题目天马行空，想到什么说什么，如果解题中有你感觉到生僻的 CSS 属性，赶紧去...

平时自己项目中用到的 CSS - 掘金
css有些属性容易忘记，半天不写就要去查api，有时候api还不好使，于是还是记下来以后方便用，后续会慢慢补充进来的。 Github: https://github.com/asd0102433/blog博客长期更新，喜欢的朋友star一下 outline...

使用 css 3 制作长投影 Long Shadow - 前端 - 掘金
在flat design(扁平化的设计)中，Long Shadow （长投影）被看着屡试不爽的设计技能。比如下面这张，非常经典的长投影设计: 摄影师选择长投影通常是给图片带来戏剧效...

flex.css快速入门，极速布局 - 掘金
什么是flex.css? css3 flex 布局相信很多人已经听说过甚至已经在开发中使用过它，但是我想我们都会有一个共同的经历，面对它的各种版本，各种坑，傻傻的分不清楚，flex.css就是对flex布局的一种封装，通过简洁的属性设置就能使得它完美的运行在移...

web 前端之 base.css - 前端 - 掘金
意义统一各个浏览器差异、统一团队开发起始标准、弥补浏览器的“缺点”、提供频繁使用的原子类名。 ...

CSS 五种方式实现 Footer 置底 - 前端 - 掘金
页脚置底（Sticky footer）就是让网页的footer部分始终在浏览器窗口的底部。当网页内容足够长以至超出浏览器可视高度时，页脚会随着内容被推到网页底部；但如果网页内容不够长，置底的页脚就会保持在浏览器窗口底部。 ...

你必须记住的 30 个 CSS 选择器 - 前端 - 掘金
So you learned the base id, class, and descendant selectors—and then called it a day? If so, you're missing out on an enormous lev...

用CSS3来制作倒影（box-reflect） - 掘金
有一句话说的好：“横看成岭侧成峰，远近高低各不同”，有些时候，我们需要从不同的角度去欣赏mm，如下图：在早期，要实现这种效果，我们只能乖乖的找设计去制作，然后在页面上插入一张图片，但是随着CSS3的出现，我们可以纯代码实现，如何实现呢？就是通过CSS3的bo...

Flex 布局应用 - 掘金
CSS3为我们提供了一种可伸缩的灵活的web页面布局方式-flexbox布局，它具有很强大的功能，可以很轻松实现很多复杂布局。然而Flex属性较多，不便于记忆，而在项目中，布局使用频繁，那么可以将flex抽离为一个布局工具类，简化使用方式，快速应用于项目，减少...

深入新版 BS4 源码探索 flex 和工程化 sass 奥秘 - 前端 - 掘金
你可能已经听说了一个“大新闻”：Bootstrap4 合并了代号为#21389的PR，宣布放弃支持IE9，并默认使用flexbox弹性盒模型布局。这标志着：1）前端开发全面步入“现代浏览器”的时代进一步来临；2）样式处理也再一次面向未来，拥抱更加灵活的弹性盒模...

一劳永逸的搞定 flex 布局 - 掘金
寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不由得感觉眼前一亮，顺理成章的联想到 Word 文档排版中用到的的左对齐、右对齐和居中对齐，然而很快就失望的发现...

对比学习 sass 和 stylus 的常用功能 - 前端 - 掘金
在众多的css预处理器语言中，sass和stylus算是十分优秀的两个。本文主要针对两者的常用功能做个简单的对比分析。在对比中了解二者的差异，同时帮助大家更好的掌握这两种预处理语言。本文涉及到的sass部分，均来自于阮一峰老师的 ...

弹性盒模型Flex指南 - 掘金
Web layout 是Web UI中的基础架构, 重要性不言而喻. 传统的盒模型, 借助display, position, float 属性应对普通布局游刃有余, 但针对复杂的或自适应布局, 常常捉襟见肘. 比如垂直居中, 就是一个老大难的问题, 借助fl...

CSS: 常用的元素居中方法 - 前端 - 掘金
日常工作中常常会遇到元素居中的需求，通常块级元素的水平居中只需左右margin设为auto即可。而行间元素的居中则是由父级设置行高(等于父级高度)和 text-align(center)实现。但是如果要求是块级元素水平垂直居中呢？本文总结了一些常用的元素水...

Sticky Footer，完美的绝对底部 - 前端 - 掘金
写在前面做过网页开发的同学想必都遇到过这样尴尬的排版问题：在主体内容不足够多或者未完全加载出来之前，就会导致出现（图一）的这种情况，原因是因为没有足够的垂直空间使得页脚推到浏览器窗口最底部。但是，我们期望的效果是页脚应该一...

走进网页虚拟现实 WebVR - 掘金
最近几年，虚拟现实VR的概念火了一把，各种VR概念的游戏、设备、视频受到人们的广泛关注。笔者在逛商场的时候也经常会看到有VR设备体验的地方让游人体验一把，各种酷炫的头盔和酷炫的设备着实抓人眼球。但是作为一个前端工作者，我们肯定也希望在我们的网页里也能看到这么酷...

CSS 技巧（一）：背景与边框 - 前端 - 掘金
该系列为《css揭秘》读书笔记，归纳主要知识点，通过实战技巧深入css属性，加以巩固。背景与边框 1.半透明边框背景知识：rgba/hsla，在rgb/hsl的基础上增加了Alpha通道,用于设置颜色的不透明度（就是能透过多...

(译) 编写整洁 CSS 代码的黄金法则 - 掘金
原文地址：Golden Guidelines for Writing Clean CSS 原文作者：本文已获作者 Tiffany Brown 授权译文出自：掘金翻译计划译者：reid3290 校对者：weapon-xx，bambooom 编写整洁 C...

Flex 布局学习笔记 - 前端 - 掘金
Flex 布局，也称为弹性布局，是为了适应不同的屏幕尺寸和不同的设备类型二提出的一种布局方式。基本概念 ...

黑科技：CSS 定制多行省略 - 前端 - 掘金
什么是多行省略？当字数多到一定程度就显示省略号点点点。最初只是简单的点点点，之后花样越来越多，点点点加下箭头，点点点加更多，点点点加更多加箭头...。多行省略就是大段文字后面的花式点点点。同行这么做： ...

(译)Gif 在 web 上的优化 - 前端 - 掘金
原文地址： https://bitsofco.de/optimising-gifs/ @ireaderinokun 和很多人一样，我喜欢在自己的站点用gif。可以非常好的突出某些功能。比如下面模仿 itunes的轮播 ...

浏览器亚像素渲染与小数位的取舍 - 腾讯 ISUX - 前端 - 掘金
在响应式项目中，百分比的数值的应用越来越多，比如栅格化布局、背景定位、内边距等。以往对于这种数值，我们大都是直接采用计算器计算出来的数值。但这种数值有时会很长，特别是除不尽的数值如23.33333333%。数据不美观不说，关键对于这种小数位的位数应该如何取舍，...

「前端」rem 缩放方案 flexible-js 兼容 375px 方案的思路 - 掘金
本文来自尚妆前端团队南洋发表于尚妆github博客，欢迎订阅。移动端H5页面rem缩放方案flexible.js兼容375px方案的思路参考：移动端高清、多屏适配方案 viewport-and-flexible.js flexible.js git...

CSS hack 合集 - 前端 - 掘金
本来已经抛弃IE6|7|8了，可是最近发现要考虑IE兼容性的网站还是有不少的，所以这两天了解了一下CSS HACK，在这里简单地总结一下！ 1、何为HACK？简单的说，HACK就是只有特定浏览器才能识别这段hack代码。Hack也可以说是让前端最为头疼...

没那么难，谈 CSS 的设计模式 - 前端 - 掘金
什么是设计模式？曾有人调侃，设计模式是工程师用于跟别人显摆的，显得高大上；也曾有人这么说，不是设计模式没用，是你还没有到能懂它，会用它的时候。先来看一下比较官方的解释：”设计模式（Design pattern）是一套被反复使用、多数人知晓的、经过分类的、代...

CSS3 布局利器 Flex 详解 - 前端 - 掘金
传统的网页布局基于盒装模型，使用display，position，float属性来达成各种布局。对于一些特殊的布局使用这些来实现不是很方便，比如垂直居中。Flex应运而生，它可以简便、完整、响应式地实现各种页面布局。Chrome 21，FF22，IE 10，S...

flex 布局基础 - 阅读 - 掘金
布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。之前的博客中也利用这一解决方案解决过居中布局等等问题。详见css--布局[1]和css--全屏布...

Flex 布局关于内容均分的那些坑 - 前端 - 掘金
DDFE 实战经验...

GitBook《拥抱未来的 CSS 布局方式：flex 与 grid 布局》全教程 - 前端 - 掘金
本系列文章为对CSS中flex布局与grid布局的详细介绍，已在GitHub同步更新，如您在阅读过程中发现描述有误或错别字的情况，您可以向本项目提出issus或Pull Request。本系列文章为我在深入研究CSS的布局方式的过程中的一些总结。主要是对于C...

Flex 布局新旧混合写法详解（兼容微信） - 前端 - 掘金
flex是个非常好用的属性，如果说有什么可以完全代替 float 和 position ，那么肯定是非它莫属了（虽然现在还有很多不支持flex 的浏览器）。然而在移动开发中，本来绝大多数浏览器（包括安卓2.3以上的自带浏览器）都支持的属性，偏偏有个例外，就是国...

移动端 flex 布局神器，兼容微信，UC，webview 等移动端主流浏览器，支持 react，vue，angular - 前端 - 掘金
download git clone https://github.com/lzxb/flex.css.git npm npm install flex.css --save 为什么需要flex.css? 在移动端开发中，并不是所有的浏览器，webview...

前端切图神器 avocode - 前端 - 掘金
安装avocode 前端的基础工作就是把设计师的设计稿还原成前端页面，所以切图是作为一个前端的基本技能。杀敌要有趁手的兵器，而前端一般都是用photoshop,但是这个兵器非常笨重，可能当你笨拙的挥动的它时，敌人已经挥刀到你的颈部了。毕...

CSS 技巧：使你的 CSS 更加专业 - 前端 - 掘金
一个帮你提升 CSS 技巧的收藏集。对于其他收藏集合可以查看 @sindresorhus 创建的收藏集合 Awesome Lists. 目录专业技巧支...

SVG 新司机开车指南 - 前端 - 掘金
TL,TR 确保大家一小时内可以开车上路..... 来不及解释了，快学车..... SVG其相关特性远比想象中要强，本文首先介绍下SVG的相关定义、优缺点和Demo，接下来会介绍它的...

(译)CSS Top 10 Articles for the Past Year (v.2017) - 前端 - 掘金
在过去一年里，我们对近11000篇CSS3的文章进行了整理，同时从中挑选出可以帮助你规划2017年web事业发展前十的内容（0.09%的概率）。这份CSS列表包含了各种话题，例如：REM，架构，网格，Element Querise，display，Backg...

腾讯 AlloyTeam 正式发布 Canvas 魔幻线条 - curvejs - 掘金
写在前面 curvejs 中文读["克js"]，是腾讯AlloyTeam打造的一款魔幻线条框架，让线条成为一名优秀的舞者，让线条们成为优秀的舞团，HTML5 Canvas就是舞台。官网：https://alloyteam.github....

前端魔法堂：解秘 FOUC - 前端 - 掘金
前言对于问题多多的IE678，FOUC(flash of unstyled content)——浏览器样式闪烁是一个不可忽视的话题，但对于ever green的浏览器就不用理会了吗？下面尝试较全面地解密FOUC。到底什么是FOUC？页面加载解析时，页...

有趣的 6 种图片灰度转换算法 - 前端 - 掘金
前言黑白照片的时代虽然已经过去，但现在看到以前的照片，是不是有一种回到过去的感觉，很cool有木有~ 看完这篇文章，就可以把彩色照片变成各种各样的黑白的照片啦。本文完整的在线例子图片灰度算法例子，例子的图片有点多，可能有些慢。例子的源码位于blog/de...

文本动画, 几行代码页面效果瞬间就提升了 - 前端 - 掘金
animate-text 文字动画和数字动画 animate text 查看DEMO...

内容滚动条和子 div 高度自适应 - 前端 - 掘金
写在前面：老套路有图有真相，这才叫做分享。本文内容是：一个div里面，两个子div高度自适应（平分父div的高度）和元素内容过多的时候，根据需求出现高度滚动条或者宽度滚动条。先放最终效果（在下面会有demo代码。）： ...

[设计文章：都说是 2016 年国外最火 55 套 PS 实用教程

设计 - 掘金](https://juejin.im/entry/58b6ddfb570c350062fe17f1)
今夜，西元2017年的第一天，又是一个365天的日夜轮回，成长有所得，生活有所福，时间有所守，工作有所进，慢条斯理即便如树懒也是一年，风驰电掣就算是天速星神行太保戴宗，一年也终是一年。PS小公举，还是阿随君电脑中打开率最高的软件之一，这一年，精进有无，爱有无，...

解决 Chrome 中 input 自动填充时会强行设置背景色的问题 - 前端 - 掘金
方法1：box-shadow 方法2：animation...

浅析 js 实现网页截图的两种方式 - 前端 - 掘金
Web端的截图(生成图片)并不算是个高频的需求，资料自然也不算多，查来查去，也不过Canvas 和 SVG两种实现方案，原理大概相似，都非真正义上的截图而是把DOM转为图片，然而实现方式却截然不同。 Canvas 实现 ...

(译) 通过装饰器来让你的代码更整洁 - 前端 - 掘金
原文: Make your Code Cleaner with Decorators ...

前端必备 HTTP 技能之 WebSocket 协议详解 - 前端 - 掘金
WebSocket是一个计算机通信协议，通过一个TCP连接提供全双工的通信频道。2011年IETF在RFC6455文件中标准化了WebSocket协议，WebSocket的 Web IDL格式的API是W3C标准化的。 ...

前端开发中像素的概念 - 前端 - 掘金
前端开发中像素的概念最近在美柚实习,第一次正式接触到设计师的设计稿.我相信很多刚涉及移动端设计与开发的同学基本上会在前端开发中的像素问题上纠结很久，所以写下这篇笔记，便于自己日后翻阅。如果有啥理解上的错误，欢迎大家指正~ 何为像素我们看到所显示...

2017 百度前端技术学院 - 自定义 checkbox/radio - 前端 - 掘金
一. label标签 1. 概念： HTML <label>元素表示用户界面中项目的标题。它通常关联一个控件，或者是将控件放置在label元素内，或者是用作其属性。这样的控制称作lab...

也说css之overflow：细探之下有意想不到的结果 - 掘金
作者：dolymood overflow 是一个非常常用的 CSS 属性，一般来说会认为很简单，其实细究之后就会发现他还有很多小特性或者说意想不到的结果；下面就介绍下（在浏览器环境下）关于 overflow 的小总结。哪些元素上有效？首先 overflo...

细说CSS中的BFC - 掘金
作者：滴滴公共前端团队 - 邱莲 BFC是什么？ BFC（Block Formatting Context）直译为“块级格式化范围”。是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当涉及到可...

[移动端新特性] Passive Event Listeners - 掘金
作者：滴滴公共前端团队 - 小春 Passive Event Listeners 这个东西其实有一段时间了，关注 2016 Google I/O 的 Mobile Talk 的同学应该有些印象。 PS：建议一些新技术方向探索的同学关注一下每一年的 Goog...

再谈自适应垂直居中 - 掘金
作者：滴滴公共前端团队 - Neurotoxin 新年第一篇，首先祝福大家新年好~ 最近在开发一个 Toast组件时，遇到了一些有趣的问题，首先来看一下需求需求为宽高不定，上下左右垂直居中，如下图代码如下： HTML <div class="toa...

State 设计，Redux 开发第一步 - 前端 - 掘金
State是整个应用的数据，本质上是一个普通对象。State决定了整个应用的组件如何渲染，渲染的结果是什么。可以说，State是应用的灵魂，组件是应用的肉体。所以，在项目开发初期，设计一份健壮灵活的State尤其重要，对后续的开发有很大的帮助。请注意，并不强...

百度前端技术学院－面向大学生的前端技术学习平台 - 前端 - 掘金
由百度创办的免费前端技术学习实践、交流、分享平台。百度竟然干了件良心事儿...

谈谈面试与面试题 - 前端 - 掘金
起因，某日电话面试之后满心郁闷的我发了两条微博：面试的时候问个css的position属性能刷掉一半的人这是啥情况…… 其实这问题我本来打算的是可以顺着一路扯到normal flow、containing block、bfc、margin ...

[英] 你有多了解 CSS 的 display 属性 - 前端 - 掘金
display 属性是我们使用 CSS 进行网页布局时最重要的属性之一，虽然你可能已经对 block、inline 的用法已经非常熟悉了，我们还是在这篇文章里再好好了解一下这些属性的用法吧。...

2016 年至今最受欢迎的 14 篇 CSS 文章 - 前端 - 掘金
We’ve taken a look through all the stats for the 20 issues of HTML5 Weekly (our front-end development newsletter) published so far...

粘连 Footer 的 5 种方法 | CSS-Tricks - 前端 - 掘金
一个简短的历史，如果你愿意那样说的话。粘连 footer 的目的是让它“支撑”在浏览器窗口的底部。但不总是在底部，如果有足够的内容将页面撑开，footer 可以被撑到网页下方去。但是，如果页面的内容很短，粘连 footer 仍然会出现在浏览器窗口的底部。 ...

CSS background 深入理解及应用 - 前端 - 掘金
Background background属性的简写用法, 常见背景属性的理解以及神奇的渐变色。目录 background属性的简写用法 ...

手把手带你用原生js实现css属性的set和get - 掘金
作者：Icarus原文链接：手把手带你用原生js实现css属性的set和get 上一篇博文介绍了getComputedStyle方法，接下来，我们就来实现一个简易版的小插件，能够在不借助jQuery的情况下实现css属性的获取和设置。 Let's start ...

CSS基本功从头练之Selector - 掘金
CSS一直是我的短板，从来没有系统学过，一直都是使用第三方的样式库，或者在网上找点资料copy。最近感觉应该系统的梳理一下，否则很多概念还是不太清晰。还是属于边学边写的资料，难免各种漏洞，希望大家多指正。 Selector（选择器）为什么会有选择器这个概念？...

CSS 基础知识总结 - 前端 - 掘金
通常我们在学习CSS的时候，感觉语法很容易掌握，实际应用中却碰到各式各样难以处理的问题，为避免大家受到同样的困惑与不解，本文详细讲解了CSS中优先级和Stacking Context等高级特性，让你更深入了解CSS。 ...

动态加载 css 方法实现和深入解析 - 前端 - 掘金
一、方法引用来源和应用此动态加载css方法 loadCss，剥离自Sea.js，并做了进一步的优化（优化代码后续会进行分析）。因为公司项目需要用到懒加载来提高网站加载速度，所以将非首屏渲染必需的css文件进行动态加载操作。...

【译】CSS 动画之工具、框架和教程 - 前端 - 掘金
在这篇文章中，我们将不讨论使用 CSS 动画的好处，也不会谈论 JS 动画是否比 CSS 动画更快，而是与你分享一些 CSS 工具，框架和教程。它们将有助于缓解你在学习 CSS 动画中的困扰，并帮助你节省一些时间。 CSS 动画工具和...

Css margin 百分比 - 前端 - 掘金
你可能从没注意过它在 margin系列之keyword auto 中，说过了 margin 值为 auto 的情况，这次要聊的是值为百分比的情形。我必须承认这是一个非常基础的知识点，但有一段时间我发现很多人对此有错误的认知。...

CSS 多行文本溢出省略显示 - 前端 - 掘金
CSS多行文本溢出省略显示文本溢出我们经常用到的应该就是text-overflow:ellipsis了，相信大家也很熟悉，但是对于多行文本的溢出处理确接触的不是很多，最近在公司群里面有同事问到，并且自己也遇到过这个问题，所以专门研究过这个问题。首先我们回顾...

2017 年要去学的 3 个 CSS 新属性 - 前端 - 掘金
Feature Query, Grid Layout, Native Variable。前端的亲们你们颤抖了吗？...

用 css3 制作旋转加载动画的几种方法 - 前端 - 掘金
以WebKit为核心的浏览器，例如Safari和Chrome，对html5有着很好的支持，在移动平台中这两个浏览器对应的就是IOS和Android。最近在开发一个移动平台的web app，那么就有机会利用css3去实现一些很酷的效果，这些效果原来更多的是利用图...

2017 年要学习的三个 CSS 新特性 - 前端 - 掘金
新的一年，我们有一系列新的东西要学习。尽管 CSS 有很多新的特性，但有三个特性令我最激动并进行学习。...

前端不为人知的一面——前端冷知识集锦 - 前端 - 掘金
（点击上方公众号，可快速关注）作者：伯乐在线专栏作者 - 刘哇勇如有好文章投稿，请点击 → 这里了解详情如需转载，发送「转载」二字查看说明前端已经被玩儿坏了！像console.log()可以向控制台输出图片等炫酷的...

获取元素 CSS 值之 getComputedStyle 方法熟悉 - 前端 - 掘金
一、碎碎念~前言我们都用过jQuery的CSS()方法，其底层运作就应用了getComputedStyle以及getPropertyValue方法。对于那些只想混口饭吃的人来讲，晓得CSS()如何使用就足够了。对于希望在JS道路上越走越远的来人说，简单了解...

我的职业是前端工程师：入门不是应该很简单吗？ - 前端 - 掘金
入门前端，是一件很难的事吗？在今天，我也没有想好一个答案，也不知道怎样给出一个答案。这个问题并不取决于前端，而是取决于不同人的需求。到底是想要快得一步登天呢，还是一点点的慢慢来，去享受前端带来的乐趣。对于不同领域的学者来说，都会有一个相似的问题：如何从入...

(译)CSS 书写模式 - 前端 - 掘金
由于你可能没有那么多的时间，所以我将从结论开篇。你可以使用一个不常见，但是非常重要的CSS属性来使文字垂直显示，像下面这样。除了让文字垂直显示之外，你也可以让图标和入口按钮以这样的方式呈现。当然，可以让你页面上的任何内容按这样方式呈现。我写的css让浏...

Tips-移动端滑动固顶效果(position: sticky) - 掘金
先放个图看看滑动固顶是啥效果：中间那个 tab 条，平常的时候是固定的，等到页面滑上去的时候，又像 fixed 一样贴在顶部。position: sticky 就是用来实现这个效果的，元素不脱离文档流，仍然保留高度，所以这个属性真是人畜无害啊，而且效果如丝...

CSS：Grid 布局 - 前端 - 掘金
CSS Grid布局，是一个基于网格的二维布局系统，目的是用来优化用户界面设计。不过，目前任何浏览器默认是不支持Grid布局的，但幸运的是，我们可以设置Chrome、Opera或者Firefox的特殊标志来启用它。在Chrome或Opera中，在地址栏中输...

详解 CSS 居中布局技巧 - 前端 - 掘金
水平居中元素：通用方法，元素的宽高未知方式一：CSS3 transform .parent { position: relative; } .child { position: absolute...

前端优化不完全指南 - 前端 - 掘金
篇幅可能有点长，我想先聊一聊阅读的方式，我希望你阅读的时候，能够把我当作你的竞争对手，你的梦想是超越我。你想超越我，就得了解我懂什么对吧，好，开始阅读~ ~ 哈哈哈 ~ ~ ~ 历时144000000毫秒出山的前端优化篇，若你问我有什么感悟？那我告诉你，看到毫...

关于 DOCTYPE 的一个小发现 - 前端 - 掘金
本文来自我的笔记小札，找工作整理了出来<!DOCTYPE html> 对于前端开发工程师（好吧，其实做 Web 都懂）而言，实在是太熟悉的一个东西了，由此引申的浏览器的各种模式也是一个老生常谈的坑。然而我在意外中竟然找到了一个鲜为人知的点，实在是惊...

CSS 并不简单 -- 一个人性化输入框的实践 - 前端 - 掘金
这次通过这个个性化的输入框，给大家介绍一些容易忽略的知识点。(新手注意：本文的html采用的是jade，css采用的sass，js采用的vue) 一、效果大家...

:before 伪类妙用 + 打造一个假的输入框 - 前端 - 掘金
记一次以前从未注意的:before伪类之content属性和用div模仿输入框案列–ofo的车牌输入框整个布局大体分为上中下观察输入框 1 输入内容为黑色 2 闪烁的光标为黄色就奇怪在输入框的光标...

CSS 常见布局解决方案 - 前端 - 掘金
说起css布局，那么一定得聊聊盒模型，清除浮动，position，display什么的，但本篇本不是讲这些基础知识的，而是给出各种布局的解决方案。水平居中布局首先我们来看看水平居中 1.margin + 定宽 <di...

管理 CSS 层叠_w3cplus - 前端 - 掘金
编辑推荐：掘金是一个高质量的技术社区，从 CSS 到 Vue.js，性能优化到开源类库，让你不错过前端开发的每一个技术干货。点击链接查看最新前端内容，或到各大应用市场搜索「掘金」下载APP，技术干货尽在掌握中。了解CSS的同学都应该知...

玩转 animate.css，提高动画开发效率 - 前端 - 掘金
整了一个 animate.css 动画效果的插件，可以实时预览动画效果并同步生成对应动画效果的 CSS 代码，助你动画开发一臂之力。...

CSS 中的浮动和清除浮动，梳理一下！ - 前端 - 掘金
从业三年，项目无数，现在回过头来，想要把一些重要的知识用白话整理出来：这个东西是什么？怎样才是最佳实践？希望对自己知识体系有梳理作用，也希望对大家有些许帮助。前端技术栈更新太快，眼花缭乱，大家一个劲揽过来学习的时候，别忘了回头看看那些已经掌握的基础知识。 ...

《你不知道的 CSS》之等比例缩放的盒子 - 前端 - 掘金
你肯定已经知道，对于一个 img 元素而言，你可以单独地修改它的 width 或者 height 属性来设置它的大小，同时图片的比例还能够保持不变。如下图所示，最上面是原始大小的图片，下面两张则分别是设置了 width: 50% 和 height: ...

haorooms 总结提高你 css 技能的 css 开发技巧 - 前端 - 掘金
前言说到css开发技巧，其实我前面所有关于css的文章，都是css的一些小的技巧！感兴趣的可以查看：http://www.haorooms.com/tag/css 还有值得一提的是，我之前关于css，分别写了css常用效果总结 ...

前端基础知识整理之页面布局 - 前端 - 掘金
引用：“资深的前端开发能把absolute和relative弄混，这样的人不要也罢，因为团队需要的是：你这个人具有可以依靠的才能” 最近觉得自己应该好好反省一下，连最基础的问题都回答不上来，家里人不要面子的啊。要有一个好的页面布局的话首先我们要了解一个...

【译】CSS 很棒，只是真的太难了 - 前端 - 掘金
原文地址：CSS is Fine, It’s Just Really Hard 原文作者：Jordan Scales ...

纯 CSS 实现网站常用的五角星评分和分数展示交互效果 - 前端 - 掘金
最近做的一个项目涉及到评分和展示分数的模块，UI设计师也给了几个切好的图片，实现五角星评分方式很多，本质爱折腾的精神和对性能追求以及便于维护的考虑，搜集和尝试了很多方式，最终采用了纯css驱动的实现方式完成评分和展示分数的功能，没有js,也就意味着没判断逻辑，...

谈谈一些有趣的 CSS 题目（十三）-- 巧妙地制作背景色渐变动画！ - 前端 - 掘金
开本系列，谈谈一些有趣的 CSS 题目，题目类型天马行空，想到什么说什么，不仅为了拓宽一下解决问题的思路，更涉及一些容易忽视的 CSS 细节。解题不考虑兼容性，题目天马行空，想到什么说什么，如果解题中有你感觉到生僻的 CSS 属性，赶紧去...

基于 vw 等 viewport 视区相对单位的响应式排版和布局 « 张鑫旭 - 鑫空间 - 鑫生活 - 前端 - 掘金
by zhangxinxu from http://www.zhangxinxu.com/wordpress/?p=5583 本文全文转载需购买版权(500¥)，摘要引流则免费，具体参见这里一、什么是视区相对单位？就是相对于浏览器viewport尺寸的单位...

CSS 选择器整理 - 前端 - 掘金
很多人都觉得CSS特别简单，但其实真正写好CSS并不容易，CSS的每一点其实内容都很多，就拿选择器来说，CSS选择器大概可以分为五类： ...

2015 年学习 CSS3 的 15 个高级免费教程 - 前端 - 掘金
如果你想学习创建炫酷的css3效果，这些由专业人士所写的2015年的高级CSS3教程会是你的最佳选择。 CSS 3D云这是一个demo应用程序，你可以生成一个与现实生活一模一样的云，并可以对其进行调整。这个demo的代码比较复杂，它运用了CSS3 3...

[英] 使用 CSS 网格布局处理元素的七种方法 - 前端 - 掘金
使用 CSS 网格布局处理元素的七种方法...

[英] CSS 继承深度解析 - 前端 - 掘金
CSS 继承深度详解，减少你的代码量。...

CSS3初体验之奇技淫巧 - 掘金
自CSS3流行以来，虽然以前看过一遍所有的新增属性，但其实在实际项目中用到的少之又少。所以没有形成系统性的认识，以及看到效果立马就能想到解决方案的能力。然后最近正好遇到一个需要绘制大量动画的需求，所以决定趁此机会好好研究一下这个既熟悉又陌生的css3。在正式...

CSS 居中：完全指南 - 前端 - 掘金
译自CSS-TRICKS上的一篇文章：Centering in CSS: A Complete Guide。以下为译文： CSS的居中是众多CSS难点的代表。为啥用CSS居中这么难呢？但是我认为这个问题其实并没有那么难啦，就是有很多种不同的方式可以达到居中的目...

实现 web 下划线的 7 种方式 - 前端 - 掘金
本文来自css-tricks，介绍了在不同的场景下实现下划线的7种方式。简介有许多种不同的方式来实现下划线，你也许还记得Crafting link underlines on Medium这篇文章。Medium也不是想做什么疯狂的事情，他们只是想让他们的文字...

26 个纯 CSS 构建的 Web 项目 - 前端 - 掘金
英文原文：26 Impressive web projects built with CSS only译者：IT程序狮译文源自：http://www.jianshu.com/p/b321d1095106 在本文中，我们将分享26个纯CSS构建地开源Web项目。...

(译)一个健壮且可扩展的 CSS 架构所需的 8 个简单规则 - 前端 - 掘金
原文地址：8 simple rules for a robust, scalable CSS architecture 原文作者：Jarno Rantanen 译文出自：掘金翻译计划译者：linpu.li 校对者：galenyuan，StarCrew...

前端常见布局方式实现 - 前端 - 掘金
武功山顶写在前面由于知识有限，有的内容可能有点小错误什么的，仅供参考参考，欢迎大佬们指正，小花在这里谢过~ 小贴士（...

【CSS 常见问题】三分钟解决 CSS 中 float 引起的父元素高度塌陷问题 - 前端 - 掘金
CSS 前言相信很多同学在网页布局过程中都用过float浮动布局，float可以让我们很方便的去布局，但是同时也带来了很多的问题，虽然现在很多人都推荐用Flex布局来替代浮动布局（不...

range滑块自定义样式，步骤详解以及实际应用 - 掘金
写在前面：本文的主要内容包括：type="range"属性介绍，修改range默认css样式以及在js中的实际应用。本文面向前端小白，写的不好之处，请多多见谅。文末有demo链接，可以自行复制到本地进行试验。相关：自定义 range r...

关于 CSS 的零碎知识点 - 掘金
写在前面：这篇文章是本人学习过程中遇到css的零碎知识点2（就是以前自己不知道的），我都记下来了，需要的朋友可以过来参考下，喜欢的可以点个赞，希望对大家有所帮助。本文的受众是前端小白，大手子可以跳过。 1.scss编译css文件使用中文注释出现乱码：在文...

(干货)css自定义 range radio select的样式滑轮，按钮，选择框 - 掘金
写在前面：之前踩坑css的时候，遇到滑轮，按钮，选择框这类型的东西，为了页面效果，总是需要自定义他们的样式，而不使用他们的默认样式。当时写的时候，我也是蛮头疼的，弄了个demo，链接在下面。对此做个总结。本文是面向前端小白的，大手子可以跳过，写的不好之处多多...

神器！解放你的双手——UI 设计稿全自动切图和标注的一些工具推荐 - 前端 - 掘金
原文收录在我的 GitHub博客 (https://github.com/jawil/blog) ，喜欢的可以关注最新动态，大家一起多交流学习，共同进步，以学习者的身份写博客，记录点滴。工欲善其事，必先利其器。前不久在掘金上看到一篇文章，前端 PS...

前端 PS 切图方法，图文详细 - 掘金
写在前面：本文主要内容是目前我所知道的切图技巧结合网上的资料，写出来分享一波。图文教程，多图！！ BB：很多人都会说，切图这个活倒底分给UI还是分给前端。虽然好的UI会给我们把图切好，但是他们切的图不一定百分之百符合我们的需求，所以我一直都觉得这是页面仔必须要...

分享一下我制作 H5 婚礼邀请函用到的技术要点 - 前端 - 掘金
前言很多网上的婚纱摄影公司，或者婚庆公司，或者一些h5制作平台，都可以做一些婚礼邀请函，但是这样的婚礼邀请函千篇一律。没有什么特色，仅仅是图片展示。在某人的强烈要求之下，我制作了一个h5婚礼邀请函（目前源码暂时不公开吧，过段时间再说）。用到了...

吹毛求疵的追求优雅高性能JavaScript - 前端 - 掘金
SpinKit 是一套网页动画效果，包含8种基于 CSS3 实现的很炫的加载动画。借助 CSS3 Animation 的强大功能来创建平滑，易于定制的动画。SpinKit 的目标不是提供一个每个浏览器都兼容的解决方案，而是给现代浏览器提供更优的技术实...

CSS 技巧（二）：形状 - 前端 - 掘金
形状本章代码比较多，可以访问仓库获取源代码。 1. 自适应的椭圆背景知识：border-radius属性的基本用法使用b...

小 Tip：margin 负值详解 - 前端 - 掘金
先看看 margin margin： CSS外补白，外边距，是从自身边框到另一个容器边框之间的距离。四个方向： ...

使用 CSS 变量（CSS Variables）来实现一个 3D 动画效果 - 前端 - 掘金
这篇文章来学习下关于CSS变量（CSS Variables）这个还在开发中的新的API，简单来了解下它的概念和一些用途。使用CSS变量（CSS Variables）这个特性来完成下图所示的一个3D旋转的功能。 CSS变量概念以及用法...

CSS 变换、过渡、动画实现案例 - 前端 - 掘金
以下所有效果的实现方式均为个人见解，如有不对的地方还请一一指出。目录方块“Z”字形运动线段围绕盒子运动饼图[动图, 固定比例，如20%] 移动端录音旋转小按钮效果实现[渐变色][初始原型] 方块“...

CSS Grid Layout 从入门到入门 - 前端 - 掘金
CSS 的 Grid Layout 已经开始在浏览器上有资词啦！可以看到在 FF 的52版本以上已经支持了，Chrome 从57开始支持，如果用 dev 版本或者 canary 版本都可以了，safari 包括10.1和 t...

使用 css3 实现圆形进度条 - 前端 - 掘金
在开发微信小程序的时候，遇到圆形进度条的需求。使用canvas绘图比较麻烦： 1、为了实现在不同屏幕上面的适配，必须动态的计算进度条的大小； 2、在小程序中，canvas的画布具有最高的层级，不易于扩展。但使用css3...

手把手教你撸出跑男动画 CSS3-Animation抽丝剥茧 - 掘金
作为一名真正的前端开发者，我们不能只关注前端逻辑部分。毕竟“水银泄地”般的页面设计和“炫酷逼真”的动画效果，是我们区别于其他程序员所特有的优势之一。尽量百分之百的还原视觉稿，为UE设计灵感和用户视觉享受架起一座桥梁：正所谓“晋帝时祭北郊，更祝版，工人削之，笔...

不简单的前端性能优化 - 前端 - 掘金
本文主要介绍 “关键渲染路径” 与“网络”两个方面的性能优化并提供 demo，篇幅较长建议电脑观看。前端优化的方面太多，本文介绍的仅仅是其中的一部分，力求涵盖 “关键渲染路径” 的方方面面，及一些不常被提到的 “网络优化” 部分。...

译：可以用什么方法清除浮动？ - 前端 - 掘金
原文链接：http://stackoverflow.com/a/1633170 根据正在生产中的设计，以下每个 clearfix CSS 解决方案都有自己的优势。 “...

rem 布局原理 - 前端 - 掘金
REM兼容性首先，在介绍 rem 之前，我们先看看 em em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置...

“自适应” 高度的 textarea 文本输入框 - 前端 - 掘金
还在不断增加中的动车高铁票写在前面那啥，在我的那个很安静的一个 CSS 群（群号：82991297）突然看到有人在问一个问题。使用 css 如何实现：textarea 如何实现高度自适应？当时看到这个问题的时候，我脑中只有一个想法，这个百度...

welogger 开发笔记 1 - react 中如何处理弹层 - 前端 - 掘金
welogger.com正在如火如荼的开发中，其中遇到的一些问题和经验在这里做一些笔记，分享给大家。也许有不准确或者还有能做得更好的地方，欢迎评论指正。 1. 背景 welogger用的react.js做的前端渲染，涉及到比较多用户交...

教你如何在 web 应用程序中使用本地文件•上传图片file✔ - 前端 - 掘金
使用在HTML5中添加到DOM的File API，现在可以让Web内容要求用户选择本地文件，然后读取这些文件的内容。此选择可以通过使用HTML ) 元素用来创建基于web表单的可交互控件."><input> 元素或...

纵向排列文字以及禁止文字选中 - 前端 - 掘金
写在前面：内容包括demo代码，应用和定义，以及参考文献，本文主要内容是本人学习过程中遇到css的零碎知识点1（就是以前自己不知道的），我都记下来了，需要的朋友可以过来参考下，喜欢的可以点个赞，希望对大家有所帮助。 writin...

[英] 使用 CSS 选择器来检验 HTML 代码 - 前端 - 掘金
检验 HTML 代码是否符合 W3C 标准，常用工具是 W3C 官方的 Markup Validation Service。这篇文章介绍了使用 CSS 一些鲜为人知的选择器来标记 HTML 中那些不符合 W3C 要求的写法。...

发布（Publish）/ 订阅（Subscribe）模式 - 前端 - 掘金
简称pub/sub，pub/sub模式是我们平时业务中经常会使用到的，sub会监听一类消息来达到pub发布的时候进行相应的逻辑处理举个例子，比如页面上有个列表，当我们点击刷新的时候要更新列表，当我们添加一个数据的数据的要更新列表，当我们删除一个...

跟着写一个 CSS 栅格布局 - 前端 - 掘金
我们常在诸如Bootstrap的前端框架中见到css栅格系统，如果仅仅为了使用栅格布局而引入一个前端框架是很不明智的行为。所以，这篇文章就是帮助你从零打造一个CSS Grids～什么是栅格系统栅格系统（CSS Grids）是一种运...

(译) 再谈 CSS 中的代码味道 - 掘金
原文地址：Code Smells in CSS Revisited 原文作者：Harry 译文出自：掘金翻译计划译者：IridescentMia 校对者：rccoder, Germxu 再谈 CSS 中的代码味道回到 2012 年，我写了一篇关于潜在 ...

Javascript 高性能动画与页面渲染 - 前端 - 掘金
No setTimeout, No setInterval 如果你不得不使用setTimeout或者setInterval来实现动画，那么原因只能是你需要精确的控制动画。但我认为至少在现在这个时间点，高级浏览器、甚至手机浏览器的普及程度足够让你有理由有条件在实...

如何用 css 实现古代人读的竖排的文字 - 前端 - 掘金
最近需要实现一个文字竖排的效果，类似下图这种效果，所以研究了一下css的writing mode，顺便翻译了一篇文章如果你没有太多时间，我就从结果开始，来点餐前小菜。你可以用一些鲜为人知的，但是很重要的而且很强大...

“等一下，我碰！”——常见的 2D 碰撞检测 - 前端 - 掘金
“碰乜鬼嘢啊，碰走晒我滴靓牌”。想到“碰”就自然联想到了“麻将”这一伟大发明。当然除了“碰”，洗牌的时候也充满了各种『碰撞』。好了，不废话。直入主题——碰撞检测。在 2D 环境下，常见的碰撞检测方法如下： ...

个人 css 纠错思路 - 前端 - 掘金
每当写完大量的样式代码的时候，因为css本身的层叠性，在观察其显示出的效果，因为某些原因可能出现了与之前设想有些出入的地方，该从那些地方如说去查找下这些问题来源。在这里，我说说自己的想法思路。不过在这之前，你需要对css属性有些...

谈谈 css3 的 transition - 前端 - 掘金
属性何其多，精通一个受益终身（在不被新时代废除的情况下）。今儿我们就来探讨一下css3的transition这个变换过渡的属性。都知道通过过渡transition，可以让web前端开发人员不需要javascript就可以实现简单的动画交互效果。过渡属性看似简...

你不知道的 CSS 秘密：margin 篇 - 前端 - 掘金
本篇讲解的是主要是BFC 可以解决的 margin 重叠问题 ,如对你有帮助，请点个赞给个鼓励，谢谢~ 先来一张W3C标准盒模型的图片. margin 属性介绍 margin 的几种使用方法,简单带过. margin : t...

前端灰度效果的实现（filter:grayscale()）兼容所有浏览器 - 前端 - 掘金
分享一个最近在工作中遇到的新需求以及解决方案，希望对开发的朋友门有帮助，鄙人能力有限，有不妥的地方还请大家多多指教。需求直接看图，需要在某种状态时将B.2模块整体置灰。一开始想直接处理所有图像，但是涉及东西太多，尤其是icon得重新切图，重新合成，工作...

【译】创建漂亮的 CSS 按钮的 10 个代码片段 - 前端 - 掘金
如果你正在寻找一些高质量的 CSS 按钮的示例，那么这篇文章一定是你的“菜”。在本文中，我们从 CodePen 上收集了 10 个独特的 CSS 按钮合集，并附有它们的代码片段，方便你将它们应用在你的 Web 项目上。网页设计师已经不必再依赖 Photosh...

flex 与 margin 之间的基情 - 前端 - 掘金
flex 与 margin 之间的基情...

解决 Chrome 中 input 自动填充时会强行设置背景色的问题 - 前端 - 掘金
方法1：box-shadow 方法2：animation...

深入理解滚动 scroll - 前端 - 掘金
前面的话前面两篇博文分别介绍过偏移大小、客户区大小。本文介绍元素尺寸中内容最多的一部分——滚动scroll 滚动宽高 scrollHeight scrollHeight表示元素的总高度，包括由于溢出而无法展示在网页的不可见部分 scro...

CSS 绝对定位 absolute 详解 - 前端 - 掘金
之前介绍过CSS浮动float详解，本篇介绍的绝对定位absolute和浮动float有部分相似性。如果能理解浮动float，对理解绝对定位absolute会大有帮助。先说absolute和float的相似处：包裹性和高度...

CSS 面试题解答 - 前端 - 掘金
问：什么是CSS reset 在不同浏览器之间，默认样式有着诸多差异和问题，而为了在不同浏览器之间具备相同的视觉效果，开发人员往往会在样式表文件中引入一段CSS代码，如http://meyerweb.com/eric/tools...

CSS3 transform 属性及应用 - 前端 - 掘金
在介绍有关transform相关的知识之前，先来讲一下transform-origin的用法以及关于<angle>角度的几种取值单位。另外，在使用时，为了兼容各个浏览器，可加上浏览器的私有前缀［－moz- -webkit -ms-］。 transf...

动态加载 / 删除 css 文件以及图片预加载 - 前端 - 掘金
最近，工作中遇到了一个比较奇葩的需求：要在一个页面（PC端）增加一个功能模块，但是这个页面在不久之后要重构，为了新增加的模块可以继续复用，必须做到这个模块的样式对页面其他模块不能造成影响，旧版页面使用bootstrap样式，新版模块只使用normalize.c...

【译】CSS Flexbox 学习指南、工具与框架 - 前端 - 掘金
Flexbox 是一种更有效的布局方式，它能更好的分配容器空间，并控制项目的对齐。虽然，掌握它的理论有些复杂，但幸运的是，我们可以借助开放的网络来学习并逐步掌握它。在本文中，我们整合了一些最佳的 Flexbox 学习资源，它们可以帮助你了解Flexb...

css-protips - 让你的 CSS 代码更加专业 - 前端 - 掘金
提示的收集，以帮助提升你的CSS技巧。对于其他大名单退房 @sindresorhus的策展的名单真棒名单. ...

各种姿势教你写手风琴式折叠菜单 - 前端 - 掘金
手风琴菜单在写后台管理页面的时候，编写折叠菜单是一个比较常见的应用场景。那么今天我们就来学习一下怎么使用各种姿势写出手风琴式的折叠菜单。写之前先看一下效果，插件来源于jQuery之家，演示效果可以点击这里折叠菜单。jquery...

[布局概念] 关于CSS-BFC深入理解 - 掘金
写在前面好记性不如烂笔头，研究了一下BFC，发现里面比较细的东西也是很多的！关于BFC，很多人可能都听说过BFC这个东西，大概知道这是个啥东西，相信很多人对此并没有一个非常细致的了解，本文预计篇幅较长，认真，耐着性子看，应该都能够比较深入的理解BFC这个概念...

一个项目的前端布局给我的思考 - 掘金
内容包括： HTML（讲述你不知道的absolute和float关系）和javascript（自己写的一段原生js实现双击切换效果）最近在一个项目中发现一个自己一直忽视的问题 position 和 float 的混用问题，position定位给我们前端开发中...

CSS 深入理解 vertical-align 和 line-height 的基友关系 - 前端 - 掘金
本文地址：http://www.zhangxinxu.com/wordpress/?p=4925 一、想死你们了几个星期没有写文章了，好忙好痒；个把月没有写长篇了，好忙好想；半个季度没在文章中唠嗑了，好痒好想。后面一栋楼有对夫妻在吵架，声音雄浑有力，交锋...

谈谈一些有趣的 CSS 题目（十五）-- 谈谈 CSS 关键字 initial、inherit 和 unset - 前端 - 掘金
开本系列，谈谈一些有趣的 CSS 题目，题目类型天马行空，想到什么说什么，不仅为了拓宽一下解决问题的思路，更涉及一些容易忽视的 CSS 细节。解题不考虑兼容性，题目天马行空，想到什么说什么，如果解题中有你感觉到生僻的 CSS 属性，赶紧去...

UI 设计师进阶技能——CSS3 之样式篇 - 设计 - 掘金
因为近期项目没有压力，主要工作就是一些涉及功能增删相关的界面的小工作，修修补补，搞个图标之类，设计师小伙伴们都懂的，很轻松，基本就是比着葫芦画瓢这样，所以有时间的话就会看看CSS3的相关知识，自己也在边学边做，并无限感慨CSS3真是太强大了，几乎可以完全告别“...

block，inline 和 inline-block 的实际应用 - 前端 - 掘金
总体概念 block和inline这两个概念是简略的说法，完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块，会单独换一行；...

web 低多边形 3d 动态交互背景生成，类似 QQ 轻聊版登录框 - 前端 - 掘金
demo1 demo2 demo3 ...

Flexbox 语法清单 - 前端 - 掘金
Flexbox Cheat Sheet displayw3.org/TR/css-flexbox-1/#flex-containers ...

【译】CSS Grid VS Flexbox：实例对比 - 前端 - 掘金
DEMO 地址：http://t.cn/RXIyh0v 示例下载地址：http://t.cn/RXIyZnb 不久以前，所有 HTML 页面的布局还都是通过 tables、floats 以及其他的 CSS 属...

Sass 快速入门 - 前端 - 掘金
由于工作需要，最近在使用Ionic3 + Angular4，发现使用CLI创建的新项目里对于CSS样式都是使用Sass，所以学习了一下Sass。这里主要记录了Sass的主要用法，省得每次使用都去翻官网。 Sass是什么？ Sass 是一款强化 CSS 的辅...

微信面试题 - 获取元素的最终 background-color - 前端 - 掘金
一、题目用JS代码求出页面上一个元素的最终的background-color，不考虑IE浏览器，不考虑元素float情况。二、题目解析 1.考察底层Java...

2017 年要去学的 3 个 CSS 新属性 - 前端 - 掘金
Feature Query, Grid Layout, Native Variable。前端的亲们你们颤抖了吗？...

深入理解 CSS 中的层叠上下文和层叠顺序 - 前端 - 掘金
by zhangxinxu from http://www.zhangxinxu.com 本文地址：http://www.zhangxinxu.com/wordpress/?p=5115 零、世间的道理都是想通的在这个世界上，凡事都有个先后顺序，凡物都有个论...

Grid 的完整介绍 - 前端 - 掘金
CSS 的 flex 特性刚推出不久，现在 grid 特性又快要出来了，感谢这些新特性，让前端开发者不用像以前那么痛苦地做页面布局了。为了更好的理解这篇博文，决定把它翻译出来。原文地址见这里：A Complet...

(译) 在 CSS 中保持斜边的角度不变 - 前端 - 掘金
原文地址：Sloped edges with consistent angle in CSS 原文作者：Kilian Valkhof 译文出自：掘金翻译计划译者：王子建 ...

CSS 方法论完全总结 - 前端 - 掘金
软件开发领域所有的工程问题，归根结底衍生自一个问题：代码量大了怎么办？ &...

如何精确控制响应式排版 - 前端 - 掘金
2014年@Jason Pamental写了一篇博客详细介绍了Web排版的缩放。@Richard Rutter在另一篇文章中介绍如何更好的表达你的排版。比如在一个Banner区，如何让文本显示的各为大气，又适合你的Web排版，如下图所示：提出的思考 ...

移动端高清屏适配方案 - 前端 - 掘金
在众多移动设备中，前端开发人员如何在不同屏幕大小，不同程度的高清屏下去百分百的还原设计稿，从来都不是一件简单的事情，需要考虑众多因素，权衡利弊，做出取舍，结合需求去选择最合适的方案。面临的问题在不同大小和高清的屏幕下：如何保证界面布局一致性：不错乱，...

移动前端自适应解决方案和比较 - 前端 - 掘金
互联网上的自适应方案到底有几种呢？就我个人实践所知，有这么几种方案：固定一个某些宽度，使用一个模式，加上少许的媒体查询方案使用flexbox解决方案使用百分比加媒体查询使用rem淘宝最近开源的一个框架和网易的框架有同工之异。都是采用rem实现一稿解决所有设置自...

(译) CSS 继承深度解析 - 前端 - 掘金
原文地址：CSS Inheritance, The Cascade And Global Scope: Your New Old Worst Best Friends 原文作者：H...

网页中实现正六边形的 N种姿势 - 前端 - 掘金
经常在别人家的网页上看到各中好看图形，其中就有正六边形和组合的蜂窝状图形。今天我们来盘点一下，网页上有哪些姿势实现这个效果姿势1css的border/css/ .lb01 { position: relative; width: 200px; ...

CSS 隐藏元素的八种方法 - 掘金
前言总括：本文详细讲述了在网页中用CSS隐藏元素的七种方法。原文博客地址：从隐藏元素谈起知乎专栏&&简书专题：前端进击者（知乎）&&前端进击者（简书）博主博客地址：Damonare的个人博客念念不忘,必有回响...

css 预处理语言的模块化实践 - 前端 - 掘金
编写css是前端工作中，一项普通而又频繁的劳动，由于css并不是一门语言，所以在程序设计上显得有些简陋。对于小型项目来说，css的量还不至于庞大，问题没有凸显，而如果要开发和持续维护一个较为大型的项目，那就需要对css进行管理和规范了，否则会发生不可挽回的后果...

全面整理 CSS3 选择器的用法 - 前端 - 掘金
0.[attribute=value] 为name等于css的元素设置样式 <body> <p name="css">Wsscat!</p> <p name=&qu...

清除浮动方法解析 - 前端 - 掘金
如果对于浮动不熟悉的同学，可以看看介绍float的文章。传送门：CSS float 我们知道，在一个父元素内如果遇到某个浮动元素，此时父元素的高度会发生塌陷。针对父元素高度塌陷的问题，现在已经有了很多的解决方案。针对每一个方案，我们来进行深度的剖析。添加空块...

7 种方法解决移动端 Retina 屏幕 1px 边框问题 - 前端 - 掘金
在之前的项目中，UI告诉我说我们移动项目中的边框全部都变粗了。原谅我的近视眼，为什么我看不出什么差距了，结果UI把他的设计稿跟我的屏幕截图跟我看，居然真的不一样！！！没有办法，只有在后面的版本中去修改了，但是要改的话，需要知道是为什么。所以查了很多资料，终于搞...

Grid 布局指南 - 前端 - 掘金
简介CSS网格布局（又称“网格”），是一种二维网格布局系统。CSS在处理网页布局方面一直做的不是很好。一开始我们用的是table（表格）布局，然后用float(浮动)，position（定位）和inline-block（行内块）布局，但是这些方法本质上是hac...

BFC 深入理解 - 前端 - 掘金
BFC 在上一篇文章中，清除浮动方法解析，我们谈及了一些使用css属性解决浮动带来的影响。但是在解决浮动带来的影响的方法中，如果细心思考，会产生如下疑问：为什么overflow可以清除浮动带来的影响？能否用其他css属性清除浮动带来的影响？种种的疑问...

CSS 高级布局技巧 - 前端 - 掘金
随着 IE8 逐渐退出舞台，很多高级的 CSS 特性都已被浏览器原生支持，再不学下就要过时了。用 :empty 区分空元素兼容性：不支持 IE8 Demo 假如我们有以上列表： <div class="item">a&l...

Vue.js 2.0 迁移指南 - 前端 - 掘金
前言自vue 2.0 发布之后，就有将项目迁移到 2.0 的计划。对于一个不算小的项目，这样的工作量是巨大的，往往伴随着很多坑要踩。老实说，迁移 2.0 将导致项目的改动不少于 250 处。下面我会把迁移带来的一些问题及注意事项列出来，以防走弯路。注意...

把简单做好也不简单-css水平垂直居中 - 掘金
44年前我们把人送上月球，但在CSS中我们仍然不能很好实现水平垂直居中。 .md-warp{ width: 400px; height: 300px; max-width: 100%; ...

CSS Grid 布局这样玩_CSS3 Grid Layout, Grid, Layout, CSS3 教程_w3cplus - 前端 - 掘金
编辑推荐：掘金是一个高质量的技术社区，从 CSS 到 Vue.js，性能优化到开源类库，让你不错过前端开发的每一个技术干货。点击链接查看最新前端内容，或到各大应用市场搜索「掘金」下载APP，技术干货尽在掌握中。自从去年下半年开始，CSS Gri...

一组有趣的 slide 效果实现 - 前端 - 掘金
最近重新写了 Ghost-theme 的主题。其中主要是取消了Icon-font，改为了SVG Sprite 。其次非常重要的板块首屏的Slide 和导航重新设计了。先看下具体的效果吧: 视频无...

CSS揭秘之形状 - 掘金
一.自适应的椭圆问题：我们肯定都注意到过，我们给一个正方形元素添加一个足够大的border-radius（指定大于正方形元素边长一半的半径），就可以使其变成一个圆形(如图1-1.png)。示例： width: 200px; height: 200px...

CSS视口单位:快速入门 - 掘金
翻译自CSS Viewport Units: A Quick Start。此文章简单介绍了视口单位及其应用，用于提升大家css知识的广度单位意义 CSS中有四个基于视口单位，分别为vh、vw、vmin和vmax。视口高度（vh）- 这个单位表示视口的高...

CSS 揭秘之多重边框 & 连续的图像边框 - 前端 - 掘金
1.多重边框我们可以通过使用border-image来写一个多重边框，或使用多个元素来模拟多重边框，不过我们有更好的办法来制作一个多重边框，那就是使用box-shadow的第四个参数（称为扩张半径）来完成一个多重边框的制作，肯...

单词太长导致自动换行，出现空白区域。——word-wrap和word-break - 掘金
写在前面：在写页面的时候，偶尔有时会遇到下图这两种情况，一种是单词过长时会溢出div，一种是直接换行，导致出现空白区域。这两个情景就需要word-wrap、word-break这两个属性出场来解决了。闲话不扯了，本文主要内容有：word-wrap和word-...

Flexbox 语法清单 - 前端 - 掘金
Flexbox Cheat Sheet displayw3.org/TR/css-flexbox-1/#flex-containers ...

你知道渐进增强和优雅降级吗？ - 掘金
写在前面：在前端开发的过程中，如果有注意的话，发现有些写css3属性时，兼容性的写法顺序不太一样，比如transition属性，有些把transition放在前面有些是放在后面，这就引出了两个概念：优雅降级和渐进增强。写法栗子： .transition {...

【译】CSS 很棒，只是真的太难了 - 前端 - 掘金
原文地址：CSS is Fine, It’s Just Really Hard 原文作者：Jordan Scales ...

如何通过 HSB 颜色模式构建夜间模式 - 设计 - 掘金
中国睡眠研究会发布的《2017 年中国青年睡眠现状报告》显示，大约 90% 的人在睡前离不开电子产品。不知道大家有没有感觉到普通的亮色界面会让我们在夜间使用的时侯感到刺眼，长时间使用会感觉眼睛疼痛，对眼睛的伤害也非常大。（当然睡前不玩手机是...

解读 viewport—网页自适应移动 app 神器 - 前端 - 掘金
写在前面：viewport指的是是用户网页的可视区域，查了许久，遗憾的是近一两年几乎没有高质量的解析viewport的文章，本文内容是参考大牛，对内容进行了重新排版，以及对重点内容进行标注、精简，加上些许的个人理解形成的。有兴趣的朋友，可以参考一下。 ...

DOM 学习框架——用 DOM 的思想学习 DOM 知识 - 前端 - 掘金
自己总结的关于 DOM 的知识，对于初学者来说，比较受用。在学习过程中，应该时刻去总结和归纳相关知识，罗列出来，以便巩固学习。...

《CSS 揭秘》中的 CSS 技巧 - 前端 - 掘金
“你瞅啥”“瞅你咋地” 本文旨在记录《CSS揭秘》这本书中出现的CSS经典技巧 1. 半透明边框假设我们想给一个容器设置一层白色背景和一道半透明的边框...

html 不随放大缩小而变形——initial-scale - 前端 - 掘金
写在前面：很惭愧我都在做jq了，关于手机端页面变形，直到今天早上才知道问题出在哪里？之前写了好多css页面用谷歌的F12查看手机端的页面，效果如下面的图，然后我一直以为我电脑的谷歌F12出问题了，直到今天在启宸师兄的帮助下才明白。下面进入正文：一直以为是谷歌F...

移动 web 1px 边框解决方案 - 掘金
在移动端web页面开发中，为了使css中使用的尺寸与设计稿一致，通常会采用 rem 单位配合 lib-flexible 来实现移动端的适配，在IOS设备上 flexible.js 会根据设备的分辨率动态的调整 viewport 的 width 和 scale ...

初学 Canvas 仿知乎登录页面动画 - 前端 - 掘金
写了一个demo 具体git地址 https://github.com/sunweiling/zhihu-canvas 因为做成动图以后压缩的问题会看不到线，所以就把颜色都改成不透明的了 demo里面还是跟知乎里的一样。主要的知识点 ...

文本动画, 几行代码页面效果瞬间就提升了 - 前端 - 掘金
animate-text 文字动画和数字动画 animate text 查看DEMO...

深入浅出 GreenSock 动画：SVG Logo 动画 - 前端 - 掘金
开一个新系列，主要是使用GreenSock来编写和实现动画效果。关于GreenSock的基础知识，可以看看我整理的GreenSock简明教程。这个效果也是在codepen上看到的，拿来分析下实现思路，顺便熟悉下GreenSock的...

Medium 的 CSS 方案简直完美 - 前端 - 掘金
英文：fat 译文：伯乐在线 - 凝枫链接：http://hao.jobbole.com/mediu-css/ 点击 → 了解如何加入专栏作者不管是气质、穿着还是行为，我总是想要做到最好。就算是我扔进垃圾桶的垃圾...

高性能的视差动画【译】 - 掘金
高性能的视差动画原文地址： https://developers.google.com/web/updates/2016/12/performant-parallaxing原文作者： Paul Lewis译文作者：接灰的电子产品爱也好，恨也好，视差效果...

Animista: 交互地展示一系列拿来即用的 CSS 动画 - 前端 - 掘金
Animista: 交互地展示一系列拿来即用的 CSS 动画...

CSS 自定义属性 — 基础篇 - 前端 - 掘金
这是 CSS 自定义属性系列文章的第一篇，在这篇文章中我将快速介绍什么是自定义属性以及它们的语法，并在后续文章中详尽地分析 CSS 自定义属性，各位可以持续关注。你大概已经听说过 CSS 自定义属性（也被称为 CSS 变量），可能你是从 Google 发表...

(译) 几张 GIF 动图让你看懂弹性盒模型（Flexbox）如何工作 - 前端 - 掘金
原文地址：How Flexbox works — explained with big, colorful, animated gifs 原文作者：Scott Domes 译文出自：掘金翻译计划译者：linpu...

CSS3 新布局方式 - 弹性盒模型 - 前端 - 掘金
一、概念弹性盒模型是css3的一种新的布局方式，是一种当前页面需要适应不同的屏幕大小及设备类型时确保拥有恰当的行为的布局方式。二、目的引入盒模型的目的是提供一...

CSS background 深入理解及应用 - 前端 - 掘金
Background background属性的简写用法, 常见背景属性的理解以及神奇的渐变色。目录 background属性的简写用法 ...

Grid 布局完全指南 | CSS-Tricks - 前端 - 掘金
简介 CSS 栅格布局 (亦称 "Grid")，是一个基于栅格的二维布局系统，旨在彻底改变基于网格用户界面的设计。CSS 一直以来并没有把布局做的足够好。刚开始，我们使用 tables，后来是 floats，positioning 和 inline-block...

从 sass 到 PostCSS - 前端 - 掘金
原文链接：https://tylergaw.com/articles/sass-to-postcss 译者：Icarus 邮箱：xdlrt0111@163.com 多年来我一直使用Sass.但是最近我想要使用PostCSS和它的cssnext插件来尝试处理样...

移动端布局解决方案 + 神器 - 前端 - 掘金
godcss 移动端布局终极解决方案+神器--- 让移动端布局开发更加容易 http:/www.github.com/godcss/ 介绍 godcss不是一个库，也不是一个框架。它是一个移动端布局开发解决方案。使用godcss可以...

你必须记住的 30 个 CSS 选择器 - 前端 - 掘金
So you learned the base id, class, and descendant selectors—and then called it a day? If so, you're missing out on an enormous lev...

移动端适配页面快速搭建 - 掘金
遥想去年入前端坑的时候，就很快遇到了移动端页面的开发，天(er)真(bi)的我立马上去量设计稿，然后撸起袖子就是干！可是打开调试一看乱套了，先不说布局上的问题，就是大小看起来也不太对啊，太大了！然后就去问老司机，他说尺寸你要除以2才行，我心里挺郁闷的，为啥啊。...

2017 年要去学的 3 个 CSS 新属性 - 前端 - 掘金
Feature Query, Grid Layout, Native Variable。前端的亲们你们颤抖了吗？...

【译】Flexbox in CSS - 前端 - 掘金
偶然看到的一个项目，并了解到一些信息：译者针对开源的《可视化 CSS References》文档：https://github.com/jgthms/css-reference 正在进行翻译工作，目前完成了 Flexbox 部分的内容。而剩下的内容还在陆续进...

css 盒模型和定位扫盲 - 前端 - 掘金
原文：原文链接转载请标明出处 css盒模型与定位说到css的盒子模型和定位相信大家一定都听说过，因为它们是css中的基础，同时也是难点，这篇文章的作用在于基础知...

CSS 技巧（二）：形状 - 前端 - 掘金
形状本章代码比较多，可以访问仓库获取源代码。 1. 自适应的椭圆背景知识：border-radius属性的基本用法使用b...

小 Tip：margin 负值详解 - 前端 - 掘金
先看看 margin margin： CSS外补白，外边距，是从自身边框到另一个容器边框之间的距离。四个方向： ...

让你的 CDN 费用省 50% 以上！图片瘦身的正确姿势 - 阅读 - 掘金
七牛 CDN 提供图片自动瘦身功能现已正式上线，已创建的域名默认为「关闭」状态。为域名快速开启图片自动瘦身功能，具体的操作指南如下：新建域名时开启「图片自动瘦身」功能为已创建的域名开启「图片自动瘦身」功能新建域名时开启「图片自...

你知道怎么用原生 JS 设置样式么 - 前端 - 掘金
用JS来动态设置CSS样式，常见的有以下几种 1. 直接设置style的属性某些情况用这个设置 !important值无效如果属性有'-'号，就写成驼峰的形式（如textAlign）如果想保留 - 号，就中括号的形式...

手机端页面自适应解决方案—rem 布局进阶版（附源码示例） - 前端 - 掘金
一年前笔者写了一篇《手机端页面自适应解决方案—rem布局》，意外受到很多朋友的关注和喜欢。但随着时间的推移，该方案已然过时，故为大家介绍一个目前我极力推荐使用的，更加完美的方案——rem布局（进阶版） ...

50 + 个有趣的 css 属性 - 阅读 - 掘金
前言本文内容主要翻译自Let’s Look at 50+ Interesting CSS Properties & Values，相比原文略有增删修改。当我们面对一些需求的时候可能会问自己能不能只使用 css 完成它，而不用 javas...

web 前端之 base.css - 前端 - 掘金
意义统一各个浏览器差异、统一团队开发起始标准、弥补浏览器的“缺点”、提供频繁使用的原子类名。 ...

CSS Background 属性详解 - 前端 - 掘金
Background background属性的简写用法, 常见背景属性的理解。目录 ...

CSS Background 之神奇渐变色 - 前端 - 掘金
渐变图像利用CSS3新增的 linear-gradient() repeating-linear-gradient() radial-gradient() repeating-radial-gradient() 属性, 可实现各种意想不到的渐变图像。各...

详解 CSS 居中布局技巧 - 前端 - 掘金
水平居中元素：通用方法，元素的宽高未知方式一：CSS3 transform .parent { position: relative; } .child { position: absolute...

(译) 如何书写整洁的 CSS 代码？只需十步！(一) - 前端 - 掘金
原文地址：How to Write Clean CSS in 10 Simple Steps Pt1 原文作者：Alex Devero ...

(译) CSS 继承深度解析 - 前端 - 掘金
原文地址：CSS Inheritance, The Cascade And Global Scope: Your New Old Worst Best Friends 原文作者：H...

CSS3 实现文字流光渐变动画 - 前端 - 掘金
来自百度前端技术学院的实践任务：有趣的鼠标悬浮模糊效果，参考：http://ife.baidu.com/course/detail/id/14，用CSS3实现了一下，顺便复习下CSS的基础。 ...

记录一些前端的知识点 (一) - 前端 - 掘金
想学习前端或编程知识欢迎关注专栏：敲代码，学编程 - 知乎专栏一、W3C 标准盒模型和 IE 盒模型区别：1. W3C 标准盒模型：盒子的高宽是由盒子的内容区仅由 width, height 决定的，不包含边框，内外边距。2. IE 盒模型：在 IE 盒模型中...

CSS3 transform 理解与应用 - 前端 - 掘金
在介绍有关transform相关的知识之前，先来讲一下transform-origin的用法以及关于<angle>角度的几种取值单位。另外，在使用时，为了兼容各个浏览器，可加上浏览器的私有前缀［－moz- -webkit -ms-］。 ...

CSS 之原来你是这样子的: first-child - 掘金
前言写这篇文章的目的，一方面是纠正自己一直以来对这个伪类的误解(请看下面的代码)和更好的理解浏览器对:first-child解析和渲染机制，另一方面是希望通过这篇文章，能够让更多的新人深刻理解这个知识点。注：first-child是CSS2的一个伪类(对于想...

前端工程师需要明白的「像素」 - 前端 - 掘金
场景：人物：前端实习生「阿树」与切图工程师「玉凤」事件：设计师出设计稿，前端实现页面玉凤：树，设计稿发给你啦，差那么点像素，就叼死你┏( ￣へ￣)=☞阿树：_{(>_<)}毛问题噶...

深入了解 CSS 字体度量，行高和 vertical-align - 前端 - 掘金
编辑推荐：掘金是一个高质量的技术社区，从 CSS 到 Vue.js，性能优化到开源类库，让你不错过前端开发的每一个技术干货。点击链接查看最新前端内容，或到各大应用市场搜索「掘金」下载APP，技术干货尽在掌握中。 line-height和...

通过动图形象地为你介绍 Flexbox 是如何工作的（二） - 前端 - 掘金
作者：Scott Domes 编译：胡子大哈翻译原文：http://huzidaha.com/posts/detail?postId=58acfdc6204d50674934c3aa 英文原文：https://medium.freecodecamp.c...

CSS 中的垂直居中大法 - 前端 - 掘金
我们都清楚元素相对其父级元素水平居中展示的方法：对于inline 的元素，我们都会想到为其父级元素设置tex-align : center。对于block 元素，我们会设定其 margin: 0px auto。然而，垂直居中的实现方法，并没有这么简单，以下列出...

前端面试经典问题：CSS 中居中的几种方式 - 前端 - 掘金
作为面试常客，学会这些，面试多点把握，同学间逼格升高周五，老大说他面试了一个问题，是css居中的问题，然后我们在这边就讨论了一番，周末嗨玩，尾巴上想起这件事，特来总结，希望能帮助到求职和学习的朋友！参考了这篇文章，快速传送门内容都是我手敲实践过的可靠！ ...

【译】CSSOM 介绍 - 前端 - 掘金
原文链接：点击作者：Patrick Sexton 什么是CSSOM？ CSSOM是CSS Object Model的缩写大体上来说，...

viewport 最佳实践 - 掘金
移动端开发有各种适配方案，有淘宝的，网易的...,但各种方案都会有各自的问题和开发难度；今天个人在手机端实测可以使用的最佳配置产生了，页面UI设计和前端开发完全一致，开发效率和pc时代一致；无需rem,lesss，sass,无需关注vw,vh的兼容，只要知道...

小而合理的前端理论：rscss 和 rsjs - 前端 - 掘金
在前端开发中，我们会尝试去定一些规则和约定，来让项目质量更高，更易于维护。而对于这些规则和约定，我们也会希望它内容简单，容易理解。 rscss和rsjs是一套比较新，也比较小巧的前端开发规则和约定，其中rs代表Reaso...

pointer-events，一个神奇的 css 属性 - 前端 - 掘金
搞前端的朋友们应该听说过这个属性吧。每年圣诞节的时候，许多网页上都会挂出一个雪花飘落的特效增加一些节日气氛。有一些是用flash实现的，也有用HTML+js实现的。当时就很好奇为何在页面z轴最上层增加了一个层却完全不会影响下面元素的任何事件响应。简直是前端黑科...

CSS background 深入理解及应用 - 前端 - 掘金
Background background属性的简写用法, 常见背景属性的理解以及神奇的渐变色。目录 background属性的简写用法 ...

翻译计划 - 浅谈 PostCSS - 前端 - 掘金
CSS的发展，像所有的语言一样，是一个不断迭代的过程。出处原始链接：An Introduction To PostCss作者：Drew Minns译者：I...

瀑布流式布局 (Waterfall Layout) 的两种常用实现方式 - 前端 - 掘金
瀑布流式布局 (Waterfall Layout) 介绍什么是瀑布流布局？直接到 ...

CSS3 动画函数 - 前端 - 掘金
多时候我们可能经常写动画样式的过渡效果，这里面的过渡样式我们可能经常使用比较熟悉的 ease linear ease-in 等，其实它还有一个定义函数，CSS3 贝尔赛曲线 cubic-bezier。这个函数里面可以定义一些过渡效果。当然更多复杂的动画可以借助...

(译) 如何书写整洁的 CSS 代码？只需十步！（二） - 前端 - 掘金
原文地址：How to Write Clean CSS in 10 Simple Steps Pt2 原文作者：Alex Devero ...

谈谈一些有趣的 CSS 题目（十二）-- 你该知道的字体 font-family - 前端 - 掘金
开本系列，谈谈一些有趣的 CSS 题目，题目类型天马行空，想到什么说什么，不仅为了拓宽一下解决问题的思路，更涉及一些容易忽视的 CSS 细节。解题不考虑兼容性，题目天马行空，想到什么说什么，如果解题中有你感觉到生僻的 CSS 属性，赶紧去...

simple.css：一个简单暴力的 CSS resets - 前端 - 掘金
A simple to CSS resets 简介一个简单的CSS重置。抛去冗余，追求跨...

sass-svg 一个内联 SVG 的 SASS 库 - 前端 - 掘金
一、CSS内联 SVG 一直觉得内联 SVG 是 HTML 的延伸，但是内联 SVG 往往会造成HTML结构的臃肿。于是笔者尝试着把 SVG 移植到 CSS 中，如下： background: url(...

关于CSS一些细节问题 - 掘金
本文是2016年的最后一篇文章，主要是将一些CSS细节问题整理一下。 background-position取值为百分比的计算方式 margin相邻折叠问题 position的absolute和relative定位top、left、right、bottom问...

编写 css 的一些建议 - 前端 - 掘金
javascripty已经走上工程化的道路了，各种mvm,mvvm框架已经让人目不暇接了，这里就不讨论js了。我来讲下我在实际工作中编写CSS的一些经验吧，当然很多人也总结过这样的经验，我说的肯定没有哪些大牛写的好，我只是简单的把自己的工作经验拿出来与大家分享...

[sass 基础] .sass 和 .scss 区别 - 掘金
作者：滴滴公共前端团队 - 小春前言：最近我们开源的小程序脚手架 - miniapps (A useful tool for developing webchat apps)，它其中提供了 css 预编译的能力，支持 sass、st...

(译) 如何书写整洁的 CSS 代码？只需十步！(一) - 前端 - 掘金
原文地址：How to Write Clean CSS in 10 Simple Steps Pt1 原文作者：Alex Devero ...

2016 年 CSS 库、框架和工具新生榜 TOP 50 - 前端 - 掘金
CSS 于 2016 年发布的开源项目，其产量之大超出人们的预料，但纵观 CSS 在过去几年的巨大变化与快速发展，此结果的出现似乎又在情理之中。这些 CSS 库、框架和工具的建立不仅给我们提供了学习的视角，更给我们的工作与生活带来了便利。本文精选了 50 款...

CSS 如何实现 "一行水平居中，两行就左对齐" - 前端 - 掘金
在这里首先感谢宇飞朋友一直以来的支持，当《横屏仅仅只是通过media判断landscape吗?》这篇发了之后，又一次收到他的打赏，说实在话，虽然并不是很多的金额，但是，我心里感觉实在不太好意思，毕竟公众号里很多内容我都是写得很随意。其他不多说了，这次的内容主要...

知乎网页上屏幕截图功能的实现 - 前端 - 掘金

背景最近注意到知乎的屏幕截图反馈功能，感觉非常不错。也不知道什么时候开始增加的这个功能：简单说明一下：点击知乎页面右下角的反馈按钮，弹出反馈弹窗窗口中会显示当前页面的截图，并且可以在上面...

(译) 使用 WebSocket 和 CSS3 创造魔法 - 前端 - 掘金
原文地址：Making Magic with WebSockets and CSS3 原文作者：Hélio Dolores ...

详解 CSS 居中布局技巧 - 前端 - 掘金
水平居中元素：通用方法，元素的宽高未知方式一：CSS3 transform .parent { position: relative; } .child { position: absolute...

【科普文】二维码的[生成]和[扫码] - 掘金
作者：孙辉，美团金融前端团队成员。15年毕业加入美团，相信技术，更相信技术只是大千世界里知识的一种，个人博客: https://sunyuhui.com 最近这段时间，团队在做的业务主要和二维码相关，在做的过程中，发现不管是自己还是团队里其他同学，都对二维码...

CSS 动画之——transition - 前端 - 掘金
CSS transitions 在改变CSS属性的时候，transitions提供给了开发者一共方式去控制动画的速度。通常来讲，属性改变所产生的影响是立刻生效的，举个例子： .img { ...

H5 动画开发快车道 - 前端 - 掘金
janilychen ...

CSS 的 clip-path - 前端 - 掘金
在Web网页中主要是以矩形分布的。而平面媒体则倾向于更多不同的形状。造成这种差异的原因是因为缺少合适的工具去实现我们平面媒体中的内容。这也就造成了很多设计师的创意发挥，就算是有创意，前端实现也将付出巨大的开发成本。虽然CSS Shapes Module L...

关于 HTML 中 meta 标签的理解和总结 - 前端 - 掘金
之前学习前端中，对meta标签的了解仅仅只是这一句。 " title="" data-original-title="复制"> ...

『REM』手机屏幕高清适配方案 - 前端 - 掘金
『学而不思则罔，思而不学则殆。』前一篇『了解真实的『REM』手机屏幕适配』中，只考虑了屏幕宽高和font size对手机屏幕适配的影响。没有处理DPR做『高清适配』。原来采用的1px方案，在开发中还是感觉不太直接。所以在学习了淘宝的『flexible』后，结合...

来自网易云音乐的脑洞，带尖角的 div...... - 前端 - 掘金
很多时候最不能相信的就是你的眼睛。今天在网易云的网页版听歌，话说Steve Vai的曲子永远是这么让人揣摩不透，不过我还时更喜欢老Joe，咦，跑题了··· 大家可以看到评论输入框和回复框，上面都有个小尖角，实现的方式有很多，我一般是用border来做，只...

【Web 动画】SVG 实现复杂线条动画 - 前端 - 掘金
酷炫的 SVG 线条动画入门文章，用生动的示例带你走入 SVG 的世界。...

直播类 App 项目开发实战（原理篇） - iOS - 掘金
本文作者：伯乐在线 - View 。未经作者许可，禁止转载！欢迎加入伯乐在线专栏作者。前言：每个成功者多是站在巨人的肩膀上！在做直播开发时碰到了很多问题，在收集了许多人博客的基础上做出来了成功的直播项目并做了整理，并在最后奉上我的全部代码。其中采用博...

比较全面的 Git 学习资料整理 - 工具资源 - 掘金
这整个 Repository 是关于分布式版本管理工具 Git 及托管商 Github 的使用，大部分都是网友写的内容，在这里只是做一个资源的汇总和合理的安排，希望能成为最好的学习 Git 的资源，从开始入门使用，到慢慢的提高，再到理解各种原理，希望能够达成这...

我如何用前端技术得到 XXOO 网站的 VIP - 前端 - 掘金
讲解素材网页如图，这里只是说明整个网站的一些技术点，所以不该看的地方我都打上马赛克了，让我们揭开这些网站的整个前端工作原理首先刚进去的时候显示一堆乱七八糟的东西，点进去其中一个页面，下面各种虚假评论，然后每隔几秒钟弹出第几几几个会员充值成功，我们...

全面整理 CSS3 选择器的用法 - 前端 - 掘金
0.[attribute=value] 为name等于css的元素设置样式 <body> <p name="css">Wsscat!</p> <p name=&qu...

HTML5 Canvas玩转酷炫大波浪进度图 - 掘金
如上图所见，本文就是要实现上面那种效果。由于最近AlloyTouch要写一个下拉刷新的酷炫loading效果。所以首选大波浪进度图。首先要封装一下大波浪图片进度组件。基本的原理是利用Canvas绘制矢量图和图片素材合成出波浪特效。本文的代码你可以在这里htt...

CSS 魔法 - 前端 - 掘金
趁着周五有空，将《css揭秘》这本书快速的阅读了一遍，下面将个人觉得有趣的CSS分享一下。实例地址（分别对应着下面的例子）：神奇的CSS半透明边框background-clip属性的默认值是border-box，表示背景被裁剪到边框盒。另外两个参数：paddi...

如何使用CSS3实现一个3D相册 - 掘金
CSS3系列我已经写过两篇文章了，在这贴出链接，感兴趣的同学可以看一下CSS3初体验之奇技淫巧，CSS3 3D立方体效果－transform也不过如此第一篇主要列出了一些常用或经典的CSS3技巧和方法；第二篇是一个用CSS3实现的立方体实例，详细讲解了3D旋...

有趣点赞效果 Android - Android - 掘金
ThumbUp A nice thumb up control 点赞还可以这么玩，原产地dribbble Preview Gradle compile 'com.ldoublem.thumbUplib:ThumbUplib:0.1&#0...

让图片爆炸起来！ - 前端 - 掘金
DEMO访问地址：https://bupt-hjm.github.io/BoomGo/ 插件及使用方法地址： https://github.com/BUPT-HJM/BoomGo 动画： 1.参考JQuery，支持链式调用(fu...

用 canvas 画一轮明月，夜空与流星 - 前端 - 掘金
今天是中秋节，于是突发奇想，欸不如用canvas来画一画月亮吧。于是一副用canvas画出的星空就这样诞生了。 Demo在这里我用了ES6语法，星星，月亮和流星都单独写成了一个module。于是我把js一共分成这四个文件：main.js, Moon.js,...

酷炫的轮番效果是如何实现的 - 前端 - 掘金
关于轮番插件，网上已经有N多种了，比如：swiper、SuperSlide等，因此我也不打算完整的开发一个，这里简单的搞一个slide3d，便于介绍轮番的实现原理。点击这里看实例：简单轮番例子可到Github上下载：https://github.com/Iro...

移动端适配方法合集 - 前端 - 掘金
首先我先说两个概念，第一，响应式：一个页面在不同尺寸的浏览器中不同的表现；第二，自适应：一个页面在任何尺寸浏览器下表现一致.这里只说自适应。 1.简单粗暴型 zoom方式： <meta content="width=device-...

CSS 技巧（二）：形状 - 前端 - 掘金
形状本章代码比较多，可以访问仓库获取源代码。 1. 自适应的椭圆背景知识：border-radius属性的基本用法使用b...

CSS 中一个冒号和两个冒号有什么区别？ - 前端 - 掘金
《小分享》~ FED新手必备…...

CSS writing-mode 的特别技巧 - 前端 - 掘金
原文地址：CSS Writing Mode 本文已获得原作者 Ahmad Shadeed 的授权译文出自：掘金翻译计划译者： huanglizhuo 校对者：Kulbear , shixinzhang 最近在 Opera inspector 中编...

聊一聊这些常见而且实用的 css 技巧 - 前端 - 掘金
前言生活需要总结，需要不断地发现自己的缺陷然后找到好的方法，改之。古人说好记性不如烂笔头，人终归是会遗忘一些事情的，哪怕它曾经深深地印在你的脑海，久久挥之不去，经过时间的洗涤，一切都会回到最初的那个时刻，还记得你上次写的令自己引以为豪的css样式吗？ 😄...

巧妙使用 transform 实现环形路径平移动画 - 前端 - 掘金
最近在CSS Secrets一书看到了这样一节：让一个元素沿环形路径平移。这是一个css动画的问题，但却没有看上去那么简单，其关键点是元素是平移的，也就是说，元素自身并不发生旋转，只是稳定地沿着一个环形的路径移动，像这样：在书中作者Lea Verou已经给...

CSS的垂直居中和水平居中总结 - 掘金
前言总括： CSS居中一直是一个比较敏感的话题，为了以后开发的方便，楼主觉得确实需要总结一下了，总的来说，居中问题分为垂直居中和水平居中，实际上水平居中是很简单的，但垂直居中的方式和方法就千奇百怪了。原文地址：CSS居中小谈知乎专栏&&am...

CSS3 object-fit 和 object-position - 掘金
最近一直忙于将JavaScript学习的笔记整理成电子书，也没什么空闲时间写新的文章。趁着今天有点空闲，决定再来折腾一下CSS3中的两个属性：object-fit和object-position。这两个奇葩的属性是搞毛的呢？其实它们是为了处理替换元素（rep...

CSS3 Flexbox 属性可视化指南 - 前端 - 掘金
愚人码头注： Flexbox 布局（国内很多人称为弹性布局）正式的全称为 CSS Flexible Box布局模块，它是CSS3新增的一种布局模式。它可以很方便地用来改善动态或未知大小的元素的对齐，方向和顺序等等。flex容器的主要特性是它可以调整其子元素...

CSS Reference - 前端 - 掘金
一份免费的 CSS 视觉手册，囊括了最主流 CSS 属性。特色是有可视化的案例呈现，方便理解呈现效果。...

sass 笔记 - 1|Sass 是如何帮你又快又好地搞定 CSS 的 - 前端 - 掘金
Sass学习笔记持续整理中，开篇不讲怎么安装，sass是什么，这些搜索引擎会告诉你，我们从sass的作用开始讲起，知道sass用来干什么，有什么作用，我们才能相信用sass的好处，并且时时刻刻想着sass的设计思维——Don't Repeat Yourself...

谈谈 CSS 预处理器 - 前端 - 掘金
在写CSS的时候我们会发现，为了兼容浏览器等原因，我们往往需要写很多冗余的代码，CSS预处理器就是为了解决CSS的这些问题，简化CSS代码的编写。目前最主流的CSS预处理器是LESS、SASS和Stylus，最近花了几天时间学习并使用了它们，于是就想对这三个...

css - 收藏集 - 掘金

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

h5

前端资料

前端

前端攻城狮

我爱编程

兼容性问题

技术文档

前端学习