布局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，就会这样。
![这里的负margin没有写全px不生效的](https://img.haomeiwen.com/i19247518/c054dd6e18af05b4.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
可以看到明明3*100+20*2是340，但是容纳不下，这就是这样的。所以要使用负margin来进行容纳。
![负的margin-left](https://img.haomeiwen.com/i19247518/852a7855d08a6a9a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
可以看到加了之后容纳下来了。
具体使用方法：
在父子元素中间再加一个元素，让他不仅是clearfix，而且还是命名为demo，然后对这个x进行

.demo{
float: left;
margin-left: -20p;
}