关于div及display

1、DIV

　　div被看作是一个盒子，可以设置width、height。这个盒子其实是由三部分构成width(height)、padding、border。在默认情况下，所见到的div是border和padding为零的。故三者加起来也就是平时默认情况下div的宽高总和。对div设置属性box-sizing，则会影响div外观的大小(在border或padding不为零的情况下)。

　　box-sizing: content-box->div的宽高就是设置的宽高，但是这时如果设置了border或padding属性值(为正值)，div盒子会变大，从外观上（可添加背景测试），但是作为容器的div容量并没有变大，能装的容量还是之前的大小，只是看起来变大而已——虚胖！！！

　　box-sizing: border-box->div整体的宽高由本身容器大小与border、padding之和所得。也就是设置border、padding值越大，div本身的容量就会越小。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            .aaa {
                box-sizing: content-box;
                /*box-sizing: border-box;*/
                width: 100px;
                height: 100px;
                padding: 20px;
                background: #ccc;
                border: #000 solid 10px;
            }
        </style>
    </head>
    <body>
        <div class="aaa">
            2019.5.9 21.27分
        </div>
    </body>
</html>

2、display：flex（注意浏览器兼容）

　　flex是flexible box的缩写，意为“弹性布局”，为盒装模型提供最大的灵活性，可运用在行内元素（display: -ms-flexbox; display: -webkit-inline-flex; display: inline-flex;）或容器（display: -ms-flexbox; display: -webkit-flex; display: flex；）中，设置该布局后，子元素的float、clear和vertical-align属性将失效。

　　采用Flex布局的元素成为Flex容器，简称容器；它的所有子元素自动成为容器成员，称为Flex项目，简称项目。

　　容器默认存在两根轴，水平主轴（main axis）、垂直交叉轴（cross axis）；main start是主轴的开始位置（与边框的交叉点），main end是结束位置；cross start是交叉轴的开始位置，cross end是结束位置；项目默认从主轴排列，main size是单个项目占据的主轴空间，cross size是占据的交叉轴空间。

　　flex容器的属性有以下几个：

　　●flex-direction：决定项目在主轴方向的排列方向，可能值如下：

　　　　row（默认）：主轴为水平方向，起点左端；

　　　　row-reverse：主轴为方向水平，起点右端；

　　　　column：主轴为垂直方向，起点在顶部；

　　　　row-reverse：主轴为垂直方向，起点在底部；

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>flex-direction</title>
        <style>
            .flexContainer {
                display: flex;
                float: left;
                width: 130px;
                height: 130px;
                margin: 5px;
                background: lightblue;
            }
            
            .fc1 { flex-direction: row;}
            .fc2 { flex-direction: row-reverse;}
            .fc3 { flex-direction: column;}
            .fc4 { flex-direction: column-reverse;}
            
            .flexItem {
                width: 25px;
                height: 25px;
                background: lightpink;
                border: cornflowerblue solid 1px;
            }
        </style>
    </head>
    <body>
        <p>flex-direction决定项目在主轴方向的排列:rowrow-reverse columncolumn-reverse</p>
        <div class="flexContainer fc1">
            <div class="flexItem"><i>1</i></div>
            <div class="flexItem"><i>2</i></div>
            <div class="flexItem"><i>3</i></div>
        </div>
        <div class="flexContainer fc2">
            <div class="flexItem"><i>1</i></div>
            <div class="flexItem"><i>2</i></div>
            <div class="flexItem"><i>3</i></div>
        </div>
        <div class="flexContainer fc3">
            <div class="flexItem"><i>1</i></div>
            <div class="flexItem"><i>2</i></div>
            <div class="flexItem"><i>3</i></div>
        </div>
        <div class="flexContainer fc4">
            <div class="flexItem"><i>1</i></div>
            <div class="flexItem"><i>2</i></div>
            <div class="flexItem"><i>3</i></div>
        </div>
    </body>
</html>

　　●flex-wrap：项目在默认情况下是在一条线（又称轴线）上排列的，该属性定义如果一条轴线上排不下，如何进行换行，属性值如下：

