还有几天就到国庆中秋了，快要放假了，先祝大家节日快乐！之前写过js的写作建议和技巧，那么今天就来聊聊css吧！说到css，每一个网页都离不开css，但是对于css，很多开发者的想法就是，css只要能用来布局，把效果图排出来就可以了，其它的细节或者优化，不需要怎么考虑。但是我觉得…

本文讲了什么是BFC，BFC的概念是什么；咋样才能生成新的BFC; BFC的约束规则；BFC在布局中的应用：防止margin重叠； 清除内部浮动；自适应两（多）栏布局的

原文地址：Building a Trello Layout with CSS Grid and Flexbox 原文作者：Giulio Mainardi 译文出自：掘金翻译计划 本文永久链接：https://github.com/xitu/gold-miner/blob/mas…

使用CSS让元素不可见的方法很多，剪裁、定位到屏幕外、透明度变化等都是可以的。虽然它们都是肉眼看不见，但背后却在多个维度上都有差别 在Chrome和Safari浏览器，则根据父元素是否是否为none来影响图片加载情况，父元素带有display:none，图片不加载。 2. 与c…

Grid-layout不是为了取代flex-layout，它是flex的补充。grid擅长二维布局，flex擅长一维布局。他们需要各司其职。 千呼万唤始出来的grid-layout终于在2017年3月开始支持得到了部分浏览器的支持。 flex并不能满足我们对于页面整体布局的需求…

更加灵活。 很显然，这比纯色的背景好看太多了。 由此可见，渐变并没有那么简单。 通过这个例子，是不是使用渐变的思路更加开阔了。不过这里还需要注意一点： 当你声明多个渐变时，最先声明的，离用户越近。（这里就需要我们考虑遮盖的问题，一般采用transparent）； 对于径向渐变的…

CSS Transforms可以对一个元素进行二维平面或三维空间的变换，如translate, rotate, scale和skew等变换。 下面是对W3C官网CSS Transforms模块的部分摘译，为了理解的连贯性，调整了W3C规范中相关章节的顺序。 用户浏览器（UAs）…