布局type
- 固定宽度
- 不固定宽度
- 响应式（pc：固定 手机：不固定）
css type
- float
- flew
-
grid
图片来源饥人谷网课
上图为选用原则
float
- 子元素加float:left和width
- 父元素命名为.clearfix,然后
.clearfix:after{
content: "";
display: block;
clear: both;
}
.clearfix{
border: 1px black solid;}
就可以包住child div了。(注意border分开写)
经验
- 最后一个子级div留些空间或者不设width。设一个最大宽度就可了。
- float做不出响应式的，是为了ie设计。
- ie 6/7有bug，会有双倍margin的情况，解决的方法：
- 将错就错，把margin输入为原来1/2就好。
*加一个display：inline-block；
- 图片下面有多余部分：
下面有多出来的
加上vertical-align:top;就好了。 - 有时候无法居中对应：奇数px高度的素材与偶数px高度的无法对应的。
- 可以用outline代替border调试，因为border会增加素材的宽度和高度，eg一个1px border的素材width设置成100px，但是实际有102px。
- 块元素居中：```
margin-top:"auto";
margin-left:"auto";
8. 素材的宽度以及他们的间距：列方程试出来一个不是小数的就可了
9.负margin使用技巧
可以看到child的width为100px，margin是20px,如果没有负margin，就会这样。
可以看到明明3*100+20*2是340，但是容纳不下，这就是这样的。所以要使用负margin来进行容纳。
可以看到加了之后容纳下来了。
具体使用方法：
在父子元素中间再加一个元素，让他不仅是clearfix，而且还是命名为demo，然后对这个x进行
.demo{
float: left;
margin-left: -20p;
}
就OK了。