　　　　nowrap（默认）：不换行；

　　　　wrap：换行，第一行在上面；

　　　　wrap-reverse：换行，第一行在下面；

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>flex-wrap</title>
        <style>
            .flexContainer {
                display: flex;
                margin: 10px;
                background: lightblue;
            }
            
            .fc1 { width: 300px;}
            .fc2 { width: 200px;}
            .fc3 { width: 200px; flex-wrap: wrap;}
            .fc4 { width: 200px; flex-wrap: wrap-reverse;}
            
            .flexItem {
                width: 30px;
                height: 30px;
                background: lightpink;
                border-radius: 50%;
                border: #888 solid 1px;
                text-align: center;
                color: #fff;
            }
        </style>
    </head>
    <body>
        <div class="flexContainer fc1">
            <div class="flexItem"><i>1</i></div>
            <div class="flexItem"><i>2</i></div>
            <div class="flexItem"><i>3</i></div>
            <div class="flexItem"><i>4</i></div>
            <div class="flexItem"><i>5</i></div>
            <div class="flexItem"><i>6</i></div>
            <div class="flexItem"><i>7</i></div>
            <div class="flexItem"><i>8</i></div>
            <div class="flexItem"><i>9</i></div>
        </div>
        <div class="flexContainer fc2">
            <div class="flexItem"><i>1</i></div>
            <div class="flexItem"><i>2</i></div>
            <div class="flexItem"><i>3</i></div>
            <div class="flexItem"><i>4</i></div>
            <div class="flexItem"><i>5</i></div>
            <div class="flexItem"><i>6</i></div>
            <div class="flexItem"><i>7</i></div>
            <div class="flexItem"><i>8</i></div>
            <div class="flexItem"><i>9</i></div>
        </div>
        <div class="flexContainer fc3">
            <div class="flexItem"><i>1</i></div>
            <div class="flexItem"><i>2</i></div>
            <div class="flexItem"><i>3</i></div>
            <div class="flexItem"><i>4</i></div>
            <div class="flexItem"><i>5</i></div>
            <div class="flexItem"><i>6</i></div>
            <div class="flexItem"><i>7</i></div>
            <div class="flexItem"><i>8</i></div>
            <div class="flexItem"><i>9</i></div>
        </div>
        <div class="flexContainer fc4">
            <div class="flexItem"><i>1</i></div>
            <div class="flexItem"><i>2</i></div>
            <div class="flexItem"><i>3</i></div>
            <div class="flexItem"><i>4</i></div>
            <div class="flexItem"><i>5</i></div>
            <div class="flexItem"><i>6</i></div>
            <div class="flexItem"><i>7</i></div>
            <div class="flexItem"><i>8</i></div>
            <div class="flexItem"><i>9</i></div>
            <div class="flexItem"><i>10</i></div>
            <div class="flexItem"><i>11</i></div>
            <div class="flexItem"><i>12</i></div>
            <div class="flexItem"><i>13</i></div>
            <div class="flexItem"><i>14</i></div>
            <div class="flexItem"><i>15</i></div>
            <div class="flexItem"><i>16</i></div>
            <div class="flexItem"><i>17</i></div>
            <div class="flexItem"><i>18</i></div>
        </div>
    </body>
</html>

　　●flew-flow：flex-direction属性和flew-wrap属性的简写形式。

　　　　flex-flow: <flex-direction> || <flew-wrap>;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>flex-direction和flex-wrap属性的简写</title>
        <style>
            .flexContainer {
                display: flex;
                float: left;
                flex-flow: row-reverse  wrap;
                width: 120px;
                height: auto;
                background: lightblue;
            }
            
            .flexItem {
                width: 30px;
                height: 30px;
                margin: 1px;
                background: lightpink;
                color: #fff;
            }
        </style>
    </head>
    <body>
        <div class="flexContainer">
            <div class="flexItem"><i>1</i></div>
            <div class="flexItem"><i>2</i></div>
            <div class="flexItem"><i>3</i></div>
            <div class="flexItem"><i>4</i></div>
            <div class="flexItem"><i>5</i></div>
        </div>
    </body>
