作家
登录

块级行内元素特性

作者: 来源: 2014-06-23 16:06:10 阅读 我要评论

 display:block就是将元素显示为块级元素.

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

inline和block可以控制一个元素的行宽高等特性,

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

如何实现display:inline-block的效果?

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

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

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

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

  以下用个例子来说明三者的区别和用
<!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>display:inline、block、inline-block的区别</title>
</head>
<style>
div,span{background-color:green;margin:5px;border:1px solid #333;padding:5px;height:52px;color:#fff;}
.b{display:block;}
.i{display:inline;}
div.ib{display:inline-block;}
div.ib{display:inline;}
a.ib{display:inline-block;}
a.ib{display:block;}
span.v{padding:0;margin:0;border:0;vertical-align:middle;height:100%}
</style>
<body>
<div>div display:block</div>
<div class="i">div display:inline</div>
<div class="ib">div display:inline-block</div>
<span>span display:inline</span>
<span class="b">span display:block</span>
<span><a class="ib">a display:block</a></span><br />
<div><span class="v"></span>vertical-align:middle</div>
</body>
</html>

 

 

 

比如有3栏都float的话,写法是这样
clear:both;这个属性不要放在常规类里,要清飘,单独写一个,放在BR或者空DIV里
float这个用的时候要谨慎
<div>
<div>float右</div>
<div>float左</div>
<div>float左</div>
</div>
必需这个写
如果float属性里有margin的话,需要加display:inline-block;
如果你用dw cs5的话,最好新建一个空白页(布局为3列固定,标题与脚注的类型,好好看一遍软件自动生成的代码,看明白了基本就可以解决你自己的兼容问题了)

  推荐阅读

  clear:both; 的作用

clear:both; CSS手册上这样解释的:该属性的值指出了不允许有浮动对象的边。 这个属性是用来控制float属性在文档流的物理位置的。 当属性设置float(浮动)时,他所在的物理位置已经脱离文档流了,但是大多时>>>详细阅读


本文标题:块级行内元素特性

地址:http://www.17bianji.com/diaocha/34321.html

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)