CSS及布局

摘要：经过半年的打磨，正式发布，主要是新增了一些常用组件，并使用命名，为接下来的微信小程序开发做好准备。这两种方式实现的瀑布流式布局均支持首屏和网页窗口大小改变时的列数自适应。主要是对于标准里的布局方式草案中的布局方式进行一些总结。

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

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

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

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

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

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

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

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

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

Transition 剖析你的疑惑

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

getComputedStyle 详解

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

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

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

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

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

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

学习 sass 的思维导图...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Blocking Formatting Context 深入理解

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

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

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

浅谈 PostCSS

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

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

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

全面整理 CSS3 选择器的用法

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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