/* inline为行内元素不自动换行,不占用文档流,也就是说你在这个后面写一个元素
这个元素会并排显示。block为块元素,单独占一行文档,并可以给这个块元素添加
宽高背景颜色。而inline-block是使这个元素同时保持不占文档流的情况下又可以作
为块元素来写入 */
/* inline-block 的元素既具有 block 元素可以设置宽高的特性,同时又具有 inline 元素
默认不换行的特性。当然不仅仅是这些特性,比如 inline-block 元素也可以设置
vertical-align 属性。
HTML 中的换行符、空格符、制表符等合并为空白符,字体大小不为 0 的情况下,
空白符自然占据一定的宽度,使用inline-block 会产生了元素间的空隙。 */

display:inline; 内联元素,简单来说就是在同一行显示。
display:block; 块级元素,简单来说就是就是有换行,会换到第二行。
display:inline-block; 就是在同一行内的块级元素。

说概念太模糊,来个真实案例吧。

<a
href="#"
style="display:inline;width:100px;height:100px;background:#ccc;">链接一&
lt;/a><a href="#"
style="display:inline;width:100px;height:100px;background:#ccc;">链接一&
lt;/a>

A默认就是一行,所以inline用在这里是废的。宽高度设置也是费的。

<a
href="#"
style="display:block;width:100px;height:100px;background:#ccc;">链接一&
lt;/a><a href="#"
style="display:block;width:100px;height:100px;background:#ccc;">链接一&
lt;/a>

块状,这里高宽度就生效了,但是因为是块状,前后有换行符,所以这是两行了。

<a
href="#"
style="display:inline-block;width:100px;height:100px;background:#ccc;"&
gt;链接一</a><a href="#"
style="display:inline-block;width:100px;height:100px;background:#ccc;"&
gt;链接一</a>

这样就是同时达到块状,而且在同一行显示。

display:inline-block的更多相关文章

  1. display:inline block inline-block 的区别

    原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...

  2. display:inline、block、inline-block的区别

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度不设是它的容器的100%,除非设定一个宽度 <div& ...

  3. display:inline; display:block;

    block(块级元素): div .from. p .table. pre.h1~h6. dl .ol .ul等 inline(内联元素): span.a.strong.em.label.input. ...

  4. display:block、display:inline与displayinline:block的概念和区别

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

  5. display:inline 和display:inline-block和display:block的区别

    之前讲过块级元素使用display:block 行内元素使用display:inline 那么今天我们就来区分一下display:inline,display:inline-block和display ...

  6. 理解display:inline、block、inline-block

    要理解display:inline.block.inline-block的区别,需要先了解HTML中的块级(block)元素和行级(inline)元素的特点,行内元素也叫内联元素. 块级元素 总是另起 ...

  7. display:inline 跟 display:block 跟 display:inline-block区别

    我来说句人话吧.display:inline; 内联元素,简单来说就是在同一行显示.display:block; 块级元素,简单来说就是就是有换行,会换到第二行.display:inline-bloc ...

  8. HTML5 display:inline、block、inline-block的区别--备用

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  9. display:inline、block、inline-block的区别(转)

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  10. display:inline,display:inline-block,display:block 区别

    之前一直迷惑于display:inline/inline-block/block的异同,在度娘谷哥的帮助下,突然有了一点思路. 按照网上的介绍,inline将对象转化为内联元素,block将对象转化为 ...

随机推荐

  1. PHP正则表达式的快速学习方法

    1.入门简介 简单的说,正则表达式是一种可以用于模式匹配和替换的强有力的工具.我们可以在几乎所有的基于UNIX系统的工具中找到正则表达式的身影,例如,vi编辑器,Perl或PHP脚本语言,以及awk或 ...

  2. Javascript DOM基础(一)概念

    Dom基础概念: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" ...

  3. 地址(Address)——WCF学习笔记(2)

    地址(Address)分为: 统一资源表示(URI). EndpointAddress. 端口共享. 逻辑地址与物理地址. 请求监听与消息分发.

  4. PHP Date Function Base

    /**************格式中可使用字母的含义**************/a – "am" 或是 "pm"  A – "AM" 或是 ...

  5. Android Listview 性能优化

    首先我一般使用的适配器是BaseAdapter,其中有两个方法最主要,分别是: getCount,getView, 在对Listview 进行优化的时候,首先使用 convertview 和viewH ...

  6. 《JavaScript面向对象编程指南》译者序

    相对于Perl.Python等动态脚本语言来说,JavaScript确实是一门饱受误解的语言.对于译者这种从20世纪90年代末走过来的C++程序员来说,尤其如此.在那个年代,提起JavaScript总 ...

  7. 《统计推断(Statistical Inference)》读书笔记——第1章 概率论

    第一章介绍了基本的概率论知识,以下是这一章的思维导图

  8. javaScript DOM JQuery AJAX

    http://www.cnblogs.com/wupeiqi/articles/5369773.html 一 JavaScript JavaScript是一门编程语言,浏览器内置了JavaScript ...

  9. 【C】 01 - 再学C语言

    “C语言还用再学吗?嵌入式工程师可是每天都在用它,大家早就烂熟于心,脱离语言这个层面了”.这样说不无道理,这门古老的语言以其简单的语法.自由的形式的而著称.使用C完成工作并不会造成太大困扰,所以很少有 ...

  10. Oracle表空间不足

    Oracle临时表空间不足 -- 用户的缺省表空间.临时表空间 select t.username, t.default_tablespace, t.temporary_tablespace from ...