注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

一车,一房,一个温暖家

10万左右的车,80平方的房子,这是我奋斗的暖暖的家

 
 
 

日志

 
 

引用 感悟css(二)   

2015-04-28 16:21:23|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
本文转载自伯平《感悟css(二)》

  我遇到一个麻烦,关于浮动的。我看别人的代码,别人想怎么浮就怎么浮,我一搞浮动,那些块就参差不齐。郁闷啊。不晓得今天搞不搞得定这个浮动的问题。

  我之所以喜欢用浮动,实在是因为这个东西太好用了。块盒子们可以相互连起来,而不用把它们的display改成inline。以前我一直打把display改成inline主意,但是。现在晓得了,绝大多数情况下不应当承便更改盒子的默认显示方式。改动了,那么就不得不修改它的边距、内边距。这通常比较麻烦。所以。还是要用浮动。

  我用浮动时遇到几个问题:

  一、如下:

       #a1{float:left;}

  div{width:100px;

     height:100px;}

  <div id="a1"></div>

  <div id="a2"></div>

  如果用上面的代码,在ie中没有什么问题,但是一跑到firefox中就会出现a2跟1显示到一块去了。后来,我一看别人的代码才发现,原来,两个盒子都要设成浮动就不会出现这个问题。如下:

  div{float:left;

    width:100px;

     height:100px;}

  <div id="a1"></div>

  <div id="a2"></div>

  结论:如果要浮动。要把所有需要围着它转的元素也要设成浮动。不然,结果不可预料。如果要停止浮动。必须要用:

  .clear{clear:both;}

  <div class="clear"></div>的方式,不然,如果第一个浮动内容的前一个盒子是内联盒子,那么,此浮动内容将会跟在那个内联盒子的后面,这个结果往往并不是我们所需要的。这个技巧学自163。我看到163都是这么干的。

 

  看了mail.163.com的页面布局,我才晓得,absolute定位有时也用得蛮多的。我看这个页面里面,大部分都是用的绝对定位。还有很多是用table来布的局。可能我得思考一下,什么时候用table,什么时候用div了。

  对于绝对定位,需要搞清楚一个概念:包含块!一个被设置成绝对定位的块,它的偏移量是相对于其包含块的。并不一定是body!!什么叫包含块。这个概念很重要:

  包含块是包含被显示盒子的父盒子之一——但不一定是直接父代,包含块定义为离设置了position属性值(除static外还有其他属性)的盒子最近的祖先。如果盒子的祖先都没有设置position属性,那么包含块就是<body>标签的显示盒了。

  上面这段话是我从语上抄下来的。简而言之,就是从此标签向祖先追溯,直到遇到第一个设置了非static的postion属性的祖先标签为止,那个遇到的标签就是此标签的包含盒。

  正是因为它,所以,我以前一直怕使用绝对定位后,在不同分辨率的机上可能显示效果会发生不好的变化。看来这个疑虑被打消了。

  因为绝对定位这个问是,所以,我们平常在写代码时,如果遇到一个容器性的div,最好设成position:relative;

  评论这张
 
阅读(2)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018