发表于: 2018-10-29 09:31:14

1 784


今天完成的事情:

主要进行任务五主体部分的代码编写,学习flex看怎么用在任务五中,查看师兄代码编写,以及任务中出现的问题查找原因修改


明天计划的事情:

继续调试任务五,现在出现的问题还比较多,不能与示例完全一致,比如一段文字如何自适应在所在盒子中,边距问题,复习之前的内容,包括浮动,定位等


遇到的问题:

任务五这里一直有一段边距,无法调整,我看师兄的问题是因为从住家那里开始有设置边距,同时又设了width100%,应该减去边距,但是试了之后还是没成功,使了把之前除了头部设置的width100%都去去掉就可以了,另外自我介绍那里一直无法调成自适应,字体一直不能设置在一行内,不知道是不是因为后面那段说明设置了position:absolute,已经脱离文档流,尝试改为flex调试

收获:

今天学习到的内容很少,主要还是在编写和调试任务五,大多用了盒子模型的边距调试字体,值得主要的是在设置了边距后要主要width设置不能再设为100%了,这样出来的效果就会有多出来的边框效果,还有学习flex编写效果,自己也试一下怎么编写。

1、flex此格式可以设置为垂直居中效果

display: flex;
align-items: center;
justify-content: center;

2、学习行内元素的盒模型

行内元素也是有盒模型的,但是有几点要注意:

1.对于非替换元素,比如a,span标签等
(1)可以设置margin-left和margin-right属性,无法设置margin-top和margin-bottom属性
(2)行内元素border和padding可以设置,但是border-top和padding-top到页面顶部后就不再增加

2.对于替换元素,比如input,img标签

margin,padding,border都有效果

3、加深理解浮动原理:http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html

之前对浮动理解比较浅显,只知道是浮动起来,脱离了文档流,下面的正常元素会顶上他原来的位置,但是它浮动是浮动到哪个位置不清楚,是上个元素的左右端,还是在原来的位置左右端,上面网站里就解释的比较清楚。

       假如某个div元素A是浮动的,如果A元素上一个元素也是浮动的,那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素,那么A元素会被挤到下一行);如果A元素上一个元素是标准流中的元素,那么A的相对垂直位置不会改变,也就是说A的顶部总是和上一个元素的底部对齐。

       div的顺序是HTML代码中div的顺序决定的。

       靠近页面边缘的一端是前,远离页面边缘的一端是后。


返回列表 返回列表
评论

    分享到