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 提交成功</div…

深刻了解 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...