零碎知识点

1，inline-block的问题？

空隙和对齐

2，背景透明一般0.2

3，高贵的灰色#ddd

4，使用em设置尺寸，不要固定死宽高padding margin

图片.png

注意要设置容器的宽度：
设置最小宽度 16em 意思是一排最少设置16个字

5，map的使用

图片.png

arr.map(item,i)
item是当前传入的数组值
i是当前这个item在数组里面的下标

图片.png

map从一个数组得到另一个长度一样的数组

图片.png

6,display:flex的作用

1，给父包裹层添加，可清除浮动造成的父包裹层高度塌陷的问题
http://js.jirengu.com/malu/1/edit?html,css,output
2，在某个场景下，display:flex还有可以紧裹元素的效果

7，当设置图片宽度时，高度不自适应，可以设置align-items:flex-start 可以达到图片宽度可高度正常成比例显示。

7，写css的精髓：border大法

8，关于css 放置的位置和浏览器加载css文件的区别

1，为什么css写在head里面
1），css下载完成之前，不会去展示后面的html
2），css可以预加载，以节约下载时间
最多一个域名 请求 IE (4个) google (20个) firefox(10个)

Google
不管html在css前面还是在后面 都要等css下载完再 --展示--html
IE
只要看到一个html标签就展示
firefox
如果link在head里面 ，那么一定要等css下载完在展示html
如果link在bodoy里面 ，那么看到一个html标签就展示