发表于: 2017-03-09 23:36:29
1 1164
今日完成:
1.分配到了3个bug,
一个是首页添加banner图。由于没有banner图,所以没有完成,
第二个bug是把班级里的内门弟子身份和我的头像那个相对应。自己改了下,发现班级里的内门弟子角标是写死了的。然后我把我的学院上的。身份角标 信息复制到班级弟子身份模块。但并不行。
第三个bug现在还么动。
2.演示了官网11期的bug,并发布到了测试环境。
3.听汤特讲了什么是浮动?有哪些清除浮动的方法?
4.晚上听冲冲,馨雨,思豪演示复盘项目,萝卜多的Demo.
明日计划:
继续修改bug.
遇到的问题:
官网的代码还不太熟悉。
今日收获:
复习了:
什么是浮动?
浮动不是一个正常流布局,浮动元素会从文档的正常流中删除,但是他还是会印象布局,浮动应用于所有的元素,当一个元素浮动时,其他内容会“环绕”该元素。
float属性有四个值:left,right分别浮动元素到相应的方向,none(默认),使元素不浮动,inherit将从父级元素获取float值
1、使用空标签清除浮动。 我用了很久的一种方法,空标签可以是div标签,也可以是P标签。这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清除浮动,并为其定义CSS代码:clear:both。此方法的弊端在于增加了无意义的结构元素。
对于使用额外标签清除浮动(闭合浮动元素),是W3C推荐的做法。至于使用<br />元素还是空<div></div>可以根据自己的喜好来选(当然你也可以使用其它块级元素)。不过要注意的是,<br />本身是有表现的,它会多出一个换行出来,所以要设定它的heigh为0,以隐藏它的表现。所以大多数情况下使用空<div>比较合适。
2、使用overflow属性。 此方法有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。使用该方法是只需在需要清除浮动的元素中定义CSS属性:overflow:auto,即可!也可以用overflow:hidden;”zoom:1″用于兼容IE6,也可以用width:100%。不过使用overflow的时候,可能会对页面表现带来影响,而且这种影响是不确定的,你最好是能在多个浏览器上测试你的页面;
3、使用after伪对象清除浮动。 该方法只适用于非IE浏览器 。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置height:0,否则该元素会比实际高出若干像素;要注意的是:从content属性是必须的,但其值可以为空,蓝色理想讨论该方法的时候content属性的值设为”.”,但我发现为空亦是可以的
4、浮动外部元素,float-in-float。这种方法很简单,就是把“#outer”元素也进行浮动(向左或者向右)。但是这种方法带来的别外一个问题就是和父级相邻的下一个元素会受到父级的影响位置会产生变化,所以使用这种方法一定要小心。有选择把页面中的所有元素都浮动起来,最后使用一个适当的有意义的元素(比如页脚)进行清理浮动,这有助于减少不必要的标记,但是过多的浮动会增加布局的难度。(这时候元素不会独占整行,因为元素也被设置为浮动类型了)
评论