当前位置:Gxlcms > css > 有关CSS3布局排版的讲解

有关CSS3布局排版的讲解

时间:2021-07-01 10:21:17 帮助过:73人阅读

  前提

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

  效果一

  demo01.png

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

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

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

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

  如果想要实现分栏,我们可以利用 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布局排版的讲解的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行