发表于: 2019-05-18 22:41:31
1 807
今天完成了什么:
完成打回来的任务5.
今天遇到了什么问题:
1:在button标签下面添加了a标签超链接,发现其可以触发a标签的范围只有字体那一块区域并且不能设置宽高,于是添加了display: inline-block;转换为块元素,然后设置宽高100%;
再调用f12发现边框左右俩侧仍然还有一部分不能触发,查了下是botton的样式,所以我取消了button的padding值才使盒子里面随便一个位置点击都能触发;
/* 设置行高跟盒子高度一样使其剧中 */
另外字体一开始始终在上部分,紧贴着边框,我尝试了paddig,margin 0auto,text-align:center,align-items:center等属性值都发现还是无法垂直水平居中,最后不得不请教师兄才知道是没给盒子设置行高,把line-height设置为box的大小可以实现单行文字的垂直居中,于是添加了与盒子一样的高度才使其居中对齐。
2 在用弹性盒子和固定定位的时候发现会遮挡住自我介绍一栏,自己搞了很久也没搞明白,师兄指导说头部固定是怎么实现的,这才想起头部是用背景图片添加了margin-top的值超过了头部的高才正常显示,一开始我以为向下的东西都是无限延申的没法设置底部外边距这些,后来才懂只要添加了外边距,这个盒子的外边距就会找到最近的div元素盒子产生外边距。于是我给自我介绍的盒子添加了一定的margin才是其脱离。其外边距是指自我介绍盒子边框到底部留言盒子边框的距离,才得以解决问题。
3
在设置盒子大小时候,发现宽无法适应不同分辨率的情况,添加了左右的margin值都还是一样才是距离,跟效果图不合自己也试了很多方法,例如居左对齐,margin配合jusyify=conten使用都还是不行,询问师兄后得知用calc。左右俩边要设置的间距设置上,然后给俩个盒子单独配合使用calc-外边距的距离即可。
明天计划什么:
开始任务6
今天收获了什么:
收获了当宽跟高需要不同分辨率自适应伸展拉长下需要calc来使用,
line-height行高可以设置其所在行的垂直居中,其值需要跟盒子高度一样,这样才能在基线居中。
当拉动滚动条时,固定悬浮框挡住了主题或者其他内容,可能是margin或者z-index值没设置。
a标签设置大小需要转换 为display: inline-block,才能设置。
button有padding值,全部面积触发需要取消其值,多用f12调试。
评论