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

★柳暗花明★

似水年华,诠释着无力的永恒······

 
 
 

日志

 
 

display:block; 在 a、a:hover 变化背景中十分重要  

2010-11-04 17:06:50|  分类: CSS经典 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
display:block;就是将元素显示为块级元素.

block元素的特点是:
总是在新行上开始;
高度,行高以及顶和底边距都可控制;
宽度缺省是它的容器的100%,除非设定一个宽度。
<div>, <p>, <h1>, <form>, <ul>
<li>是块元素的例子。

display:inline就是将元素显示为行内元素.

inline元素的特点是:
和其他元素都在一行上;

高,行高及顶和底边距不可改变
宽度就是它的文字或图片的宽度,不可改变
<span>, <a>, <label>, <input>, <img>, <strong>
<em>inline元素的例子

inlineblock可以控制一个元素的行宽高等特性,需要切换的情况如下:

让一个inline元素从新行开始;
让块元素和其他元素保持在一行上;
控制inline元素的宽度(对导航条特别有用);
控制inline元素的高度;
无须设定宽度即可为一个块元素设定与文字同宽的背景色。

display:inline-block将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。

inline-block的元素特点:

     将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。(准确地说,应用此特性的元素呈现为内联对象,周围元素保持在同一行,但可以设置宽度和高度地块元素的属)

     并不是所有浏览器都支持此属性,目前支持的浏览器有:OperaSafariIE中对内联元素使用display:inline-blockIE是不识别的,但使用display:inline-blockIE下会触发layout,从而使内联元素拥有了display:inline-block属性的表症。从上面的这个分析,也不难理解为什么IE下,对块元素设置display:inline-block属性无法实现inline-block的效果。这时块元素仅仅是被display:inline-block触发了layout,而它本就是行布局,所以触发后,块元素依然还是行布局,而不会如Opera中块元素呈递为内联对象。

IE下块元素如何实现display:inline-block的效果?

有两种方法:
1
、先使用display:inline-block属性触发块元素,然后再定义display:inline,让块元素呈递为内联对象(两个display要先后放在两个CSS声明中才有效果,这是IE的一个经典bug,如果先定义了display:inline-block,然后再将display设回inlineblocklayout不会消失)。代码如下(...为省略的其他属性内容):

div {display:inline-block;...}
div {display:
inline;}


2
直接让块元素设置为内联对象呈递(设置属性display:inline),然后触发块元素的layout(如:zoom:1)。代码如下:

div {display:inline; zoom:1;...}

下面有个例子:

问题:

 display:block; 在 a、a:hover 变化背景中十分重要 - JORTON - ★柳暗花明★
 

 其实这个问题的主要思路是这样的:
  将A设置为块元素,图片是此元素的背景。
  在悬停状态,不仅可以设置文字的效果,还可以设置背景图片是不是变化。
  我们首先准备一张背景图片:

                      
                           display:block; 在 a、a:hover 变化背景中十分重要 - JORTON - ★柳暗花明★
   
我们看下面的效果:
Source Code to Run
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>www.52css.com</title>
<style type="text/css">
* {
 font-size:12px;
 text-align:center;
}
a {
 display:block;
 width:100px;
 height:30px;
 color:#353535;
 line-height:30px;
 text-decoration:none;
 background:url(
http://www.52css.com/attachments/month_0708/y200782801114.png) no-repeat 0 0;
}
a:hover {
 color:#000;
 background:url(
http://www.52css.com/attachments/month_0708/y200782801114.png) no-repeat 0 -30px;
}
</style>
</head>
<body>
<a href="
JORTONhttp://www.jorton468.blog.163.com/">JORTON</a>
</body>
</html>


关于代码的依秩序说明如下:
  * {……}
  整体布局声明,12px的文字大小,并居中对齐;
  a {……}
  将A元素设置为块元素,宽度与高度分别定义为100px、30px;
  设置文字颜色,设置行高为30px,实现文字在A区域内垂直居中对齐。
  设置文字的装饰线为无,即去掉了链接的下划线。
  背景的设置,指定图片所在URL,设置背景图片不重复,定位在0 0的位置。
  a:hover {……}
  设置文字颜色,背景图片除了Y方向的坐标改为-30px其它与上面一样。
  链接的背景图片为100*60px,在链接状态,显示上半部分,即坐标为0 0。在鼠标悬停状态,我们希望看到的是图片的下半部分,所以坐标为0 -30px。
  

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

历史上的今天

评论

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

页脚

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