css3 布局那些杂七杂八的事

1.grid

ie11+ 加前缀支持，chrome firefox支持，UC不支持

.container{display:grid;//变为网格容器，内item变为网格项目

grid-template-columns:50px 20% 1fr 1fr;

grid-template-rows:3rem 3rem 3rem}

.item{grid-column:1/4;

grid-row:2/3;

}

属性：display：grid|subgrid|inline-grid

grid-template-columns、grid-template-rows、grid-template-area创建显式的网格轨道

grid-auto-columns、grid-auto-rows、grid-auto-area创建隐式的网格轨道

grid-grap、grid-column-grap、grid-row-grap 网格间距

fr单位是指剩余部分等分

grid-auto-flow:row|column  网格流的方向，默认是row

minmax（100px,300px）创建网格轨道的最大最小尺寸

grid-column、grid-column-start、grid-column-end 网格项目的开始和结束

grid-row、grid-row-start、grid-row-end 网格项目的开始和结束 

span关键词  占几个网格轨道

grid-area:grid-row-start,grid-cloumn-start,grid-row-end,grid-column-end

2.box alignment 对齐方式

justify-items,align-items分别代表行轴和和列轴的对齐方式，该网格容器下的所有网格项目

justify-self,align-self 该网格项目自身的对齐方式

属性值包括：auto|normal|start|center|end|stretch|baseline|first baseline|last baseline

justfity-content,align-content网格轨道的对齐方式

属性值包括：normal|start|center|end|stretch|space-around|space-between|space-evenly|baseline|first baseline|last baseline

3.box-sizing和calc()

盒子模型包括为w3c标准模型和IE模型，w3c标准模型对应box-sizing:content-box,IE模型对应box-sizing：border-box。

在实际应用中，经常需要将宽度设置为包括border和padding的，即border-box，但其并未很好的推广在实际应用中，其原因包括

IE6,7对box-sizing不支持已经一些历史原因。多可以使用calc()方法来动态计算长度

width:calc（100% - 50px）任何长度值都可以使用，支持+，-，*，/四则运算，运算符前后都需要1个空格

兼容性，ie9及以上，其他