布局即将元素以正确的大小摆放在正确的位置
其中重要的属性有：Display:设置元素的显示方式，它有以下几个值（不完全）
        block:默认宽度是父元素的宽度 可以设置宽高 换行显示
        inline:默认宽度是内容宽度 不可设置宽高 同行显式
        inline-block：默认宽度为内容宽度 可以设置宽高 同行显式 整块换行（后续元素的宽度如果超出范围，则会整块换行）表单元素默认是这个属性
        none:设置元素不显示
还有属性position（定位）：它可以实现元素叠加，设置定位方式，主要配合使用的属性有：top right bottom left z-index 设置位置
其中z-index是设置元素在Z轴上的排序，需要注意的是父元素中的Z-index权重总是要比子元素的Z-index要大的。position的值有（不完全）：
        static（默认）：没有定位
        relative:仍在文档流中 参照物为元素本身的位置 使用场景;绝对定位的参照物
        absolute:默认宽度是内容的宽度 脱离文档流 参照物是第一个定位祖先或者根元素
        fixed：默认宽度是内容宽度 脱离文档流 参照物是视窗（浏览器窗口））（IE6及以下不支持）
属性float:它默认宽度也是内容宽度，会脱离文档流，向指定的方向一直移动。但要注意的是多个float的元素在同一文档流中，而且其实，float元素是半脱离文档流的：对于元素是脱离文档流的即它后续的元素会占据它之前的位置，但对内容是在文档流的，但内容会围绕着它，不会被它覆盖。
与属性float经常配合使用的是clear:both|left|right。清楚浮动时应用于浮动元素的父元素中的最后，即浮动元素后面，经常给父元素添加clearfix伪类after：内容为：                      {content:‘.‘;display:block;clear:both;height:0;overflow:hidden;visibility:hidden;}
2009年，W3C提出了一种新的方案----Flex布局，即弹性布局，使用它可以简便地实现各种响应式页面布局。

关于flex我们首先需要认识几个名词：flex container:弹性容器；直接子元素flex item：弹性子元素； main axis:主轴；cross axis：副轴

使用display：flex即可设置flex布局容器。

学习flex布局我们需要关注三个方面，即方向、弹性和对齐。

关于方向的属性有：
       flex-direction:row|row-reverse|column|column-revers。它设置的是横着排还是竖着排

       flex-wrap:no-wrap|wrap|wrap-reverse。它设置的是当flex-item超出容器范围时允不允许换行，怎样换行。

       flex-flow:<‘flex-direction‘>||<‘flex-wrap‘>。它是以上两个属性的简写形式，即一次性设置以上两个属性。这个是推荐的写法

       order：<interger> 初始值为0（顺序值）。它设置直接子元素的排列顺序，数值越小，排列越靠前。

关于弹性的属性有：

       flex-basis:main-size|<width>。它设置flex item的初始宽高

       flex-grow：<number>默认值是0，它设置元素能获得的空余空间的比例，此时计算元素的宽度公式为：元素宽度=flex-basis+flow-grow/sum(flow-grow) * remain

       flex-shrink:默认值为1，它设置的是当空间不足时，如何按比例缩小

       flex:<‘flex-grow‘>||<‘flex-shrink‘>||<‘flex-basis‘> 初始值分别为0 1 main-size 它是以上三个属性的简写形式，即一次可以设置三个属性，是推荐写法。

关于对齐的属性有：

       justify-content:flex-start|flex-end|center|space-between|space-around。它是设置项目在主轴上的对齐方式

       align-items:flex-start|flex-end|center|space-between|space-around。它是设置项目在副轴上的对齐方式

       align-self:auto|flex-start|flex-end|center|baseline|stretch。它设置单个flex item在cross-axis方向上对齐方式

       align-content：ex-start|flex-end|center|space-between|sapce-around|stretch。设置cross-axis方向上行对齐方式(多行情况)

       注意：flex ie9及以下不支持，目前主要用于移动web页面中。

       感谢老范提供的课程，谢谢。

布局学习笔记