发表于: 2017-03-30 22:45:49
1 595
今天完成的事情:
1、更改了TASK4里不对的地方,header的三个元素都用line-height做了垂直剧中,footer的样式调整为button标签,input里的value换成了placeholder。
2、为task5的header研究了几种不定宽图片垂直居中的方式,display-table、vertical-align,text-align,inline-block。
3、开始进行task5,header部分完成
明天的计划:
完成task5,目前进度
遇到的问题:
主要还是各种垂直居中的情况,还有子元素margin-top的话,父元素也会跟着移动,查询后父元素加overflow:hidden解决。
收获:
1、了解了图片的垂直剧中方法。总结一下
需要设置line-height或设置display:table-cell;
.parent{display:table-cell;vertical-align:middle;height:20px;}
或者
.parent{display:inline-block;vertical-align:middle;line-height:20px;}
绝对定位
.parent{position:relative;}
.child{positon:absolute;top:50%;transform:translate(0,-50%);}
flex实现
.parent{display:flex;align-items:center;}
水平垂直全部居中
利用vertical-align,text-align,inline-block实现
.parent{display:table-cell;vertical-align:middle;text-align:center;}
.child{display:inline-block;
2、type=“button" 和<button>标签的区别。
作者: GD_SeHun
链接:http://www.imooc.com/article/2235
来源:慕课网
作者: GD_SeHun
链接:http://www.imooc.com/article/2235
来源:慕课网
评论