HTMl5+CSS3布局相关样式学习笔记

    什么是网页的布局？网页布局是在页面中如何对标题，导航栏，主要类容，页脚，表单等各种构成要素进行一个合理的编排。

 1.多栏布局

1.column-count属性

在CSS3中，可以通过column-count属性来进行多栏布局，这个属性的含义是将一个元素中的类容分成多栏进行显示。

写法：column-count：栏目数；

需要注意的是，在使用多栏布局的时候，要将栏目的宽度设置成多个栏目的总宽度。

2.column-width属性，指定栏目的宽度来生成分栏。

格式：column-width:150px;

3.column-gap属性，指定栏目与栏目之间的距离

格式：column-gap:50px;

4.column-rule属性，栏目与栏目之间增加一条分割线

格式：column-rule：solid 1px #000;

2.盒布局

在CSS3中，使用box属性来使用盒布局，在火狐浏览器要把box写成“-moz-box”的形式，在谷歌浏览器中需要写成"-webkit-box“的形式。

多栏布局的栏目宽度必须相等，指定栏目宽度的时候也只能统一指定，所有多栏布局比较适合在文字类容页面使用，并不适合整个网页编排时使用。

3.弹性盒布局

1.使用自适应窗口的弹性盒布局

让div的宽度跟随浏览器窗口变化而变化：box-flex属性

2.改变元素的显示顺序

使用弹性盒布局的时候，可以通过box-ordinal-group属性来改变各个元素的显示顺序，在每个元素中加入box-ordinal-group属性，这个属性使用一个表示序号的正数属性值，浏览器在显示的时候根据序号从小到大来显示这些元素。