</html>

　　●justify-content：定义项目在主轴上的对齐方式（主轴的方向由flex-direction决定），属性值如下：

　　　　flex-start（默认）：项目随水平主轴自左往右，垂直主轴自上而下排列；

　　　　flex-end: 项目随水平主轴自右往左，垂直主轴自下而上排列（注意，如当flex-direction：column-reverse时，自下而上会变成自上而下）；

　　　　flex-center: 项目随水平主轴水平居中，随垂直主轴垂直居中；

　　　　space-around: 每个项目两侧的间隔相等，所以项目之间的间隔比项目与边框的间距大一倍；

　　　　space-between：项目在水平主轴左右两端，垂直主轴上下两端排列，项目之间的间距相等；

　　　　注意：当使用 justify-content:space-aroud / justify-content:space-between 时，设一行有三个元素，而最后一行有两个元素就会布局很奇怪，解决方法，flex容器后面添加伪类元素，其width和其他子项目一样，flexDiv;after{content:''; width:同子元素一样}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>justify-content</title>
        <style>
            .flexContainer {
                display: flex;
                width: 400px;
                height: 70px;
                background: lightblue;
                margin: 10px;
                flex-direction: row-reverse;
            }
            
            .flexContainer1 {
                display: flex;
                float: left;
                width: 150px;
                height: 200px;
                background: lightblue;
                margin: 10px;
                flex-direction: column-reverse;
            }
            
            .fc1{ justify-content: flex-start; }
            .fc2{ justify-content: flex-end; }
            .fc3{ justify-content: center; }
            .fc4{ justify-content: space-around;}
            .fc5{ justify-content: space-between;}
            
            .flexItem {
                background: lightpink;
                border: #888 solid 1px;
            }
        </style>
    </head>
    <body>
        <p>flew-direction: row(row-reverse也可以，只是顺序倒过来)</p>
        <div class="flexContainer fc1">
            <div class="flexItem ft1" style="width: 100px; height: 40px;"><i>1</i></div>
            <div class="flexItem ft3" style="width: 120px; height: 30px;"><i>2</i></div>
            <div class="flexItem ft2" style="width: 80px; height: 50px;"><i>3</i></div>
        </div>
        <div class="flexContainer fc2">
            <div class="flexItem ft1" style="width: 100px; height: 40px;"><i>1</i></div>
            <div class="flexItem ft3" style="width: 120px; height: 30px;"><i>2</i></div>
            <div class="flexItem ft2" style="width: 80px; height: 50px;"><i>3</i></div>
        </div>
        <div class="flexContainer fc3">
            <div class="flexItem ft1" style="width: 100px; height: 40px;"><i>1</i></div>
            <div class="flexItem ft3" style="width: 120px; height: 30px;"><i>2</i></div>
            <div class="flexItem ft2" style="width: 80px; height: 50px;"><i>3</i></div>
        </div>
        <div class="flexContainer fc4">
            <div class="flexItem ft1" style="width: 100px; height: 40px;"><i>1</i></div>
            <div class="flexItem ft3" style="width: 120px; height: 30px;"><i>2</i></div>
            <div class="flexItem ft2" style="width: 80px; height: 50px;"><i>3</i></div>
        </div>
        <div class="flexContainer fc5">
            <div class="flexItem ft1" style="width: 100px; height: 40px;"><i>1</i></div>
            <div class="flexItem ft3" style="width: 120px; height: 30px;"><i>2</i></div>
            <div class="flexItem ft2" style="width: 80px; height: 50px;"><i>3</i></div>
        </div>
        <p>flew-direction: column-reverse(column)</p>
        <div class="flexContainer1 fc1">
            <div class="flexItem ft1" style="width: 100px; height: 40px;"><i>1</i></div>
            <div class="flexItem ft3" style="width: 100px; height: 40px;"><i>2</i></div>
            <div class="flexItem ft2" style="width: 100px; height: 40px;"><i>3</i></div>
        </div>
        <div class="flexContainer1 fc2">
            <div class="flexItem ft1" style="width: 100px; height: 40px;"><i>1</i></div>
            <div class="flexItem ft3" style="width: 100px; height: 40px;"><i>2</i></div>
            <div class="flexItem ft2" style="width: 100px; height: 40px;"><i>3</i></div>
        </div>
        <div class="flexContainer1 fc3">
            <div class="flexItem ft1" style="width: 100px; height: 40px;"><i>1</i></div>
            <div class="flexItem ft3" style="width: 100px; height: 40px;"><i>2</i></div>
            <div class="flexItem ft2" style="width: 100px; height: 40px;"><i>3</i></div>
        </div>
        <div class="flexContainer1 fc4">
            <div class="flexItem ft1" style="width: 100px; height: 40px;"><i>1</i></div>
            <div class="flexItem ft3" style="width: 100px; height: 40px;"><i>2</i></div>
            <div class="flexItem ft2" style="width: 100px; height: 40px;"><i>3</i></div>
        </div>
        <div class="flexContainer1 fc5">
            <div class="flexItem ft1" style="width: 100px; height: 40px;"><i>1</i></div>
            <div class="flexItem ft3" style="width: 100px; height: 40px;"><i>2</i></div>
            <div class="flexItem ft2" style="width: 100px; height: 40px;"><i>3</i></div>
        </div>
    </body>
