击上方“Web前端进阶指南”关注我呦

跟程序员小强一起学前端

这一篇呢，我们来说说CSS3一些高级有趣的属性，帮助我们更好的，更高效的去开发我们的页面，不仅在效率上提高很多，而且页面效果上更炫酷，下面一起来看看吧。

CSS3多列属性

CSS3多列属性有很多，我们一一来介绍一下，包括以下几个属性：

• column-count
• column-gap
• column-rule-style
• column-rule-width
• column-rule-color
• column-rule
• column-span
• column-width

1、CSS3创建多列

column-count属性指定了需要分割的列数，就是说你想要让你的文本显示多少列，我们不需要写很多个div，然后去限制字数，分别在每个div里调用多少字，还需要让div浮动，麻烦滴很啊，这是用CSS3多列我们自己就可以达到这样的需求。如图所示：

效果如下：

这样一来，我们就可以将文本分成3列显示，超出的文本自动隐藏，我们在写响应式页面的时候就可以用到它哦！

2、CSS3 多列中列与列间的间隙

调整多列中列与列间的间隙的时候我们就可以用column-gap，它就指定了列与列间的间隙，我们再也不需要专门给div设定浮动，还要设置它们之间的margin，有了它就可以像Swiper那样一个属性，轻轻松松设置间距，效果如上图那样，分成三列，并设置间距。代码如下：

3、CSS3 列边框

还有更好玩的多列属性。上面我们设置完了列与列的间距，这呢我们用column-rule-style属性来设置列与列之间的边框样式，我们不再用图片或者更多的CSS去写，它就可以了，例如：

这样我们就可以将文本分成3列，间距40px，列边框的样式为虚线，此外，我们还设定边框的宽度（column-rule-width），颜色（column-rule-color），并且像CSS中那样去用（column-rule）简写我们的多列边框，例如：

达到的效果如下：

顺便给大家说一下CSS有哪些边框样式，直接上图啦：

4、指定元素跨越多少列

就是给被指定的某个元素应该跨多少列，这时候我们就要用到（column-span）这个属性了，这个属性有两个值，一个是1，一个是all，这就是说如果有个文本我们把它分成3列，我们就可以指定它的标题占1列或者所有的列。如下图：

5、指定列的宽度

我们不仅可以把文本分成几列，还可以专门指定被分成列的宽度，这时候我们可以用column-width属性，来指定列的宽度。例如：

CSS3行数限制

限制在一个块元素显示的文本的行数，我们就可以用-webkit-line-clamp，由于它是一个不规范的属性，他没有出现在CSS规范草案中，不过并不代表我们不能用，为了使用它达到我们想要的效果，我们得结合一些属性，例如：

这样一来，我们就可以让我们的文本显示6行，其余的用省略号代替。

此外，我们也可以显示一行文本，多余的用省略号代替，例如：

CSS3 writing-mode 属性

writing-mode 属性定义了文本在水平或垂直方向上如何排版，这样我们就可以省去大量的CSS代码，一个属性就可以搞定，writing-mode有5个值，分别是：

• horizontal-tb：水平方向自上而下的书写方式。即 left-right-top-bottom
• vertical-rl：垂直方向自右而左的书写方式。即 top-bottom-right-left
• vertical-lr：垂直方向内内容从上到下，水平方向从左到右
• sideways-rl：内容垂直方向从上到下排列
• sideways-lr：内容垂直方向从下到上排列

我们可以让元素以任何形式放置在我们的表格当中，例如下图：

CSS3弹性盒子

这也是我们常用的知识，弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。容器内包含了一个或多个弹性子元素。

正常情况下，我们只需设置display:flex即可，弹性子元素元素就会在一行内显示（弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行），从左到右。

当然我们也可以修改排列方式，例如我们将body设置direction 属性为 rtl （right-to-left），弹性子元素的排列方式也会改变，页面布局也跟着改变，所有的子元素会靠近左侧排列，并且以倒序排列。

1、flex-direction

flex-direction 属性指定了弹性子元素在父容器中的位置。其属性值：

• row：横向从左到右排列（左对齐），默认的排列方式。
• row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
• column：纵向排列。
• column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

例如我们用row-reverse将子元素倒序排列：

2、justify-content 属性

内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。这样我们就可以更好地排列我们的文本了，它呢有5个值，例如：

• flex-start：弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。
• flex-end：弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。
• center：弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。
• space-between：弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。
• space-around：弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。

效果如下：

平时space-between用的最多，它会让弹性子元素均匀的分布在弹性盒子呢，而且是响应式的排列。

CSS3多媒体查询

CSS3多媒体查询可以针对不同的媒体类型(包括显示器、便携设备、电视机，等等)设置不同的样式规则。但是这些多媒体类型在很多设备上支持还不够友好。目前很多针对苹果手机，Android 手机，平板等设备都会使用到多媒体查询。像别的媒体，例如打印机、屏幕阅读器等的兼容性还不是很好。

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

比如说我们常用的响应式页面，我们想在媒体宽度最大500px显示图片，其余媒体不显示，我们就可以这样写：

总结

在使用本篇讲解的CSS3属性时，一定要注意其浏览器的兼容性，因为很多的CSS3属性都不支持主流的低版本的浏览器，基本IE10以上、FireFox3.5以上、Chrome21.0以上、Safari4.0以上才能很好地兼容，希望小伙伴们注意。

本期的CSS3到这里就全部讲解完了，也希望小伙伴们学的快乐，马上也到了寒假过年的好日子，希望大家不要忘记学习哈！

接下来的我们会很长一段时间去学习JavaScript，如果你想学，关注我，我将带领大家一起去学习。