7月14号学习
2017-07-14 本文已影响0人
benbensheng
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;
5.flex头尾布局
技巧：需要单独成一行的 flex-basis设置成100%； 项目合并一行的flex-basis设置成auto 即在一行内随着多余空间而占满一行但是每个项目的width由内容控制 若想每个width一样设置flex-basis为0；在宽度变的时候如想把33变成独立一行则设置为100%，改变order的顺序
