CSS3布局相关样式

2018年1月22日21:23:29 发表评论 13

我们所说的web页面布局是指如何对标题、导航栏、主要内容、表单等页面构成元素合理的排版,在css3之前,我们主要是通过float属性或position属性对页面进行简单布局,但是这样的布局方法存在一些缺点,比如两栏或者多栏内容高度不一样的话底部就很难对齐,在css3中,追加了一些新的布局方式,我们使用这些新的布局方式,可以更加快捷、方便的构建更为复杂的页面布局。

一、多栏布局

在介绍css3多栏布局之前,我们先来看看之前我们用float和position属性进行页面布局的一个显著的缺点,两个div页面内容不一样时,会出现两个元素的底部不能对齐,会导致页面中多出一块空白区域。

在css3中,我们通过column-count属性来使用多栏布局样式,该属性的含义是将一个元素中的内容分为多栏显示,为了兼容各大浏览器器,我们还需要加上特定的浏览器供应商前缀,比如firefox中需要写成“-moz-column-count”,还有chrome和safari下就写成“-webkit-column-count”

使用多栏布局的时候,我们需要设置元素的宽度为多个栏目的总宽度,然后再设置各自的宽度即可,我们使用column-width来设置每一栏的宽度,不是设置元素的宽度,依旧要对浏览器兼容性做处理。

使用column-gap属性可以设定多栏之间的间隔距离,column-rule属性可以在栏与栏之间增加 一条间隔线,并且可以设定线的宽度、颜色等。

二、盒布局

除了使用多栏布局来解决float和position布局底部不对齐问题,还可以使用盒布局,假设有三个div元素包含在一个命名为container元素中,三个div元素内容都不一样,使用float的话,如果内容一多一少,绝对会出现底部不对齐的情况。

这时候,我们只要设置container元素(最外层)的display为box,再设置三个div元素box-sizing为border-box就可以解决底部不对齐的问题了。

三、弹性盒布局

1. flex属性

如果我们要想页面布局随着浏览器 窗口宽度的改变而改变,也就是响应式布局,在盒布局的基础上,我们只需加一个flex属性就可以变为弹性盒布局了。

2. order属性

我们通过order属性来改变各元素的显示顺序,order属性值越小越靠前(从左到右)。

3. fiex-direction属性

  • row:横向排列(默认值)
  • row-reverse:横向反射排列
  • column:纵向排列
  • column-reverse:纵向反向排列

我们使用fiex-direction属性和值可以很方便的修改多个元素的排列方向。

 

猿梦

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: