发表于: 2019-01-09 23:10:27

1 725


今天完成的事情:(一定要写非常细致的内容,比如说学会了盒子模型,了解了Margin)

1、完成了任务13的页面编写。

 任务13第二个页面的编写重新使用了flex在写了一边,这次对于盒子的嵌套没有之前那么复杂了,

现在回头看之前写的html的代码,用了flex又用了绝对定位,div是套了一层又一层,所以就会有很多属性影响出现很多问题,这次同样是用的flex来写的,这次只套了三层div,

然后用justify-content:space-around让三个div分别排成一列,这个是给最大父级div设的,其次是给“text-box”这个父级设置flex-direction:column,让两个文字的p元素盒子上下排列,其实这里给定义了flex后,效果就如下图:

因为我的想法是每一个父级都用flex来解决。所以我这里就用flex-direction:column让定义后的p元素上下排列。然后再设flex的水平垂直居中对齐,这时就有个问题,因为文字是用p元素包含的,所以我要文字垂直居中,给父级设的垂直居中只是让p元素这个盒子达到了居中的效果,文字并没有,这里我们在写的过程是没有看到居中的,其实p元素盒子已经水平居中了,上图的效果就是给text-box设flex后垂直居中了,所以我这里让文字居中我又给p元素设了flex的水平垂直居中属性解决了文字的问题。代码如下:

.box-box {
display: flex;
justify-content: space-around;
width: 100%;
}
.text-box {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 20vw;
height: 20vw;
border: 3px solid #fff;
}
.text-box > .water {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 70%;
font-size: 3vw;
background: #f5c97b;
}

同样的写法,下面的四个小图也是用flex来写的,通过几行代码就能解决,div的嵌套也不是很繁琐。

这次写下来就两个小时。


明天计划的事情:(一定要写非常细致的内容) 

开始了解任务14.15中的知识点。

遇到的问题:(遇到什么困难,怎么解决的) 



收获:(通过今天的学习,学到了什么知识)



返回列表 返回列表
评论

    分享到