随笔 - 114&
文章 - 1&评论 - 18&trackbacks - 0
display:block就是将元素显示为块级元素.
　　block元素的特点是：　　总是在新行上开始；　　高度，行高以及顶和底边距都可控制；　　宽度缺省是它的容器的100%，除非设定一个宽度　　&div&, &p&, &h1&, &form&, &ul& 和 &li&是块元素的例子。
　　display:inline就是将元素显示为行内元素.
　　inline元素的特点是： 　　和其他元素都在一行上；　　高，行高及顶和底边距不可改变；　　宽度就是它的文字或图片的宽度，不可改变。　　&span&, &a&, &label&, &input&, &img&, &strong& 和&em&是inline元素的例子。
　　inline和block可以控制一个元素的行宽高等特性，需要切换的情况如下：
　　让一个inline元素从新行开始；　　让块元素和其他元素保持在一行上；　　控制inline元素的宽度（对导航条特别有用）；　　控制inline元素的高度；　　无须设定宽度即可为一个块元素设定与文字同宽的背景色。
　　display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。
　　inline-block的元素特点：
　　将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。(准确地说，应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性)
　　并不是所有浏览器都支持此属性，目前支持的浏览器有：Opera、Safari在IE中对内联元素使用display:inline-block，IE是不识别的，但使用display:inline-block在IE下会触发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设回inline或block，layout不会消失）。代码如下（...为省略的其他属性内容）：
　　div {display:inline-...} 　　div {display:}
　　2、直接让块元素设置为内联对象呈递（设置属性display:inline），然后触发块元素的layout（如：zoom:1等）。代码如下：
　　div {display: zoom:1;...}
　　以下用个例子来说明三者的区别和用&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""&&html xmlns=""&&head&&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&&title&display:inline、block、inline-block的区别&/title&&/head&&style&div,span{background-color:margin:5border:1px solid #333;padding:5height:52color:#}.b{display:}.i{display:}div.ib{display:inline-}div.ib{display:}a.ib{display:inline-}a.ib{display:}span.v{padding:0;margin:0;border:0;vertical-align: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&
阅读(...) 评论()block和inline这两个概念是简略的说法，完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块，会单独换一行；inline元素则前后不会产生换行，一系列inline元素都在一行内显示，直到该行排满。大体来说HTML元素各有其自身的布局级别（block元素还是inline元素）：
常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等。常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等。
block元素可以包含block元素和inline元素；但inline元素只能包含inline元素。要注意的是这个是个大概的说法，每个特定的元素能包含的元素也是特定的，所以具体到个别元素上，这条规律是不适用的。比如 P 元素，只能包含inline元素，而不能包含block元素。一般来说，可以通过display:inline和display:block的设置，改变元素的布局级别。
block，inline和inlinke-block细节对比
display:block
block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。block元素可以设置margin和padding属性。
display:inline
inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。inline元素设置width,height属性无效。inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
display:inline-block
简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。
一般我们会用display:block，display:inline或者display:inline-block来调整元素的布局级别，其实display的参数远远不止这三种，仅仅是比较常用而已。IE（低版本IE）本来是不支持inline-block的，所以在IE中对内联元素使用display:inline-block，理论上IE是不识别的，但使用display:inline-block在IE下会触发layout，从而使内联元素拥有了display:inline-block属性的表象。
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：2633次
排名：千里之外
转载：11篇
(2)(1)(2)(2)(1)(8)因为一直被这个很恶心的问题困扰，知道要写博客，所以今天抽个空来集中处理HTML5、CSS3的布局问题。可能哪天回过头来看觉得自己现在很傻比。。。
首先是block和inline的区别，说通俗点block就是让其形成块级元素，而且其前后都会有换行符；而inline的话就是让元素设置为内联样式（对其设置的宽高都没有什么卵用，不产生效果，但是颜色效果还是有的），前后是没有换行符的。
而inline-block恰好是两者的综合，即行内块，其属于块级元素，而且没有换行符,在行内形成。废话了这么多，我怕以后还是忘了，那就直接上一个例子：
& & & & & & & &
如图设置四个链接，分别作对比：inline（公共样式common对其宽高并没有影响），inline-block，block（在行内会换行，而且独占一行）
拓展：如果对block设置。。。回家写
/*****************第二天才补上**********************/
后面又分别对block，inline-block，以及inline分别加上float：left。发现无论是谁，一旦加上float属性，其前后的换行符都会被取消；
而其中例如后面已经浮动的元素，前面有换行符的情况下，是不会被挤压的，也就是如下图：链接三后面因为有换行符。后面浮动的元素即使有了浮动，前面的换行符
还是会产生作用。
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：501次
排名：千里之外您所在的位置： &
CSS中block和inline元素的差别
CSS中block和inline元素的差别
你对CSS中block和inline元素的差别是否了解，块元素(blockelement)一般是其他元素的容器元素，而内联元素(inlineelement)一般都是基于语义级(semantic)的基本元素。
这里向大家描述一下中block和inline元素的差别，所有的html元素，都要么是block(块元素)、要么是inline(内联元素)，并且块元素和内联元素的基本差异是块元素一般都从新行开始，请看本文详细介绍。
CSS中block和inline元素的差别
我们首先要了解，所有的html元素，都要么是block(块元素)、要么是inline(内联元素)。下面了解一下block、inline各自的特点：
block元素的特点：
总是在新行上开始；
高度，行高以及顶和底边距都可控制；
宽度缺省是它的容器的100%，除非设定一个宽度。
inline元素的特点：
和其他元素都在一行上；
高，行高及顶和底边距不可改变；
宽度就是它的文字或图片的宽度，不可改变。
我们来详细了解它们的情况。
◆块元素(blockelement)一般是其他元素的容器元素，块元素一般都从新行开始，它可以容纳内联元素和其他块元素,常见块元素是段落标签'P&。&form&这个块元素比较特殊，它只能用来容纳其他块元素。
如果没有css的作用，块元素会顺序以每次另起一行的方式一直往下排。而有了css以后，我们可以改变这种html的默认布局模式，把块元素摆放到你想要的位置上去。而不是每次都愚蠢的另起一行。需要指出的是，table标签也是块元素的一种，tablebasedlayout和cssbasedlayout从一般使用者（不包括视力障碍者、盲人等）的角度来看这两种布局，除了页面载入速度的差别外，没有其他的差别。但是如果普通使用者不经意点了查看页面源代码按钮后，两者所表现出来的差异就非常大了。基于良好重构理念设计的css布局页面源码，至少也能让没有web开发经验的普通使用者把内容快速的读懂。从这个角度来说，csslayoutcode应该有更好的美学体验。
你能够把块容器元素div想象成一个个box，或者如果你玩过剪贴文载的话，那就更加容易理解了。我们先把需要的文章从各种报纸、杂志总剪下来。每块剪下来的内容就是一个block。然后我们把这些纸块按照自己的排版意图，用胶水重新贴到一张空白的新纸上。这样就形成了你自己独特的文摘快报了。作为一种技术的延伸，网页布局设计也遵循了同样的模式。
◆内联元素(inlineelement)一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素，常见内联元素&a&。
需要说明的是：
inlineelement的中文叫法，有多种内联元素、内嵌元素、行内元素、直进式元素。基本上没有统一的翻译，爱怎么叫怎么叫吧。另外提到内联元素，我们会想到有个display的属性是display:这个属性能够修复著名的IE双倍浮动边界问题。
◆块元素(blockelement)和内联元素(inlineelement)都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始。而当加入了css控制以后，块元素和内联元素的这种属性差异就不成为差异了。比如，我们完全可以把内联元素cite加上display:block这样的属性，让他也有每次都从新行开始的属性。
可变元素是基于以上两者随环境而变化的，它的基本概念就是他需要根据上下文关系确定该元素是块元素或者内联元素。可变元素还是属于上述两种元素类别，一旦上下文关系确定了他的类别，他就要遵循块元素或者内联元素的规则限制。
【编辑推荐】
【责任编辑： TEL：（010）】
关于&&&&的更多文章
IE浏览器不支持很多CSS属性是出了名的，即便在支持的部分中，也
随着云计算、物联网、大数据、移动互联网的大发展，你应该知道这些。
9月的工作日被法定假日拆的零零散散，不知道各位的工
总结一下Java I/O文件读写基本类相关知识和概念。对于
今天是被国际上众多科技公司和软件企业承认的业内人士
本书是为那些对Web开发感兴趣的读者而编写的。ASP（Active Server Pages）是微软公司在Web领域的又一次突破，它打破了以往只能由
51CTO旗下网站