CSS及布局

一劳永逸的搞定 flex 布局

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

响应式图片

“响应式（Responsive）”这个词我想大家没有听过一千遍，也有一百遍了。响应式是指实现不同屏幕分辨率的终端上浏览网页的不同展示方式。网上介绍响应式的文章也有很多了，比如：《自适应页面设计》。在这篇文章中，我们不讲页面布局的响应式，我们主要来看看“响应式图片”。 这篇文章主…

[[译] CSS 继承深度解析](https://juejin.im/entry/585a2...

CSS 里经典的层叠和继承概念到底怎么该怎么使用最好，本文深度解析，欢迎大家一起交流！

详解 CSS 七种三栏布局技巧

在前端领域中，掌握三栏布局是一个开发人员必备的技巧，本文将介绍七种三栏布局的技巧，在实际开发中，你可以选择适合自己实际需求的方式。

calc 如何工作

CSS3 的 calc() 函数允许我们在属性值中执行数学操作。

【译】CSS Flexbox 学习指南、工具与框架

可能是最全的学习 Flexbox 的资源了，希望对大家有所帮助。

平时自己项目中用到的 CSS

css有些属性容易忘记，半天不写就要去查api，有时候api还不好使，于是还是记下来以后方便用，后续会慢慢补充进来的。 Github: https://github.com/aototo/blog 博客长期更新，喜欢的朋友star一下 outline 移除当选中input元素的时…

[[译] 3 分钟掌握 CSS Flexbox](https://juejin.im/entry/57ce6...

在本文中，你将学到一些关于 Flexbox 的极其重要的理念。

Flex 布局应用

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

Transition 剖析 by 思维导图

Transition 剖析你的疑惑

[[译] Grid 布局完全指南](https://juejin.im/entry/58a54...

CSS 栅格布局 (亦称 "Grid")，是一个基于栅格的二维布局系统，旨在彻底改变基于网格用户界面的设计。

CSS 中的浮动和清除浮动，梳理一下！

前端技术栈更新太快，眼花缭乱，大家一个劲揽过来学习的时候，别忘了回头看看那些已经掌握的基础知识。
我肯定不会说这其实是为妹纸写的重要知识点整理文章...
万一哪天我就去办个培训班呢？

CSS 进阶：提高你前端水平的 4 个技巧

随着 Node.js 、react-native 等技术的不断出现，和互联网行业的创业的层出不穷，了解些前端知识，成为全栈攻城师，快速的产出原型，展示你的创意，对程序员，尤其是在创业的程序员来说，越来越重要，下面我们就跟随著名国外开发者网站上的热推文章《Leveling up in CSS》，从提升你的 CSS 技巧开始。

你真的觉得你会 CSS3 了吗？

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

前端 CSS 一些小细节

前端 CSS 一些小细节 ，英文原文：http://www.alistapart.com/art...

Weui 1.0 发布

WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。
经过半年的打磨，WeUI 1.0 正式发布，主要是新增了一些常用组件，并使用 BEM 命名，为接下来的微信小程序开发做好准备。

CSS 基础知识总结

本文详细讲解了 CSS 中优先级和 Stacking Context 等高级特性，让你更深入了解 CSS。

Flex 布局教程：实例篇

习惯了 iOS 开发中的 AutoLayout，在尝试 React Native 时相对不好理解的就是 flex 的布局，找来阮一峰老师两篇教程专门补补课。

CSS3 transform 属性及应用

transform 属性的介绍以及常见用法，如实现居中、平行四边形、菱形、梯形以及折角等效果

把简单做好也不简单-css水平垂直居中

44年前我们把人送上月球，但在CSS中我们仍然不能很好实现水平垂直居中。 .md-warp{ width: 400px; height: 300px; max-width: 100%; border: 1px solid #000; } .md-main{ display: b…

CSS 中一个冒号和两个冒号有什么区别？

《小分享》~ FED新手必备…

『REM』手机屏幕高清适配方案

学习了『flexible』对 DPR 的处理后，结合前一篇处理 Android 的 FontSize 的问题得到的高清适配方案。

深入解析 css flexbox - oxxo.studio

这篇文章比另一个技术网红写得好很多。我看这篇比看骰子那篇就看懂了。

Flexbox 是一個 CSS3 的盒子模型 (box model)，顧名思義它就是一個靈活的盒子 ( Flexible Box )，為什麼最近這個屬性才紅起來呢？最主要也是因為 CSS3 的規範終於普及 ( 或 IE 終於敗亡 )，加上行動裝置的發展促成了響應式布局興起，自適應長寬彈性相當大的 Flexbox 就趁勢而起了。

CSS 中的垂直居中大法

列出 6 种 css 垂直居中大法 ~

我们来翻翻元素样式的族谱-getComputedStyle

大家应该非常熟悉jQuery的css()方法,那么如何在不引用jQuery的情况下同样实现这个功能呢?本文就介绍使用原生JS来获取样式的方法.作者：Icarus原文链接：我们来翻翻元素样式的族谱-getComputedStyle getComputedStyle是什么 The …

手机端页面自适应解决方案—rem 布局进阶版（附源码示例）

一年前笔者写了一篇 《手机端页面自适应解决方案—rem 布局》，意外受到很多朋友的关注和喜欢。但随着时间的推移，该方案已然过时，故为大家介绍一个目前我极力推荐使用的，更加完美的方案——rem 布局（进阶版）转载自：http://www.jianshu.com/p/985d...

CSS Background 之神奇渐变色

利用 CSS 的 linear-gradient() repeating-linear-gradient() radial-gradient() repeating-radial-gradient() 属性, 可实现各种意想不到的渐变图像。

获取元素 CSS 值之 getComputedStyle 方法熟悉

getComputedStyle 详解

瀑布流式布局 (Waterfall Layout) 的两种常用实现方式

花了点时间总结了两种方式的瀑布流布局：一种基于 inline-box 和 flex，对浏览器兼容有一定要求；另一种方式与 Pinterest 采用的方式相同，即 absolute 方式。这两种方式实现的瀑布流式布局均支持首屏和网页窗口大小改变时的列数自适应。

前端面试经典问题：CSS 中居中的几种方式

面试中经常遇到的面试题之一，居中布局，特来总结

详解 CSS 居中布局技巧

基本上涵盖了 CSS 垂直居中和水平居中的技巧，并给出不同的适用场景。

[[译] 理解 CSS 模块化](https://juejin.im/entry/57f63...

把目光投向 CSS，一个重大转折就是 CSS 预处理器的出现（在工具方面来看），其中， Sass 应该是最为著名的一个。此外，还有 PostCSS，它和 Sass 略有不同，但是殊途同归——都是用浏览器不能解析的语法编写，并且最终编译成浏览器能够理解的语法。

现在，又有一位新的成员出现了，它就是 CSS 模块。本文就将介绍 CSS 模块化的诸多优点，以及如何编写模块化的 CSS。

CSS 查漏补缺

写了那么多 CSS 终于明白了 BFC 是啥…

学习 sass 笔记

学习 sass 的思维导图...

三列布局面试题延伸

很多面试题都有考到三列布局，文章从 css 的发展说起，包括比较新的 CSS Grid, 使用不同时代的知识点去剖析这个问题，希望帮助到大家更好的解决这个问题

CSS3 transform 对普通元素的 N 多渲染影响 « 张鑫旭 - 鑫空间 - 鑫生活

今天遇到个神奇的 bug， 张鑫旭 大神威武

[[译] 几张 GIF 动图让你看懂弹性盒模型（Flexbox）如何工作](https://juejin.im/entry/589d2...

还在好奇或者疑惑 Flexbox 的工作原理吗？本文用 GIF 动图清晰说明整个变化过程，看完保证豁然开朗！

CSS 并不简单 -- 一道微信面试题的实践

本系列会持续分享本人学习到的 CSS 知识点、技巧和效果展示。如有错误，希望您能指出。

CSS Background 属性详解

background 属性的简写用法的介绍以及常见背景属性的理解。

GitBook《拥抱未来的 CSS 布局方式：flex 与 grid 布局》全教程

本书（系列文章）为对 CSS 中 flex 布局与 grid 布局的详细介绍，已在 GitHub 同步更新，如您在阅读过程中发现描述有误或错别字的情况，您可以向本项目提出 issus 或 Pull Request。

本系列文章为我在深入研究 CSS 的布局方式的过程中的一些总结。主要是对于 CSS3 标准里的 flex 布局方式 CSS 草案中的 grid 布局方式进行一些总结。

Flex 布局教程

2009 年，W3C 提出了一种新的方案 ----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

你不知道的 CSS 秘密：margin 篇

关于 margin 百分比设置和 Collapsing margins 以及解决方法

响应式图片实战

说到响应式网站，我们都知道弹性布局、弹性图片、媒体查询，更多指的是布局的方式，比如说使用 max-width: 100%，这样让图片的宽度随着容器的大小而改变，响应式设计让网站能兼容各种屏幕设备，但是在我们流量这么昂贵的时代，让一个小屏幕的手机去加载一张为大屏幕 PC 设计的几百 K 的图片，虽然这张图片会看起来非常的清晰，但是疯涨的流量消耗肯定会让用户非常的苦恼，而且我们也需要加载更长的时间才能把页面加载出来。

我们开发的目的不是挑战用户的耐心和金钱，而是让用户在使用的过程中有更好的感受，在这种情况下加载与 用户设备相匹配的小图片，即快速，又不会影响用户的体验，帮用户节省了成本，同样的，你在 PC 端加载一张小图片也不会影响用户的体验，帮用户节省了成本，同样的你在 PC 端加载一张小图片，虽然速度很快但是放大后模糊的效果会让用户觉得网站很 Low 很不专业, 而且 PC 大部分使用的 wifi，我们不需要去接受太多的流量，那么如何解决刚才说的这些问题呢？响应式图片的概念也就随之产生了，响应式图片，不仅仅是指图片的排版和布局，更多的还指可以根据设备大小而加载不同的图片，虽然这个过程增加了一点点 UI 设计师的工作量，不过那会大大改善用户的体验，那么想要响应式图片如何来实现呢？

浅议内滚动布局

关于 PC 端内滚动布局的一些干货

手机端页面自适应解决方案—rem 布局进阶版

这是阿里团队的高清方案布局代码，所谓高清方案就是根据设备屏幕的 DPR（设备像素比，又称 DPPX，比如 dpr=2 时，表示 1 个 CSS 像素由 4 个物理像素点组成） 动态设置 html 的 font-size, 同时根据设备 DPR 调整页面的缩放值，进而达到高清效果。

动态加载 css 方法实现和深入解析

详细解析如何实现动态加载 css 资源，并兼容各个版本浏览器。该方法经受住线上产品端千万用户的检验，已确保无误。

再谈自适应垂直居中

作者：滴滴公共前端团队 - Neurotoxin 新年第一篇，首先祝福大家新年好~ 最近在开发一个 Toast组件时，遇到了一些有趣的问题，首先来看一下需求 需求为宽高不定，上下左右垂直居中，如下图 代码如下： HTML 提交成功

深入了解 CSS 字体度量，行高和 vertical-align

作者：大漠 来源：w3cplus line-height 和 vertical-align 在 CSS 中是两个简单的属性。如此简单，大多数人都相信自己已经完全理解它们是如何工作的以及如何使用它们。但事实上并不如此。他们其实很复杂……

BFC 深入理解

Blocking Formatting Context 深入理解

CSS 五种方式实现 Footer 置底

页脚置底（Sticky footer）就是让网页的 footer 部分始终在浏览器窗口的底部。这样的布局随处可见，偶然看到 CSS-TRICKS 上介绍页脚置底的文章觉得不错，对开阔布局的思路挺有帮助，遂译之。

CSS 命名规范总结 · 简单心理技术团队

BEM 命名给 CSS 以及 html 提供清晰结构，命名空间提供更多信息，模块化提高代码的重用，以达到 CSS 命名语义化、可重用性高、后期维护容易、加载渲染快的要求。

[[译] Grid 布局完全指南 | CSS-Tricks](https://juejin.im/entry/589c7...

这是一篇翻译自 css-tricks 上的文章，当你 Google css grid 的时候，第一个条目便是这篇原文，小伙伴们赶快学起来！Grid 作为一个新的 CSS 的属性，即将被浏览器所支持。它将彻底改变网页的布局方式，使响应式设计变得更加简单。

翻译计划 - 浅谈 PostCSS

浅谈 PostCSS

【译】CSS 动画之工具、框架和教程

一篇专注于 CSS 动画的工具、框架以及学习教程的文章，与你分享。希望能帮你更好的学习 CSS 动画，节约你搜索资料的时间。

了解真实的『REM』手机屏幕适配

rem 的官方定义『The font size of the root element.』，即以根节点的字体大小作为基准值进行长度计算。一般认为网页中的根节点是 html 元素，所以采用的方式也是通过设置 html 元素的 font-size 来做屏幕适配，但实际情况真有这么简单吗？

CSS 面试题解答

什么是 CSS reset？CSS 性能优化？浮动的原理和工作方式，会产生什么影响呢，要怎么处理？CSS 权重？

全面整理 CSS3 选择器的用法

全面整理 CSS3 选择器的用法

【译】Flexbox in CSS

偶然看到的一个项目，并了解到一些信息：译者针对开源的《可视化 CSS References》 文档：https://github.com/jgthms/css... 正在进行翻译工作，目前完成了 Flexbox 部分的内容。而剩下的内容还在陆续进行中，供大家学习 CSS 参考。

[[译] 让 CSS 更完美：PostCSS - modules](https://juejin.im/entry/5881f...

这篇适合一些使用过预处理 CSS 的开发者，比如 less，sass 或 stylus，如果你都没用过，那你一定不是个好司机。在 PostCSS 中早就可以使用 CSS Modules 了，该篇作者贡献了一个新工具，可以让更多开发者方便的使用最新的 CSS Modules。

网易和淘宝移动 WEB 适配方案再分析

最近把移动 WEB 适配相关的问题梳理了一遍，学习了几篇文章，其中

从网易与淘宝的 font-size 思考前端设计稿与工作流 - 流云诸葛 - 博客园

分析了网易和淘宝对移动 WEB 适配问题的解决方案，干货不少，但是一些概念和思路不是很清晰。我在这里结合一些其他的文章和自己的实验思考对两种适配方案再做分析，顺便把相关的知识点做个总结。

作者：吴成琦
链接：https://zhuanlan.zhihu.com/p/...
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

图片响应式解决方案

众所周知，retina 屏的设备像素比是 2, 而普通屏幕像素比为 1，对于图片这种位图像素已定的资源，如果不加以处理的话，要么全都用 1 倍图，在 retina 屏上观看就会模糊；要么都是用 2 倍图，那么在普通屏幕上浏览的时候就会白白浪费流量消耗下载速度，从而针对图片有了响应式解决方案

CSS 隐藏元素的八种方法

前言 总括： 本文详细讲述了在网页中用 CSS 隐藏元素的七种方法。 原文博客地址：从隐藏元素谈起 知乎专栏 && 简书专题：前端进击者（知乎）&& 前端进击者（简书） 博主博客地址：Damonare 的个人博客 念念不忘, 必有回响; 有一口气, 点一盏灯。 正文 说起隐藏元素我想每一个前端 e…

CSS border 深入理解及应用

几种常见的边框用法。透明边框的实现、多层边框的几种实现方法、border-radius 圆角的使用、border-image 边框背景详解。

JavaScript 及 jQuery 中的各种宽高属性图解

JavaScript 及 jQuery 中的各种宽高属性图解, 本文根据慕课网学习视频整理, 仅供参考!

CSS 技巧：使你的 CSS 更加专业

这是 github 上关于 css 技巧的一篇译文，另外你也可以在本项目看到原文。列举了一些很实用的 css 技巧，比如给空内容的 a 标签添加内容，逗号分隔列表等等。
鉴于很多人吐槽翻译，在pr为通过前，先改成我自己的翻译...

【译】8 张 Gif 图学会 Flexbox

在本文中，我们将通过图文并茂的方式为大家介绍 Flexbox ，通过一些 GIF 动画让你直观地了解 Flexbox 的工作原理，并使用它来构建灵活的布局。学习 Flexbox 的小伙伴，不要错过咯。

CSS3 新布局方式 - 弹性盒模型

弹性盒模型是 css3 的一种新的布局方式，是一种当前页面需要适应不同的屏幕大小及设备类型时确保拥有恰当的行为的布局方式。

CSS三栏布局的四种方法

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

css 盒模型和定位扫盲

css 的盒模型和定位是 css 中的难点，有很多人对此不理解或者理解的不透彻，那么，这篇文章将带你理解什么是 css 盒模型和定位

CSS：Grid 布局

SS Grid 布局，是一个基于网格的二维布局系统，目的是用来优化用户界面设计。

注意！注意！重磅消息，在 2017 年 3 月左右，大部分浏览器都会开始默认支持 Grid 布局，所以，现在完全有必要开始学习 Grid 布局。

CSS 架构指南

以命令式风格写 CSS 会很快地导致混乱的 UI 和 CSS。不用说都能体会到开发者心中的怒火熊熊！这还将导致乱七八糟的 UX。
英文原文地址：http://www.zcfy.cc/article/cs...