</html>

　　●align-items：定义项目在交叉轴上对齐方式（交叉轴方向由flex-direction决定从上到下，还是从左到右）。

　　　　flex-start：项目随垂直交叉轴自上而下，水平交叉轴自左往右；

　　　　flex-end：项目随垂直交叉轴自下而上，水平交叉轴自右往左；

　　　　center：项目在垂直交叉轴居中，水平交叉轴居中；

　　　　baseline：项目在垂直交叉轴以第一行文字的基线对齐，水平交叉轴上呢，嗯？？

　　　　stretch（默认值）：项目在垂直交叉轴上，如果高度未设置或为auto时，占满整个容器的高度；在水平交叉轴上，如果宽度未设置或为auto，将占满整个容器的宽度。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>align-item</title>
        <style>
            .flexContainer {
                display: flex;
                float: left;
                width: 150px;
                height: 100px;
                margin: 5px;
                background: lightblue;
            }
            
            .fc1 { align-items: flex-start; }
            .fc2 { align-items: flex-end; }
            .fc3 { align-items: center; }
            .fc4 { align-items: baseline; }
            .fc5 { align-items: stretch; }
            
            .flexItem {
                background: lightpink;
                border: #A1A1A1 solid 1px;
            }
            
            /* 这部分测试的是align-items在交叉轴（纵轴）方向的排列 */
            /* 如果不设定具体宽高，则项目的宽高是由内容所决定的  */
            .ft1 { width: 40px; height: 20px; }
            .ft2 { width: 60px; height: 70px; }
            .ft3 { width: 30px; height: 40px; }
            /* 测试项目在纵轴方向上高度自适应，align-items：stretch时的效果  */
            .fcft div { height: auto; }
            
            /* 测试align-items在交叉轴（水平）方向排列  (flex-direction: cloumn)*/
            .fc {
                display: flex; 
                flex-direction: column;
                width: 100px;
                height: 150px;
            }
            .fcft1 div { width: auto; }
        </style>
    </head>
    <body>
        <p>align-items在交叉轴（垂直）上排列(flex-direction:row,项目水平排列[一行])</p>
        <div class="flexContainer fc1">
            <div class="flexItem ft1"><i>1</i></div>
            <div class="flexItem ft2"><i>2</i></div>
            <div class="flexItem ft3"><i>3</i></div>
        </div>
        <div class="flexContainer fc2">
            <div class="flexItem ft1"><i>1</i></div>
            <div class="flexItem ft2"><i>2</i></div>
            <div class="flexItem ft3"><i>3</i></div>
        </div>
        <div class="flexContainer fc3">
            <div class="flexItem ft1"><i>1</i></div>
            <div class="flexItem ft2"><i>2</i></div>
            <div class="flexItem ft3"><i>3</i></div>
        </div>
        <div class="flexContainer fc4">
            <div class="flexItem ft1"><i style="font-size: 23px;">1</i></div>
            <div class="flexItem ft2"><i style="font-size: 50px;">2</i></div>
            <div class="flexItem ft3"><i style="font-size: 30px;">3</i></div>
        </div>
        <div class="flexContainer fcft fc5">
            <div class="flexItem ft1"><i>1</i></div>
            <div class="flexItem ft2"><i>2</i></div>
            <div class="flexItem ft3"><i>3</i></div>
        </div>
        <hr style="clear: both; border: #000 solid 1px;">
        <p>align-items在水平交叉轴上的排列(flex-direction:column,项目垂直排列[一列])</p>
        <div class="flexContainer fc fc1">
            <div class="flexItem ft1"><i>1</i></div>
            <div class="flexItem ft2"><i>2</i></div>
            <div class="flexItem ft3"><i>3</i></div>
        </div>
        <div class="flexContainer fc fc2">
            <div class="flexItem ft1"><i>1</i></div>
            <div class="flexItem ft2"><i>2</i></div>
            <div class="flexItem ft3"><i>3</i></div>
        </div>
        <div class="flexContainer fc fc3">
            <div class="flexItem ft1"><i>1</i></div>
            <div class="flexItem ft2"><i>2</i></div>
            <div class="flexItem ft3"><i>3</i></div>
        </div>
        <div class="flexContainer fc fc4">
            <div class="flexItem ft1" style="text-align: center;"><i style="font-size: 20px;">1</i></div>
            <div class="flexItem ft2" style="text-align: right;"><i style="font-size: 50px;">2</i></div>
            <div class="flexItem ft3" style="text-align: center;"><i style="font-size: 30px;">3</i></div>
        </div>
        <div class="flexContainer fc fcft1 fc5">
            <div class="flexItem ft1"><i>1</i></div>
            <div class="flexItem ft2"><i>2</i></div>
            <div class="flexItem ft3"><i>3</i></div>
        </div>
    </body>
