发表于: 2018-07-28 01:39:27
1 632
今天完成的事情:
1.完成了最后一个结果页面
2.把之前关于溢出内容隐藏不全或过多的坑給填了
3.替换页面字体大小单位为rem
4.切了任务8相关的图片
明天计划的事情:
1.准备再检查一遍,没问题后提交任务
2.总结一下这几天的日报和相关的知识点等
3.最后开始做任务8
遇到的问题:
1.结果页面出现了子元素内容溢出页面,利用overflow和限高度无法隐藏其溢出内容,后来用再加了个绝对定位就ok了
2.写页面的效率不高,需要多稳固一下基础知识和多多总结
收获:
1.为什么一个页面中的某个区域溢出的内容会跑到body和html两个最基本元素的外面而且在溢出内容的最近的父元素上设置限高和overflow无效?
因为这个溢出的内容的属性是依据更高一层的元素所决定的(比如浏览器的视窗或body),而不是它最近的父元素(不认识了),所以解决方法是在溢出内容 的最近的父元素上添加绝对定位,才能解决隐藏问题,这个感觉像是脱离上级而自立门户的感觉,不过还要注意一下绝对定位元素的祖先元素是谁,以防定位 错位
2.利用BFC布局可以消除float浮动的影响,使其消除非浮动的兄弟元素和其子元素带来的影响,浮动元素其脱离文档流的效果会失效,应该是浮动元素和普通元素的文档流在同一个层次上了,比如用普通A元素设置内联块后,其整个A元素会跟在浮动元素的后面(),类似与两个内联块元素并排的效果。并且在一个 BFC中,非块级盒子的块级容器(例如 inline-blocks, table-cells, 和 table-captions)都会垂直的沿着其父元素的边框排列。在使用BFC中inline-block和overflow(值不为“visiable”才生效)的差别还是有的,inline-block的整个元素自身能调整宽度,而用了overflow的元素其本身并不能调整宽度,只能调整其元素内的content宽度,而且它会多出一块儿无效的空间,其来自于前面浮动元素的空间。证实了BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。
3.关于圣杯布局和双飞翼布局的不同之处:
双飞翼布局时在自适应层里面再添加一个div层,然后再利用margin-left和margin-right对两个固定栏进行定位和布局,与圣杯布局用padding对比,双飞翼布局用margin只是多了一个额外的div层,但是少写了圣杯布局里面的4行代码:"position:relative"*2+"left:-200px"+"right:-220px",而且全局只用到了浮动float而没有用相对定位position:relative,所以如果再利用相对定位的话,那么在这三栏的基础上面还可以进行各种各样的布局。另外使用margin的负值,其效果类似于绝对定位(脱离文档流),负值越大,其元素占据的文档流空间就越小
评论