7月14号学习

1.font-size和line-height（行距）

2.图片底部出现空白

            那怎么去掉这段空白呢，可以设置div的行高为0。

3. :hover的影藏和显示注意点

如果让鼠标划过box1然后显示boox2 一定要是父容器box设置:hover

.box2{

display: none;

}

.box:hover .box2{  /*box父容器 box2子容器*/

display: block;

}

3.@media查询

  参考手册

语法：@media mediatype and|not|only(media feature){CSS-Code;}

3-1媒体类型mediatype

    all 适用于所有设备

  screen 适用于电脑屏幕，平板电脑，智能手机

3-2 media feature媒体功能

---

4.flex的导航栏布局

                      导航栏随着浏览器宽度的改变的三种形态 

技巧：主要是justify-content的使用 第一个justify-content：flex-end 第二个justify-content：space-around第三个 默认

即flex-flow:row wrap; li 和a标签不设置宽度和高度 他们的宽度和高度用padding填充，字体居中设置text-align:center;

flex属性指南

5.flex头尾布局

   技巧：需要单独成一行的 flex-basis设置成100%； 项目合并一行的flex-basis设置成auto 即在一行内随着多余空间而占满一行但是每个项目的width由内容控制  若想每个width一样设置flex-basis为0；在宽度变的时候如想把33变成独立一行则设置为100%，改变order的顺序