css - 收藏集 - 掘金

时间 2019-11-21

标签 css 收藏栏目 CSS 繁體版

原文原文链接

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

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

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

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

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

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

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

理解 CSS 命名规范 --BEM - 前端 - 掘金
理解CSS命名规范--BEM 2017-04-05 最近在写博客主题的时候发现一个很严重的问题，因为css的命名并非很规范，致使本身在后期修改的时候非常头疼，有些样式须要在浏览器中打开开发者工具去找，非常无奈。因此决定在写完主题以后...react

5 个技巧避免没必要要的浏览器兼容性问题 - 掘金
本文做者：John Howard 编译：胡子大哈翻译原文：http://huziketang.com/blog/po... 英文链接：5 Tricks to Avoid Cro...jquery

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

详解 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，在这里简单地总结一下！一、何为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代码。）： ...

[设计文章：都说是 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 方法实现和深刻解析 - 前端 - 掘金
1、方法引用来源和应用此动态加载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 方法熟悉 - 前端 - 掘金
1、碎碎念~前言咱们都用过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) 1、效果你们...

: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/wor... 本文全文转载需购买版权(500¥)，摘要引流则免费，具体参见这里 1、什么是视区相对单位？就是相对于浏览器viewport尺寸的单位...

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

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

[[英] 使用 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，连接在下面。对此作个总结。本文是面向前端小白的，大手子能够跳过，写的很差之处多多...

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

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

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

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

吹毛求疵的追求优雅高性能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绘图比较麻烦：一、为了实如今不一样屏幕上面的适配，必须动态的计算进度条的大小；二、在小程序中，canvas的画布具备最高的层级，不易于扩展。但使用css3...

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

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

译：能够用什么方法清除浮动？ - 前端 - 掘金
原文连接：http://stackoverflow.com/a/16... 根据正在生产中的设计，如下每一个 clearfix CSS 解决方案都有本身的优点。 “...

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

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

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的命名并非很规范，致使本身在后期修改的时候非常头疼，有些样式须要在浏览器中打开开发者工具去找，非常无奈。因此决定在写完主题以后...

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

[[英] 使用 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 环境下，常见的碰撞检测方法以下： ...

我的 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/tool...

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深刻理解 - 掘金](https://juejin.im/post/5909db...
写在前面好记性不如烂笔头，研究了一下BFC，发现里面比较细的东西也是不少的！关于BFC，不少人可能都据说过BFC这个东西，大概知道这是个啥东西，相信不少人对此并无一个很是细致的了解，本文预计篇幅较长，认真，耐着性子看，应该都可以比较深刻的理解BFC这个概念...

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

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

谈谈一些有趣的 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 - 前端 - 掘金
1、题目用JS代码求出页面上一个元素的最终的background-color，不考虑IE浏览器，不考虑元素float状况。 2、题目解析 1.考察底层Java...

CSS 技巧：使你的 CSS 更加专业 - 前端 - 掘金一个帮你提高 CSS 技巧的收藏集。对于其余收藏集合能够查看 @sindresorhus 建立的收藏集合 Awesome Lists. 目录专业技巧支...