多栏布局+弹性盒布局+盒布局

第26章 布局相关样式

26.1 多栏布局

26.1.1 使用float属性或positon属性的缺点

如果两栏或多栏中元素的内容高度不一致则底部很难对齐，导致页面中多出一块空白区域。

26.1.2 使用多栏布局

使用多栏布局可以将一个元素中额内容分为两栏或是多栏显示，并且确保各栏中内容的底部对齐。

1、需要将元素的宽度设置成多个栏目相加后的总宽度。

与float布局不同：float只需单独设置每个元素的宽度。

2、colum-width属性

单独设置每一栏的宽度而不设定元素的总宽度，并且在元素外面单独设立一个容器元素。

在Firefox浏览器中，需要书写成“-moz-column-width”；

在Chrome、Safari、Opera浏览器中需要书写成“-webkit-column-width”；

IE浏览器中不需要添加浏览器供应商前缀。

3、cloumn-gap属性

设定多栏之间的间隔，同样不同浏览器需要添加不同供应商前缀。

4、column-rule属性

在栏与栏之间增加一条间隔线，同浏览器需要添加不同供应商前缀。

26.2 盒布局

26.2.1 使用盒布局

1、设置box-sizing为border-box

注：border-box和conten-box(标准盒模型)的区别在于，border-box的宽为content+padding；而conten-box的宽就为content。

2、box属性 ， 再为每个元素设置自己的宽度，无需使用float

display: -moz-box

display: -webkit-box

26.2.2 盒布局与多栏布局的区别

多栏布局

1、使用多栏布局时，各栏宽度必须是相等的，栏与栏之间的宽度也必须相等；

2、不能指定具体栏中显示什么内容；

3、适用于在显示文章内容时使用多栏布局。

盒布局

每栏的宽度可以自己设置，可不一样。

26.3 弹性盒布局

26.3.1 对多个元素使用flex属性

1、display: flex，一般在父元素设置display:flex

让元素的宽度等于浏览器的总宽度，并且能够随着窗口宽度的改变而改变。

2、order属性

改变元素的显示顺序，order: 1、2、3，序号从小到大显示。

3、flex-direction属性

指定多个元素的排列反向

row：横向排列（默认值)；

row-reverse：横向反方向排列；

column：纵向排列；

column-reverse：纵向反向排列。

4、flex属性

属性值1、2、3·······

可对子元素设置flex：1来消除空白

可对多个子元素设置flex属性；设flex:1，则子元素的宽高度等于父容器的宽高度。

flex为1、2、3不同值时，指的是容器空白元素部分按照元素的flex属性值分配。

4、flex-shrink属性

当子元素的宽高总和大于父元素宽高时，通过flex-shrink：1、2、3按比例调整缩小；

5、flex-grow属性

当子元素的宽高总和小于父元素宽高时，通过flex-shrink：1、2、3按比例调整放大；

6、flex-wrap属性 在父元素中设置

控制换行方式

nowrap：不换行

wrap：换行

wrap-reverse：换行，且换行方向与使用wrap属性值时的换行方向相反

26.3.2 指定水平方向与垂直方向的对齐方式

1、justify-content属性 父容器中设置

指定在水平方向上的对齐方式

flex-start

flex-end

center

space-between

space-around

2、align-items属性 父容器设置,针对他的所有子元素

指定垂直方向上的对齐方式

flex-start

flex-end

center

baseline

stretch

3、align-self属性 在当前子元素上设置

auto：继承父元素的align-items属性

和其他父元素的属性值

4、align-content属性

指定各行的对齐方式

flex-start

flex-end

center

space-between

space-around

26.3.3 calc方法

1、通过该方法自动计算元素的高度、宽度等数值类型的样式属性值

如：在子元素上设置 width:calc(50%-100px)

当父元素的宽度改变是，子元素自动改变。

2、可以用来对不同技术单位进行混合运算

如：height:calc(10em+10px)