欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

有关CSS3布局排版的讲解

程序员文章站 2022-05-01 12:41:53
...
  前提

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

  效果一

有关CSS3布局排版的讲解

  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'>

  效果二

有关CSS3布局排版的讲解

  demo02.png

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

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

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

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

以上就是有关CSS3布局排版的讲解的详细内容,更多请关注其它相关文章!

相关标签: CSS3,布局排版