发表于: 2019-04-27 23:52:20
1 809
今天完成的事情:
1.完成并提交任务五
明天计划的事情:
1.完成任务六
遇到的问题:
1.做任务五的时候button内的文字不自动居中
1.1 询问师兄后得知是因为我给button设置的flex:inline,之所以设置这个是因为要给两
个相邻的button自适应的同时他们的宽度自适应,但三个间距固定不变,所以用了
flex的flex-grow,但是因为了解的不清楚,所以把该给容器设置的标签设置在了项目、
2.做任务五的时候设置vertical-align:middle不能居中
2.1 询问师兄后得知多个内联块元素在一个块中的时候,只设置一个子元素的vertical是
不行的,要给块中的子元素全部都设置vertical-align才可以让他们都垂直居中
3. 做任务五的时候发现border中的文字跟border的顶部有一丝的缝隙
3.1 我用的方法是给父元素设置line-height,让行高等于width,因为行高会遗传,所以
border内的子元素行高都和父元素一样,最后发现缝隙的原因是因为我一个块内有
两个字体大小,他们大小不一样,导致了缝隙的产生
4.做任务五的时候发现button标签默认会有凸起的效果
4.1 百度后发现有border可以直接修改button的样式,直接设置border:none就可以消
除button的凸起效果,另外还可以设置其他的样式,例如阴影效果等
收获:
1. 今天的收获主要就是那些做任务发现的问题,解决之后得到的收获,对button,flex,
vertical-align,line-height等标签有了更深的了解。并且整理了水平居中,垂直居中的
设置方式
评论