第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)