发表于: 2018-07-17 11:47:44

1 717


今天完成的事情: 总结代码规范,复习css基础知识;

明天计划的事情:进行任务7

遇到的问题:更深入的了解一下css,明白为何这么用;

收获:

清除浮动的方法?

1. 在父级div上定义height

  1. .outer{
  2. height:150px;
  3. }

不建议使用这种方法,因为这种方法只适合在高度固定的情况下使用,其他情况并不适用。

2. 在结尾处添加新的标签 clear:both

  1. .clearfix{
  2. clear:both;
  3. }
  4. <div class="outer">
  5. <div class="left">Left</div>
  6. <div class="right">Right</div>
  7. <div class="clearfix"></div>
  8. </div>

不推荐使用,使用多余的标签,会造成页面太过冗余。

3. 父级div定义:after伪类和zoom

  1. .outer:after{
  2. content:"";
  3. display:block;
  4. height:0;
  5. overflow:hidden;
  6. clear:both;
  7. }
  8. .outer{
  9. zoom:1;/*兼容IE浏览器*/
  10. }

多数网站用,推荐使用这种方法

4. 父级div定义overflow:hidden

  1. .outer{
  2. overflow:hidden;
  3. zoom:1;/*兼容IE浏览器*/
  4. }

不推荐使用这种方法。超出可视范围的内容将会被隐藏。

这种方法的原理是将父级元素变成BFC(块级格式化上下文)

5. 父级div一起浮动

  1. .outer{
  2. float:left;
  3. }

不推荐使用,可能会造成新的浮动问题



返回列表 返回列表
评论

    分享到