</html>

　　●align-content：定义多根轴线的对齐方式，如果项目只有一根轴线，该属性不起作用。

　　　　flex-start：与交叉轴的起点对齐；

　　　　flex-end：与交叉轴的终点对齐；

　　　　center：与交叉轴的中点对齐；

　　　　space-between：与交叉轴两端对齐，轴线之间间隔平均分布；

　　　　space-around：每根轴线两侧的间隔都相等，所以，轴线之间的间隔比轴线与边框的间隔大一倍；

　　　　stretch（默认值）：轴线占满整个交叉轴；

3、项目的属性（注意浏览器兼容）

　　●order：定义项目的排列顺序，数值越小，排列越靠前，默认为0，语法：.item { order: integer }

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>项目排列顺序</title>
        <style>
            .flexContainer {
                display: flex;
                flex-direction: row;
                padding: 2px;
                margin: 10px;
                background: lightblue;
            }
            .flexItem {
                width: 40px;
                height: 20px;
                margin: 3px;
                background: lightpink;
            }
            .ft1 { order: -1; }
            .ft2 { order: 0; }
            .ft3 { order: 1; }
            .ft4 { order: 2; }
            .fc { flex-direction: column; }
        </style>
    </head>
    <body>
        <div class="flexContainer">
            <div class="flexItem ft1">-1</div>
            <div class="flexItem ft2">0</div>
            <div class="flexItem ft3">1</div>
            <div class="flexItem ft4">2</div>
        </div>
        <div class="flexContainer fc">
            <div class="flexItem ft1">-1</div>
            <div class="flexItem ft2">0</div>
            <div class="flexItem ft3">1</div>
            <div class="flexItem ft4">2</div>
        </div>
    </body>
</html>

