有关CSS3布局排版的讲解

　　前提

　　在介绍布局排版之前，我们首先引入一个尺寸单位，这个尺寸单位是在 CSS3 中新引入的，它就是 rem ，所有引用 rem 定义的字体大小都是相对于根元素 文本的大小，相对于使用 em，这种方式将我们从手动计算字体大小的繁琐过程中解脱出来。

　　效果一

　　demo01.png

　　只要利用 CSS3 提供给我们的新属性，我们可以很轻易的做出这么一个效果。下面我们针对用到的几个主要属性进行讲解。

立即学习“前端免费学习笔记（深入）”；

• 　　column-width : 用于指定列的宽度，一旦指定一个值，浏览器会根据当前浏览器的宽度，动态的决定将内容分为多少列。

• 　　column-rule : 这个属性是一种简写，其实它包含了三个不同的属性，分别是 column-rule-width, column-rule-style, column-rule-color，反正实现的就是在列之间加上一个分割线，和 border 属性的设置是相同的。

• 　　column-gap : 用于设置分栏的空隙属性，这个值由分栏两侧平摊。

  

  简篇AI排版

  AI排版工具，上传图文素材，秒出专业效果！

  554

  查看详情

　　如果想要实现分栏，我们可以利用 column-width ，也可以使用 column-count 属性，但是我们通常不这么做，因为这意味着必须要将内容分成三列，而不考虑当前浏览器的宽度，这是非常不友好的设计。

　　知道了以上属性之后，相信你可以很快的将我们示图中的效果实现出来，这里我们不在粘贴源代码，你可以 点此下载 。这里需要将一下，我们在页面中引用了一些好看的字体，如果你也想使用，你住需要将下面这一行代码粘贴到你的 标签下即可。

<link href='http://fonts.googleapis.com/css?family=Lobster|Terminal+Dosis' rel='stylesheet' type='text/css'>

　　效果二

　　demo02.png

　　这个效果我们使利用 Flexbox 实现的，下面针对用到的几个属性进行讲解。

• 　　display : 如果想要使用 Flexbox 布局，那么我们首先要将这个属性的值设置为 flex。

• 　　flex-flow : 这个属性其实是两个属性的缩写，其中一个是 flex-direction 用于设置主轴的方向，如果设置为 row 则是一水平方向为主轴，如果为 column 垂直方向为主轴。还有一个属性是 flex-wrap， 用于设置元素换行，当元素超出父元素宽度时就自动换行，这就可以实现自适应屏幕的效果。

• 　　flex : 这个属性一般在设置 display 为 flex 的子元素中设置，有三个参数，在这里不在详细解释，因为我也不太能组织语言解释它，可以百度查看一下该属性的使用方法。

以上就是有关CSS3布局排版的讲解的详细内容，更多请关注php中文网其它相关文章！