CSS 研究所 - 收藏集 - 掘金

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

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

你必须记住的 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...

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

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

文字两侧加横线的解决方案 - 前端 - 掘金
文字两侧加横线的需求你遇到过吗？在参与的项目中我遇到过这种需求，总结了一下,目前分为两种:一，文字所在的背景是纯色，单一颜色；查看图片二，文字所在背景是花色，或者是背景图片查看图片给你一些时间，思考一下：查看图片脑海闪过了什么？定位，浮动，背景图片，伪元素。。...

前端 CSS 一些小细节 - 前端 - 掘金
英文原文：Peter Gasston ，翻译：vivien chen 未来的CSS太让人兴奋了：一方面，是全新的页面布局方式；另一方面，是酷炫的滤镜、颜色等视觉效果。这些CSS，受开发者追捧，被杂志和博客文章铺天盖地地介绍。 如果说这些特性是CSS华丽的一面，...

CSS 魔法堂：深入理解 line-height 和 vertical-align - 前端 - 掘金
前言 一直听说line-height是指两行文本的基线间的距离，然后又说行高等于行距，最近还听说有个叫行间距的家伙，@张鑫旭还说line-height和vertical-align基情四射，贵圈真乱啊。。。。。。于是通过本篇来一探究竟:) line-heigh...

前端面试题目大全 - 前端 - 掘金
HTML面试题 1.XHTML和HTML有什么区别 HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言最主要的不同： XHTML 元素必须被正确地嵌套。 XHTML 元素必须被关闭。 标签名必须用小写字母。 XHTML 文档必须拥有...

(译) 3 分钟掌握 CSS Flexbox - 前端 - 掘金
原文地址：Learn CSS Flexbox in 3 Minutes 本文已获得原作者 Per Harald Borgen 的授权 译文出自：掘金翻译计划 译者：Gran 校对者：mypchas6fans, MAYDAY1993 ...

谈谈一些有趣的 CSS 题目（八）-- 纯 CSS 的导航栏 Tab 切换方案 - 前端 - 掘金
本系列，谈谈一些有趣的 CSS 题目，题目类型天马行空，想到什么说什么，不仅为了拓宽一下解决问题的思路，更涉及一些容易忽视的 CSS 细节。对提升 CSS 水平大有裨益。...

CSS 进阶：提高你前端水平的 4 个技巧 - 前端 - 掘金
本文由 伯乐在线 - 小谢 翻译。未经许可，禁止转载！英文出处：Jonathan Z. White。欢迎加入翻译组。译者注：随着 Node.js 、react-native 等技术的不断出现，和互联网行业的创业的层出不穷，了解些前端知识，成为全栈攻城师，快速的...

CSS 布局的未来：网格布局 · 张小伦爱学习 - 前端 - 掘金
在这片文章中，我们一起来探索 CSS 网格布局的美妙世界。网格布局是 W3C 规范中相对较新的部分，已经在浏览器中开始绽放属于自己的光芒。 在我们深入研究这项新鲜的 CSS 技术之前，让我们先快速的复习 grid 原理的相关知识。 网格布局的简短介绍 原作者的...

You Don't Know CSS（二） - 前端 - 掘金
Float positioning schemefloat本来是用于实现文本环绕图片效果，但是其却成为了现代栅格布局的基础。一旦你理解normal flow是如何工作和inline formatting context是如何切割成line box的，float...

(译) 148 个资源让你成为 CSS 专家 - 前端 - 掘金
迄今为止，我已经收集了100多个精通CSS的资源，它们能让你更好地掌握CSS技巧，使你的布局设计脱颖而出。 CSS3 资源 20个学习CSS3的有用资源 CSS3 风暴 — 提示, 诀窍 和 技巧 20个非常有用的CSS3教程 令人激动的CS...

【译】60 个有用 CSS 代码片段 - 前端 - 掘金
1、垂直对齐 如果你用CSS，则你会有困惑：我该怎么垂直对齐容器中的元素？现在，利用CSS3的Transform，可以很优雅的解决这个困惑： .verticalcenter{ position: relative; top: 50%; ...

CSS Modules 入门 Ⅰ：它是什么？为什么要使用它？ - 前端 - 掘金
原文链接：What are CSS Modules and why do we need them?作者：ROBIN RENDLE最近我对CSS模块特别感兴趣，要是你以前还从未听说过CSS Modules，那么这个系列就是专门写给你的。首先我们会介绍一下CSS...

You Don't Know CSS（一） - 前端 - 掘金
本文主要内容来自于learn CSS layout 和CSS2.1 spec 和深入理解CSS系列 和《CSS权威指南》，主要讲解一些核心的css概念(起这么个名字感觉会被人打）你可能听说过CSS常规流(norm flow)中的inline和block。但是你...

魔法哥 2013 前端笔试题曝光（附完整解答） - 前端 - 掘金
简介这是我在 2013 年整理的一套笔试题，用于在面试前快速判断候选人的综合素质，要么快速了断，要么为后续的面谈提供切入点。为满足 “快速” 的要求，题型以选择题为主，确保候选人可以在 30 分钟内做完。显然，其中有些内容已经过时了。尽管如此，我相信这套题还是...

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

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

三列布局面试题延伸 - 前端 - 掘金
昨日和 @喻木大大聊面试的时候聊到了这个话题，其实这个问题挺常见的，不过自己面试到还没问过，问过自适应的等比正方形布局。不过聊到这个问题，下面就详细的说下解决思路和考察要点。希望下次不要被榆木童鞋刷掉了?。 解决这个问题，先简单描述下具体的需求吧： 给出三...

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

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

Top10: 11 月份最值得阅读的 CSS 文章 - 掘金
这是我在? Medium关注的一个系列文章，分类收集了来个各个不同社区优秀的文章和项目，每个月选出其中最好的十个, 由于Medium在墙外，所有我进行简单的翻译和整理到Github ❤️ Rank 1 CSS参考：图解CSS属性 有个这个网站，妈妈再也不用...

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

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

外刊君谈中国第三届 CSS 大会 - 掘金
欢迎关注我们的微信公众号，前端外刊评论，如果搜索异常，请搜索，FrontendMagazine。 2016年12月17日，中国第三届CSS大会在广州天虹锦都酒店酒店举行，外刊君同其他几位同事也参加了这届CSS大会。本文将对大会进行一个总结，谈谈外刊君的见闻和...

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