　　●flew-grow：定义项目的放大比例，默认为0（即如果存在剩余空间，也不会放大），每个元素的放大数值由自身的flew-grow值除以总的flew-grow数，再乘以剩余的宽度，语法：item { flex-grow: <number>; }

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>项目放大</title>
        <style>
            .flexContainer {
                display: flex;
                height: 70px;
                background: lightblue;
            }
            
            .flexItem {
                height: 50px;
                margin: 2px;
                background: lightpink;
                border: #888 solid 1px;
            }
            
            .ft1 { width: 50px; }
            .ft2 { width: 100px; }
            .ft3 { width: 150px; }
            
        </style>
    </head>
    <body>
        <div class="flexContainer">
            <div class="flexItem ft1"></div>
            <div class="flexItem ft2"></div>
            <div class="flexItem ft3"></div>
        </div>
        <br />
        <div class="flexContainer fc">
            <div class="flexItem ft1" style="flex-grow: 1;"></div>
            <div class="flexItem ft2" style="flex-grow: 1.5;"></div>
            <div class="flexItem ft3" style="flex-grow: 2;"></div>
        </div>
    </body>
</html>

　　●flex-shrink：定义项目的缩小比例，默认1，即空间不足将缩小。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>flex-shrink项目缩小比例</title>
        <style>
            .flexContainer {
                display: flex;
                background: lightblue;
                margin: 5px;
            }
            .fc{ min-width: 550px;}
            
            .flexItem {
                height: 50px;
                background: lightpink;
            }
            
            .ft1 { width: 50px; }
            .ft2 { width: 100px; }
            .ft3 { width: 150px; }
            
        </style>
    </head>
    <body>
        <div class="flexContainer">
            <div class="flexItem ft1" style="flew-shrink： 1"></div>
            <div class="flexItem ft2" style="flew-shrink： 2"></div>
            <div class="flexItem ft3" style="flew-shrink： 2.5"></div>
            <div class="flexItem ft3" style="flew-shrink： 2.5"></div>
            
        </div>
        <div class="flexContainer fc">
            <div class="flexItem ft1"></div>
            <div class="flexItem ft2"></div>
            <div class="flexItem ft3"></div>
            <div class="flexItem ft3"></div>
        </div>
    </body>
</html>
该例子不放图了,因为整体没有设margin或border值，项目之间没有间隔，不好区分（其实是我设了margin值后不知道怎么计算更准确，个人水平暂时解决不了）可以通过控制台查看各个元素宽。
具体缩小程度计算方法如下：
　　比如原来容器的width：450（50+100+150+150），缩小后容器的width：326px，也就是整体缩小了124px，则每个项目的缩小宽度等于本身没有缩小前的宽度减去缩小前宽度除以缩小前容器宽度乘以容器整体缩小的宽度，即50-50/450*(450-326)。这里的计算不用带上flew-shrink值。

　　●flex-basis：定义在分配多余空间之前项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间，默认值为auto，即项目本身大小。如果该值设跟width或height属性一样的值（比如200px），则项目将占据固定空间——item{flex-basis: <length> | auto;}

　　●flex：flex-grow、flex-shrink、flex-basis的简写，默认值为：0 1 auto；

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .a {
                width: 450px;
                height: 300px;
                display: flex;
                flex-direction: row;   /* 项目应该是水平、由左往右排列  */
                padding: 5px;
                background: lightblue;
                
                /*justify-content: flex-end;*/
                align-items: flex-end;
            }
            
            .b {
                width: 120px;
                height: 30px;
                background: lightpink;
                margin: 3px;
            }
            
        </style>
    </head>
    <body>
        justify-content: flex-end; flex-direction决定的的是各个子项目的排序方向，在没有其他属性作用下从而决定整体，而justify-content则只决定整体,align-items同理。
        <div class="a">
            <div class="b" style="align-self: flex-start;">1you are the best</div>
            <div class="b">2you are the best</div>
            <div class="b">3you are the best</div>
        </div>
    </body>
</html>

3、display：table-cell

　　用途：　　

　　行内元素中设置垂直居中，行内元素如果放的是文字，并给该元素添加具体的宽高，内容不超出行内元素的宽高，垂直居中效果比较明显。但如果该容器添加的内容比给定的宽高大（比如图片），该容器的宽高也会变大，直到和内容一样。代码如下：　　

　　运用在块级元素中，

关于div及display

推荐阅读