今天要聊的网格系统不是CSS Grid Layout，而要聊的是类似960gs。到止前为止类似于960gs的网格系统成熟的系统有很多套了。

思考许久才动笔写这篇文章。那么问题来了？为什么要写这篇文章呢？其实有一定的原因。自从录制前端视频上线之后，也有一些同学问我类似的问题，而且也有同学问，应不应该购买视频，或者说参加线下前端培训班，或者说还是自己自学等等。那么今天来聊聊这些个话题。

这篇文章主要是整理了国外两场有关于CSS分享大会分享的相关主题，前面一部分是@Chris Coyier在CSS Dev Conf大会上做的相关笔记。最后在文章末尾附上了2016年CSS Conf分享的相关主题。如果你对CSS相关话题感兴趣的话，可以关注2016年12月17日在中国广州举办的第三届CSS Conf大会相关主题。

一直以来在大家的印象中，处理图像的效果都应该是设计师的工具，甚至这些事情应该都交给PhotoShop之类的设计软件来完成。但是随着CSS的技术发展以及浏览器更新，前端人员通过CSS也可以做一些图像的处理。今天就是想跟大家聊聊如何通过CSS来处理图像效果。

最近有一个关于CSS的话题“既然写CSS很容易，那为什么大家还是把CSS写的那么烂呢？”。对于这样的话题，大家或许觉得没有什么，顶多也就是各种槽点。但事实上，在天朝CSS很多时候是不被看好，相比国外的同行，很少有人在专研CSS领域。这也造成，能写好CSS的同学不多，甚至说越来越少。

前段时间有个关于CSS的话题“既然写CSS很容易，那为什么大家还是把CSS写的那么烂呢”？其实这样的话题一直都存在。不过这里我要说的不是能不能写好CSS，我想和大家一起分享几个CSS的新特性。这个也是上周在天津在线回声公司分享的一个话题。整理一下有关于PPT中的内容，希望对大家有所帮助。

box-decoration-break属性是CSS片段模块（CSS Fragmentation Module Level 3）中的一个属性。主要用来指定background、padding、border、border-image、box-shadow和clip在行内元素中如何使用。行内元素的盒模型是打断的，也就是内联盒子是多行的情况之下。

在Web布局中，特别是在PC端中，常常可以看到这样的设计风格：内容居中，然后Banner区全屏。这也就是标题所说的效果，限宽的容器中实现全屏效果。那么问题来了，在实际中如何实现在限宽的容器中实现全屏效果。那么实际开发中以什么方式来做更为方便灵活呢？这就是这篇文章需要介绍的内容。

2014年@Jason Pamental写了一篇博客详细介绍了Web排版的缩放。@Richard Rutter在另一篇文章中介绍如何更好的表达你的排版。比如在一个Banner区，如何让文本显示的各为大气，又适合你的Web排版。

background属性是CSS中最常见的属性之一，它是一个简写属性，其包含background-color、background-image、background-repeat、background-attachment、background-position、background-clip、background-origin和background-size。你可能会说，这些属性再简单不过了，没有可讲的。这篇文章接下来要介绍的不是所有有关于background里面的属性，而是说说background-position属性。在详细介绍background-position之前，先要问大家，你真的了解这个属性吗？言外之意，接下来介绍是你所不了解的background-position相关细节。