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/zhongxia24… 一、背景 挺早就听说过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/po… 英文连接：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…博客长期更新，喜欢的朋友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 文档排版中用到的的左对齐、右对齐和居中对齐，然而很快就失望的发现…
16种方法实现水平居中垂直居中 – 掘金
熟悉水平居中和垂直居中的方法, 不为别的, 就为用的时候能够信手拈来. 下面直接步入正题.原文：16种方法实现水平居中垂直居中 水平居中 1) 若是行内元素, 给其父元素设置 text-align:center,即可实现行内元素水平居中. 2) 若是块级元素,…
对比学习 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/optimisin… @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…. 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代码。）： …
使用 css 3 制作长投影 Long Shadow – 前端 – 掘金
在flat design(扁平化的设计)中，Long Shadow （长投影）被看着屡试不爽的设计技能。比如下面这张，非常经典的长投影设计: 摄影师选择长投影通常是给图片带来戏剧效…
[设计文章：都说是 2016 年国外最火 55 套 PS 实用教程
设计 – 掘金](https://juejin.im/entry/58b6d…
今夜，西元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 – 掘金](https://juejin.im/post/585232…
作者：滴滴公共前端团队 – 小春 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 属性 – 前端 – 掘金](https://juejin.im/entry/577e0…
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的position属性能刷掉一半的人这是啥情况…… 其实这问题我本来打算的是可以顺着一路扯到normal flow、containing block、bfc、margin …
CSS：Grid 布局 – 前端 – 掘金
CSS Grid布局，是一个基于网格的二维布局系统，目的是用来优化用户界面设计。 不过，目前任何浏览器默认是不支持Grid布局的，但幸运的是，我们可以设置Chrome、Opera或者Firefox的特殊标志来启用它。在Chrome或Opera中，在地址栏中输…
详解 CSS 居中布局技巧 – 前端 – 掘金
水平居中元素： 通用方法，元素的宽高未知 方式一：CSS3 transform .parent { position: relative; } .child { position: absolute…
前端优化不完全指南 – 前端 – 掘金
篇幅可能有点长，我想先聊一聊阅读的方式，我希望你阅读的时候，能够把我当作你的竞争对手，你的梦想是超越我。你想超越我，就得了解我懂什么对吧，好，开始阅读~ ~ 哈哈哈 ~ ~ ~ 历时144000000毫秒出山的前端优化篇，若你问我有什么感悟？那我告诉你，看到毫…
详解 CSS 七种三栏布局技巧 – 前端 – 掘金
三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在开发十分常见，那么什么是三栏布局？比如我打开某东的首页： 映入眼帘的就是一个常见的三栏布局：即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽度自适应。 下面围绕的这样的目的，即左右…
CSS 技巧：使你的 CSS 更加专业 – 前端 – 掘金
一个帮你提升 CSS 技巧的收藏集。 对于其他收藏集合可以查看 @sindresorhus 创建的收藏集合 Awesome Lists. 目录 专业技巧 支…
关于 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 代码，助你动画开发一臂之力。…
16种方法实现水平居中垂直居中 – 掘金
熟悉水平居中和垂直居中的方法, 不为别的, 就为用的时候能够信手拈来. 下面直接步入正题.原文：16种方法实现水平居中垂直居中 水平居中 1) 若是行内元素, 给其父元素设置 text-align:center,即可实现行内元素水平居中. 2) 若是块级元素,…
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有些属性容易忘记，半天不写就要去查api，有时候api还不好使，于是还是记下来以后方便用，后续会慢慢补充进来的。 Github: https://github.com/asd0102433…博客长期更新，喜欢的朋友star一下 outline…
谈谈一些有趣的 CSS 题目（十三）– 巧妙地制作背景色渐变动画！ – 前端 – 掘金
开本系列，谈谈一些有趣的 CSS 题目，题目类型天马行空，想到什么说什么，不仅为了拓宽一下解决问题的思路，更涉及一些容易忽视的 CSS 细节。 解题不考虑兼容性，题目天马行空，想到什么说什么，如果解题中有你感觉到生僻的 CSS 属性，赶紧去…
基于 vw 等 viewport 视区相对单位的响应式排版和布局 « 张鑫旭 – 鑫空间 – 鑫生活 – 前端 – 掘金
by zhangxinxu from http://www.zhangxinxu.com/wor… 本文全文转载需购买版权(500¥)，摘要引流则免费，具体参见这里 一、什么是视区相对单位？ 就是相对于浏览器viewport尺寸的单位…
CSS 选择器整理 – 前端 – 掘金
很多人都觉得CSS特别简单，但其实真正写好CSS并不容易，CSS的每一点其实内容都很多，就拿选择器来说，CSS选择器大概可以分为五类： …
2015 年学习 CSS3 的 15 个高级免费教程 – 前端 – 掘金
如果你想学习创建炫酷的css3效果，这些由专业人士所写的2015年的高级CSS3教程会是你的最佳选择。 CSS 3D云 这是一个demo应用程序，你可以生成一个与现实生活一模一样的云，并可以对其进行调整。这个demo的代码比较复杂，它运用了CSS3 3…
再谈自适应垂直居中 – 掘金
作者：滴滴公共前端团队 – Neurotoxin 新年第一篇，首先祝福大家新年好~ 最近在开发一个 Toast组件时，遇到了一些有趣的问题，首先来看一下需求 需求为宽高不定，上下左右垂直居中，如下图 代码如下： HTML <div class=”toa…
[[英] 使用 CSS 网格布局处理元素的七种方法 – 前端 – 掘金](https://juejin.im/entry/583fe…
使用 CSS 网格布局处理元素的七种方法…
[[英] CSS 继承深度解析 – 前端 – 掘金](https://juejin.im/entry/583fe…
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也不是想做什么疯狂的事情，他们只是想让他们的文字…
CSS 绝对底部 – 前端 – 掘金
来自国外的设计达人，纯CSS，可以实现: 当正文内容很少时，底部位于窗口最下面。当改变窗口高度时，不会出现重叠问题。甚至，创造该CSS的人还专门成立一个网站介绍这个CSS底部布局方案。不知道他有没有去申请专利:)<!DOCTYPE html> &l…
26 个纯 CSS 构建的 Web 项目 – 前端 – 掘金
英文原文：26 Impressive web projects built with CSS only译者：IT程序狮译文源自：http://www.jianshu.com/p/b321… 在本文中，我们将分享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，链接在下面。对此做个总结。本文是面向前端小白的，大手子可以跳过，写的不好之处多多…
《你不知道的 CSS》之等比例缩放的盒子 – 前端 – 掘金
你肯定已经知道，对于一个 img 元素而言，你可以单独地修改它的 width 或者 height 属性来设置它的大小，同时图片的比例还能够保持不变。 如下图所示，最上面是原始大小的图片，下面两张则分别是设置了 width: 50% 和 height: …
神器！解放你的双手——UI 设计稿全自动切图和标注的一些工具推荐 – 前端 – 掘金
原文收录在我的 GitHub博客 (https://github.com/jawil/blog) ，喜欢的可以关注最新动态，大家一起多交流学习，共同进步，以学习者的身份写博客，记录点滴。 工欲善其事，必先利其器。 前不久在 掘金 上看到一篇文章，前端 PS…
haorooms 总结提高你 css 技能的 css 开发技巧 – 前端 – 掘金
前言 说到css开发技巧，其实我前面所有关于css的文章，都是css的一些小的技巧！感兴趣的可以查看：http://www.haorooms.com/tag/css 还有值得一提的是，我之前关于css，分别写了css常用效果总结 …
前端 PS 切图方法，图文详细 – 掘金
写在前面：本文主要内容是目前我所知道的切图技巧结合网上的资料，写出来分享一波。图文教程，多图！！ BB：很多人都会说，切图这个活倒底分给UI还是分给前端。虽然好的UI会给我们把图切好，但是他们切的图不一定百分之百符合我们的需求，所以我一直都觉得这是页面仔必须要…
分享一下我制作 H5 婚礼邀请函用到的技术要点 – 前端 – 掘金
前言 很多网上的婚纱摄影公司，或者婚庆公司，或者一些h5制作平台，都可以做一些婚礼邀请函，但是这样的婚礼邀请函千篇一律。没有什么特色，仅仅是图片展示。在某人的强烈要求之下，我制作了一个h5婚礼邀请函（目前源码暂时不公开吧，过段时间再说）。用到了…
CSS 技巧（三）：视觉效果 – 前端 – 掘金
《css揭秘》学习笔记系列，记录和分享各种实用技巧，共同进步。源代码可访问仓库地址 视觉效果 1. 单侧投影 1.1 单侧投影 …
吹毛求疵的追求优雅高性能JavaScript – 前端 – 掘金
SpinKit 是一套网页动画效果，包含8种基于 CSS3 实现的很炫的加载动画。借助 CSS3 Animation 的强大功能来创建平滑，易于定制的动画。SpinKit 的目标不是提供一个每个浏览器都兼容的解决方案，而是给现代浏览器提供更优的技术实…
纯 CSS 实现网站常用的五角星评分和分数展示交互效果 – 前端 – 掘金
最近做的一个项目涉及到评分和展示分数的模块，UI设计师也给了几个切好的图片，实现五角星评分方式很多，本质爱折腾的精神和对性能追求以及便于维护的考虑，搜集和尝试了很多方式，最终采用了纯css驱动的实现方式完成评分和展示分数的功能，没有js,也就意味着没判断逻辑，…
谈谈一些有趣的 CSS 题目（十四）– 纯 CSS 方式实现 CSS 动画的暂停与播放！ – 前端 – 掘金
开本系列，谈谈一些有趣的 CSS 题目，题目类型天马行空，想到什么说什么，不仅为了拓宽一下解决问题的思路，更涉及一些容易忽视的 CSS 细节。 解题不考虑兼容性，题目天马行空，想到什么说什么，如果解题中有你感觉到生僻的 CSS 属性，赶紧去…
CSS 技巧（二）：形状 – 前端 – 掘金
形状 本章代码比较多，可以访问仓库获取源代码。 1. 自适应的椭圆 背景知识：border-radius属性的基本用法 使用b…
内容滚动条和子 div 高度自适应 – 前端 – 掘金
写在前面：老套路有图有真相，这才叫做分享。本文内容是：一个div里面，两个子div高度自适应（平分父div的高度）和元素内容过多的时候，根据需求出现高度滚动条或者宽度滚动条。 先放最终效果（在下面会有demo代码。）： …
小 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设计灵感和用户视觉享受架起一座桥梁：正所谓“晋帝时祭北郊，更祝版，工人削之，笔…
黑科技：CSS 定制多行省略 – 前端 – 掘金
什么是多行省略？ 当字数多到一定程度就显示省略号点点点。最初只是简单的点点点，之后花样越来越多，点点点加下箭头，点点点加更多，点点点加更多加箭头…。多行省略就是大段文字后面的花式点点点。 同行这么做： …
:before 伪类妙用 + 打造一个假的输入框 – 前端 – 掘金
记一次以前从未注意的:before伪类之content属性 和用div模仿输入框 案列–ofo的车牌输入框整个布局大体分为 上 中 下观察输入框 1 输入内容为黑色 2 闪烁的光标为黄色就奇怪在 输入框的光标…
不简单的前端性能优化 – 前端 – 掘金
本文主要介绍 “关键渲染路径” 与“网络”两个方面的性能优化并提供 demo，篇幅较长建议电脑观看。 前端优化的方面太多，本文介绍的仅仅是其中的一部分，力求涵盖 “关键渲染路径” 的方方面面，及一些不常被提到的 “网络优化” 部分。…
译：可以用什么方法清除浮动？ – 前端 – 掘金
原文链接：http://stackoverflow.com/a/16… 根据正在生产中的设计，以下每个 clearfix CSS 解决方案都有自己的优势。 “…
16种方法实现水平居中垂直居中 – 掘金
熟悉水平居中和垂直居中的方法, 不为别的, 就为用的时候能够信手拈来. 下面直接步入正题.原文：16种方法实现水平居中垂直居中 水平居中 1) 若是行内元素, 给其父元素设置 text-align:center,即可实现行内元素水平居中. 2) 若是块级元素,…
rem 布局原理 – 前端 – 掘金
REM兼容性 首先，在介绍 rem 之前，我们先看看 em em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置…
(干货)css自定义 range radio select的样式滑轮，按钮，选择框 – 掘金
写在前面： 之前踩坑css的时候，遇到滑轮，按钮，选择框这类型的东西，为了页面效果，总是需要自定义他们的样式，而不使用他们的默认样式。当时写的时候，我也是蛮头疼的，弄了个demo，链接在下面。对此做个总结。本文是面向前端小白的，大手子可以跳过，写的不好之处多多…
“自适应” 高度的 textarea 文本输入框 – 前端 – 掘金
还在不断增加中的动车高铁票 写在前面 那啥，在我的那个很安静的一个 CSS 群（群号：82991297）突然看到有人在问一个问题。 使用 css 如何实现：textarea 如何实现高度自适应？ 当时看到这个问题的时候，我脑中只有一个想法，这个百度…
《你不知道的 CSS》之等比例缩放的盒子 – 前端 – 掘金
你肯定已经知道，对于一个 img 元素而言，你可以单独地修改它的 width 或者 height 属性来设置它的大小，同时图片的比例还能够保持不变。 如下图所示，最上面是原始大小的图片，下面两张则分别是设置了 width: 50% 和 height: …
神器！解放你的双手——UI 设计稿全自动切图和标注的一些工具推荐 – 前端 – 掘金
原文收录在我的 GitHub博客 (https://github.com/jawil/blog) ，喜欢的可以关注最新动态，大家一起多交流学习，共同进步，以学习者的身份写博客，记录点滴。 工欲善其事，必先利其器。 前不久在 掘金 上看到一篇文章，前端 PS…
前端 PS 切图方法，图文详细 – 掘金
写在前面：本文主要内容是目前我所知道的切图技巧结合网上的资料，写出来分享一波。图文教程，多图！！ BB：很多人都会说，切图这个活倒底分给UI还是分给前端。虽然好的UI会给我们把图切好，但是他们切的图不一定百分之百符合我们的需求，所以我一直都觉得这是页面仔必须要…
welogger 开发笔记 1 – react 中如何处理弹层 – 前端 – 掘金
welogger.com正在如火如荼的开发中，其中遇到的一些问题和经验在这里做一些笔记，分享给大家。也许有不准确或者还有能做得更好的地方，欢迎评论指正。 1. 背景 welogger用的react.js做的前端渲染，涉及到比较多用户交…
5 个技巧避免不必要的浏览器兼容性问题 – 掘金
本文作者：John Howard 编译：胡子大哈 翻译原文：http://huziketang.com/blog/po… 英文连接：5 Tricks to Avoid Cro…
教你如何在 web 应用程序中使用本地文件•上传图片file✔ – 前端 – 掘金
使用在HTML5中添加到DOM的File API，现在可以让Web内容要求用户选择本地文件，然后读取这些文件的内容。此选择可以通过使用HTML ) 元素用来创建基于web表单的可交互控件.”><input> 元素或…
理解 CSS 命名规范 –BEM – 前端 – 掘金
理解CSS命名规范–BEM 2017-04-05 最近在写博客主题的时候发现一个很严重的问题，由于css的命名并不是很规范，导致自己在后期修改的时候很是头疼，有些样式需要在浏览器中打开开发者工具去找，很是无奈。所以决定在写完主题之后…
谈谈一些有趣的 CSS 题目（十四）– 纯 CSS 方式实现 CSS 动画的暂停与播放！ – 前端 – 掘金
开本系列，谈谈一些有趣的 CSS 题目，题目类型天马行空，想到什么说什么，不仅为了拓宽一下解决问题的思路，更涉及一些容易忽视的 CSS 细节。 解题不考虑兼容性，题目天马行空，想到什么说什么，如果解题中有你感觉到生僻的 CSS 属性，赶紧去…
纵向排列文字以及禁止文字选中 – 前端 – 掘金
写在前面：内容包括demo代码，应用和定义，以及参考文献，本文主要内容是本人学习过程中遇到css的零碎知识点1（就是以前自己不知道的），我都记下来了，需要的朋友可以过来参考下，喜欢的可以点个赞，希望对大家有所帮助。 writin…
(译) 编写整洁 CSS 代码的黄金法则 – 掘金
原文地址：Golden Guidelines for Writing Clean CSS 原文作者：本文已获作者 Tiffany Brown 授权 译文出自：掘金翻译计划 译者：reid3290 校对者：weapon-xx，bambooom 编写整洁 C…
[[英] 使用 CSS 选择器来检验 HTML 代码 – 前端 – 掘金](https://juejin.im/entry/58c62…
检验 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 环境下，常见的碰撞检测方法如下： …
前端不为人知的一面——前端冷知识集锦 – 前端 – 掘金
（点击上方公众号 ，可快速关注） 作者：伯乐在线专栏作者 – 刘哇勇 如有好文章投稿，请点击 → 这里了解详情 如需转载，发送「转载」二字查看说明 前端已经被玩儿坏了！像console.log()可以向控制台输出图片等炫酷的…
弹性盒模型Flex指南 – 掘金
Web layout 是Web UI中的基础架构, 重要性不言而喻. 传统的盒模型, 借助display, position, float 属性应对普通布局游刃有余, 但针对复杂的或自适应布局, 常常捉襟见肘. 比如垂直居中, 就是一个老大难的问题, 借助fl…
Sticky Footer，完美的绝对底部 – 前端 – 掘金
写在前面 做过网页开发的同学想必都遇到过这样尴尬的排版问题：在主体内容不足够多或者未完全加载出来之前，就会导致出现（图一）的这种情况，原因是因为没有足够的垂直空间使得页脚推到浏览器窗口最底部。但是，我们期望的效果是页脚应该一…
个人 css 纠错思路 – 前端 – 掘金
每当写完大量的样式代码的时候，因为css本身的层叠性，在观察其显示出的效果，因为某些原因可能出现了与之前设想有些出入的地方，该从那些地方如说去查找下这些问题来源。在这里，我说说自己的想法思路。 不过在这之前，你需要对css属性有些…
谈谈 css3 的 transition – 前端 – 掘金
属性何其多，精通一个受益终身（在不被新时代废除的情况下）。今儿我们就来探讨一下css3的transition这个变换过渡的属性。 都知道通过过渡transition，可以让web前端开发人员不需要javascript就可以实现简单的动画交互效果。过渡属性看似简…
你不知道的 CSS 秘密：margin 篇 – 前端 – 掘金
本篇讲解的是主要是BFC 可以解决的 margin 重叠问题 ,如对你有帮助 ，请点个赞给个鼓励，谢谢~ 先来一张W3C标准盒模型的图片. margin 属性介绍 margin 的几种使用方法,简单带过. margin : t…
黑科技：CSS 定制多行省略 – 前端 – 掘金
什么是多行省略？ 当字数多到一定程度就显示省略号点点点。最初只是简单的点点点，之后花样越来越多，点点点加下箭头，点点点加更多，点点点加更多加箭头…。多行省略就是大段文字后面的花式点点点。 同行这么做： …
跟着写一个 CSS 栅格布局 – 前端 – 掘金
我们常在诸如Bootstrap的前端框架中见到css栅格系统，如果仅仅为了使用栅格布局而引入一个前端框架是很不明智的行为。所以，这篇文章就是帮助你从零打造一个CSS Grids～ 什么是栅格系统 栅格系统（CSS Grids）是一种运…
前端灰度效果的实现（filter:grayscale()）兼容所有浏览器 – 前端 – 掘金
分享一个最近在工作中遇到的新需求以及解决方案，希望对开发的朋友门有帮助，鄙人能力有限，有不妥的地方还请大家多多指教。 需求直接看图，需要在某种状态时将B.2模块整体置灰。一开始想直接处理所有图像，但是涉及东西太多，尤其是icon得重新切图，重新合成，工作…
浏览器亚像素渲染与小数位的取舍 – 腾讯 ISUX – 前端 – 掘金
在响应式项目中，百分比的数值的应用越来越多，比如栅格化布局、背景定位、内边距等。以往对于这种数值，我们大都是直接采用计算器计算出来的数值。但这种数值有时会很长，特别是除不尽的数值如23.33333333%。数据不美观不说，关键对于这种小数位的位数应该如何取舍，…
【译】创建漂亮的 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 hack 合集 – 前端 – 掘金
本来已经抛弃IE6|7|8了，可是最近发现要考虑IE兼容性的网站还是有不少的，所以这两天了解了一下CSS HACK，在这里简单地总结一下！ 1、何为HACK？ 简单的说，HACK就是只有特定浏览器才能识别这段hack代码。Hack也可以说是让前端最为头疼…
CSS 面试题解答 – 前端 – 掘金
问：什么是CSS reset 在不同浏览器之间，默认样式有着诸多差异和问题，而为了在不同浏览器之间具备相同的视觉效果，开发人员往往会在样式表文件中引入一段CSS代码，如http://meyerweb.com/eric/tool…
CSS3 transform 属性及应用 – 前端 – 掘金
在介绍有关transform相关的知识之前，先来讲一下transform-origin的用法以及关于<angle>角度的几种取值单位。另外，在使用时，为了兼容各个浏览器，可加上浏览器的私有前缀［－moz- -webkit -ms-］。 transf…
动态加载 / 删除 css 文件以及图片预加载 – 前端 – 掘金
最近，工作中遇到了一个比较奇葩的需求：要在一个页面（PC端）增加一个功能模块，但是这个页面在不久之后要重构，为了新增加的模块可以继续复用，必须做到这个模块的样式对页面其他模块不能造成影响，旧版页面使用bootstrap样式，新版模块只使用normalize.c…
CSS 五种方式实现 Footer 置底 – 前端 – 掘金
页脚置底（Sticky footer）就是让网页的footer部分始终在浏览器窗口的底部。 当网页内容足够长以至超出浏览器可视高度时，页脚会随着内容被推到网页底部；但如果网页内容不够长，置底的页脚就会保持在浏览器窗口底部。 …
【译】CSS Flexbox 学习指南、工具与框架 – 前端 – 掘金
Flexbox 是一种更有效的布局方式，它能更好的分配容器空间，并控制项目的对齐。虽然，掌握它的理论有些复杂，但幸运的是，我们可以借助开放的网络来学习并逐步掌握它。 在本文中，我们整合了一些最佳的 Flexbox 学习资源，它们可以帮助你了解Flexb…
GitBook《拥抱未来的 CSS 布局方式：flex 与 grid 布局》全教程 – 前端 – 掘金
本系列文章为对CSS中flex布局与grid布局的详细介绍，已在GitHub同步更新，如您在阅读过程中发现描述有误或错别字的情况，您可以向本项目提出issus或Pull Request。 本系列文章为我在深入研究CSS的布局方式的过程中的一些总结。主要是对于C…
CSS 技巧：使你的 CSS 更加专业 – 前端 – 掘金
一个帮你提升 CSS 技巧的收藏集。 对于其他收藏集合可以查看 @sindresorhus 创建的收藏集合 Awesome Lists. 目录 专业技巧 支…
css-protips – 让你的 CSS 代码更加专业 – 前端 – 掘金
提示的收集，以帮助提升你的CSS技巧。 对于其他大名单退房 @sindresorhus的策展的名单 真棒名单. …
CSS基本功从头练之Selector – 掘金
CSS一直是我的短板，从来没有系统学过，一直都是使用第三方的样式库，或者在网上找点资料copy。最近感觉应该系统的梳理一下，否则很多概念还是不太清晰。还是属于边学边写的资料，难免各种漏洞，希望大家多指正。 Selector（选择器） 为什么会有选择器这个概念？…
再谈自适应垂直居中 – 掘金
作者：滴滴公共前端团队 – Neurotoxin 新年第一篇，首先祝福大家新年好~ 最近在开发一个 Toast组件时，遇到了一些有趣的问题，首先来看一下需求 需求为宽高不定，上下左右垂直居中，如下图 代码如下： HTML <div class=”toa…
CSS3初体验之奇技淫巧 – 掘金
自CSS3流行以来，虽然以前看过一遍所有的新增属性，但其实在实际项目中用到的少之又少。所以没有形成系统性的认识，以及看到效果立马就能想到解决方案的能力。然后最近正好遇到一个需要绘制大量动画的需求，所以决定趁此机会好好研究一下这个既熟悉又陌生的css3。 在正式…
各种姿势教你写手风琴式折叠菜单 – 前端 – 掘金
手风琴菜单 在写后台管理页面的时候，编写折叠菜单是一个比较常见的应用场景。那么今天我们就来学习一下怎么使用各种姿势写出手风琴式的折叠菜单。写之前先看一下效果，插件来源于jQuery之家，演示效果可以点击这里折叠菜单。jquery…
[[布局概念] 关于CSS-BFC深入理解 – 掘金](https://juejin.im/post/5909db…
写在前面 好记性不如烂笔头，研究了一下BFC，发现里面比较细的东西也是很多的！关于BFC，很多人可能都听说过BFC这个东西，大概知道这是个啥东西，相信很多人对此并没有一个非常细致的了解，本文预计篇幅较长，认真，耐着性子看，应该都能够比较深入的理解BFC这个概念…
CSS 常见布局解决方案 – 前端 – 掘金
说起css布局，那么一定得聊聊盒模型，清除浮动，position，display什么的，但本篇本不是讲这些基础知识的，而是给出各种布局的解决方案。 水平居中布局 首先我们来看看水平居中 1.margin + 定宽 <di…
一个项目的前端布局给我的思考 – 掘金
内容包括： HTML（讲述你不知道的absolute和float关系）和javascript（自己写的一段原生js实现双击切换效果） 最近在一个项目中发现一个自己一直忽视的问题 position 和 float 的混用问题，position定位给我们前端开发中…
前端常见布局方式实现 – 前端 – 掘金
武功山顶 写在前面 由于知识有限，有的内容可能有点小错误什么的，仅供参考参考，欢迎大佬们指正，小花在这里谢过~ 小贴士（…
一劳永逸的搞定 flex 布局 – 掘金
寻根溯源话布局 一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不由得感觉眼前一亮，顺理成章的联想到 Word 文档排版中用到的的左对齐、右对齐和居中对齐，然而很快就失望的发现…
CSS 深入理解 vertical-align 和 line-height 的基友关系 – 前端 – 掘金
本文地址：http://www.zhangxinxu.com/wor… 一、想死你们了 几个星期没有写文章了，好忙好痒；个把月没有写长篇了，好忙好想；半个季度没在文章中唠嗑了，好痒好想。 后面一栋楼有对夫妻在吵架，声音雄浑有力，交锋…
16种方法实现水平居中垂直居中 – 掘金
熟悉水平居中和垂直居中的方法, 不为别的, 就为用的时候能够信手拈来. 下面直接步入正题.原文：16种方法实现水平居中垂直居中 水平居中 1) 若是行内元素, 给其父元素设置 text-align:center,即可实现行内元素水平居中. 2) 若是块级元素,…
谈谈一些有趣的 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 …
range滑块自定义样式，步骤详解以及实际应用 – 掘金
写在前面： 本文的主要内容包括：type=”range”属性介绍，修改range默认css样式以及在js中的实际应用。本文面向前端小白，写的不好之处，请多多见谅。文末有demo链接，可以自行复制到本地进行试验。 相关：自定义 range r…
【CSS 常见问题】三分钟解决 CSS 中 float 引起的父元素高度塌陷问题 – 前端 – 掘金
CSS 前言 相信很多同学在网页布局过程中都用过float浮动布局，float可以让我们很方便的去布局，但是同时也带来了很多的问题，虽然现在很多人都推荐用Flex布局来替代浮动布局（不…
【译】CSS Grid VS Flexbox：实例对比 – 前端 – 掘金
DEMO 地址：http://t.cn/RXIyh0v 示例下载地址：http://t.cn/RXIyZnb 不久以前，所有 HTML 页面的布局还都是通过 tables、floats 以及其他的 CSS 属…
rem 布局原理 – 前端 – 掘金
REM兼容性 首先，在介绍 rem 之前，我们先看看 em em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置…
Sass 快速入门 – 前端 – 掘金
由于工作需要，最近在使用Ionic3 + Angular4，发现使用CLI创建的新项目里对于CSS样式都是使用Sass，所以学习了一下Sass。这里主要记录了Sass的主要用法，省得每次使用都去翻官网。 Sass是什么？ Sass 是一款强化 CSS 的辅…
“自适应” 高度的 textarea 文本输入框 – 前端 – 掘金
还在不断增加中的动车高铁票 写在前面 那啥，在我的那个很安静的一个 CSS 群（群号：82991297）突然看到有人在问一个问题。 使用 css 如何实现：textarea 如何实现高度自适应？ 当时看到这个问题的时候，我脑中只有一个想法，这个百度…
(干货)css自定义 range radio select的样式滑轮，按钮，选择框 – 掘金
写在前面： 之前踩坑css的时候，遇到滑轮，按钮，选择框这类型的东西，为了页面效果，总是需要自定义他们的样式，而不使用他们的默认样式。当时写的时候，我也是蛮头疼的，弄了个demo，链接在下面。对此做个总结。本文是面向前端小白的，大手子可以跳过，写的不好之处多多…
CSS: 常用的元素居中方法 – 前端 – 掘金
日常工作中常常会遇到元素居中的需求，通常块级元素的水平居中只需左右margin设为auto即可。 而行间元素的居中则是由父级设置行高(等于父级高度)和 text-align(center)实现。 但是如果要求是块级元素水平垂直居中呢？本文总结了一些常用的元素水…
CSS 五种方式实现 Footer 置底 – 前端 – 掘金
页脚置底（Sticky footer）就是让网页的footer部分始终在浏览器窗口的底部。 当网页内容足够长以至超出浏览器可视高度时，页脚会随着内容被推到网页底部；但如果网页内容不够长，置底的页脚就会保持在浏览器窗口底部。 …
手把手带你用原生js实现css属性的set和get – 掘金
作者：Icarus原文链接：手把手带你用原生js实现css属性的set和get 上一篇博文介绍了getComputedStyle方法，接下来，我们就来实现一个简易版的小插件，能够在不借助jQuery的情况下实现css属性的获取和设置。 Let’s start …
微信面试题 – 获取元素的最终 background-color – 前端 – 掘金
一、题目 用JS代码求出页面上一个元素的最终的background-color，不考虑IE浏览器，不考虑元素float情况。 二、题目解析 1.考察底层Java…
CSS 技巧：使你的 CSS 更加专业 – 前端 – 掘金
一个帮你提升 CSS 技巧的收藏集。 对于其他收藏集合可以查看 @sindresorhus 创建的收藏集合 Awesome Lists. 目录 专业技巧 支…
