按标签归档 display:inline-block

display:inline-block的几个应用及bug

由 愚人码头 撰写  |  2009/06/21 18:49 发表在 (x)html+css  |  评论 (2)

和大家一样经常使用display:inline和display:block来进行块元素(block element)和内联元素(inline element，也叫行内元素)之间的转换。 块元素和内联元素的主要区别： 1.块元素会自动在末尾加一个换行，而内联元素不会，多个内联元素会自动排成一行，比如img标签或span标签插到一行文字中，他会和这行文字自动排成一行，而如果你在这行文字中插入一个块元素标签，比如div标签，那么这个div标签会自己独占一行。查看demo：http://www.css88.com/demo/inline-block/inline-and-block.html 2.块元素可以定义自身的高度（width）和宽度(height),而内联元素不可以。 3.块对象定义的自身垂直边距可以改变行高，而内联元素虽然可以定义但改变不了行高。 更多关于块元素和内联元素可以看看这里http://www.css88.com/archives/646； display:inline-block是什么呢？ 将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。这就是display:inline-block的作用，再讲的通俗一点就是，Display值为inline-block的元素内部形成一个块状盒模型，而本身形成类似一个内联的被替代元素”。即display为inline-block的元素既可以像块状元素一样定义高度宽度，又可以和内联元素（比如文字）排列在一行。(转载请注明出处：WEB前端开发 http://www.css88.com/)