【CSS】block,inline和inline-block细节对比

转载 2015年11月20日 22:15:16

• display: block

  1. block元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度。

  2. block元素可以设置width, height属性。块级元素即使设置了宽度,仍然是独占一行。

  3. block元素可以设置marginpadding属性。


• display: inline

  1. inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。
  2. inline元素设置width, height属性无效。
  3. inline元素marginpadding属性,水平方向的padding-left,
    padding-right,margin-left,margin-right都产生边距效果;但竖直方向的padding-top,padding-bottom,margin-top,margin-bottom不会产生边距效果。

• display: inline-block

  1. 简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。

相关文章推荐

关于css中的block元素inline元素 以及positison属性的初步认识。

初学CSS的 布局,对好多样式都是不理解,不理解就让我做页面,对公司也是无语了。最近...

CSS:替换元素(Replaced)、不可替换元素(Nonreplaced)、块元素(Block-level)和行内/内联元素(Inline)

元素是文档结构的基础,在CSS中,每个元素生成了一个包含了元素内容的框(box,也译为“盒子”)。但是不同的元素显示的方式会有所不同,例如和就不同,而和也不一样。在文档类型定义(DTD)中对不同的元素...

css基础学习之--inline-block

CSS布局创建网站,浮动绝对占据了很大的比例.大块区域如主内容及侧边栏,以及在其中的小块区域,都可以看到浮动的影子.这里浮动是唯一的解决方案吗? 浮动通常表现正常,但有时候搞起来会很纠结。特别是...

[CSS]display:inline-block

很多时候我们必须使一些块元素并排显示,一般想到的是必须使用浮动,但是块元素浮动给边距(margin)的时候在IE下会出现加倍的BUG,所以很多时候不得不把这个块元素套在一个内联元素里面,然后给内联元素...

CSS进阶3: inline-block 的前世今生

曾几何时,display:inline-block 已经深入「大街小巷」,随处可见 「display:inline-block; *display:inline; *zoom:1; 」这样的代码。如今...
  • izayl
  • izayl
  • 2015年11月20日 19:49
  • 264

css中display:inline-block属性值的空隙消除

引用:http://www.duidea.com/2012/1129/1606_2.html 你真的了解 inline-block 了吗?本文将带你深入剖析该属性值的前世今生,让你更好的理解...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:【CSS】block,inline和inline-block细节对比
举报原因:
原因补充:

(最多只允许输入30个字)