CSS布局

布局：页面分块

布局的两种思路

从大到小：先定下大局，然后完善每个部分的小布局
从小到大：先完成小布局，然后组成大布局

布局分类

固定宽度布局

固定宽度，一般宽度为960px/1000px/1024px

不固定宽度布局

主要靠文档流（自适应）的原理来布局。主要用于手机端

响应式布局

pc固定宽度，手机上不固定宽度，混合布局

布局方式选择

布局指南.png

float布局

步骤

在子元素上加float:left和width

在父元素上加.clearfix（清除浮动）

.clearfix:after{
    content:'';
    display:block;
    clear:both;
}

布局小块之前先设置：

* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}

经验：

有经验的人会留一些空间或者最后一个不设width
不需要做响应式，因为手机上没有IE，float布局是专门为IE准备的
IE6/7存在双倍margin bug。将错就错将margin减半或者加一个dispaly：inline-block
border调试法占用的像素有时候会干扰布局块，可以使用outline来代替border。
平均布局是难点，需要调用-margin。

flex布局

基本概念

container:表示容器，一般作为父元素
1. 让一个元素变成flex容器
```
.container{
    display:flex;
    /*或者
    display:inline-flex;
    两者区别类似于block和inline-block的区别
    */
}
```
1. 改变items流动方向（主轴） flex-direction:colunm（从上到下）/row（从左到右）/row-reverse（从右往左）/colunm-reverse（从下望上）;
2. 改变折行

改变折行.png

flex布局的盒子中，宽/高度度超出不会自动折行，会压缩内容宽/高度。 flex-wrap:no-wrap（不折行）/wrap（折行）/wrap-reverse（反向折行）;

主轴的对齐方式：默认主轴是横轴，除非改变flex-direction的方向。 justify-content:flex-start;

主轴对齐方式.png

次轴对齐（默认次轴是纵轴）

align-items:flax-start;

次轴对齐.png

stretch是高度与最长的那个items的高度一致。

items：一般用作container的子元素

item上加order改变显示顺序（不写默认order为0，按照代码顺序排列）

 .item:first-child{
     order:10;/*会直接挪到第九个块的后面*/
 } 
 .item:nth-child(2){
     order:1;/*直接挪到未设置order元素的后面*/
     /*
     除了第一个和最后一个child，都用nth-child(n)表示。*/
 }
 .item:last-child{
     order:4;
 }

item上面加flex-grow，分配多余空间给item

通常写导航栏，三个部分（logo，导航，用户名）的flex-grow分别设置为0，1，0。只要有多余空间，都给中间导航部分

flex-shrink控制盒内挤压，默认为1，0表示不压缩，值越大表示压缩的越快，贡献的空间越多。
flex-basis 控制基准宽度（直接用width也可以）
以上三个属性可以缩写： css .item{ flex:1 1 100px; }
align-self可以定制items，但是要把属性写在具体的item上。

定制items.png

Grid布局

container

成为container

.container{
    display:grid | inline-grid;
}

grid可以把布局盒子分成行列

 .container{
     grid-template-columns:40px 50px auto 50px 40px;
     grid-template:20% 100px auto;
 }

效果图：

grid行和列.png

grid行列效果出来后，可以把内部元素通过行列数据放在指定位置，从顶端/侧端第一根线数起。 css .a{ grid-row-start:1; grid-row-end:3; grid-column-start:1; grid-column-end:3; }
可以使用fr把盒子分成一份一份的。比如： grid-template-column:1fr 2fr 1fr; 效果相当于把盒子1：2：1均分；
分区grid-template-areas

代码示例：

```css
.item-a{
    grid-area:header;
}
.item-b{
    grid-area:main;
}
.item-c{
    grid-area:sidebar;
}
.item-d{
    grid-area:footer;
}
.container{
    display:grid;
    grid-template-columns:1fr 1fr 1fr 1fr;
    grid-template-rows:auto;
    grid-template-areas:
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
}
```

分区效果：

grid-template-areas分区效果.png

设置空隙 gap * grid-gap:10px;/上下左右间隔10px/ * grid-column-gap:10px;/* 列与列之间间隔10px*/ * grid-row-gap:10px;/*行与行之间间隔10px */