display:inline; 内联元素,简单来说就是在同一行显示。

display:block; 块级元素,简单来说就是就是有换行,会换到第二行。

display:inline-block; 就是在同一行内的块级元素。

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

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

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

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

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

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

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

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

这样就是同时达到块状,而且设置高度有效并在同一行显示。

css -- 通俗理解inline、block、inline-block的更多相关文章

  1. CSS中的display属性(none,block,inline,inline-block,inherit)

    css中的display属性(none,block,inline,inline-block,inherit) display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none bl ...

  2. block, inline和inline-block的区别

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

  3. div横排放置对齐问题;block,inline,inline-block区别

    1.左右两个div都设置为float:left,如果右边div没有设置宽度,右边div的宽度会根据div里的内容自动调整. 缺点:不易控制 2.只有左侧div设置为float:left,右侧div设置 ...

  4. display:inline与display:block——行内元素显示与块级元素显示

    display:inline 的作用是设置对象做为行内元素显示,inline是内联对象的默认值(ps:内联对象就是不自动产生换行的元素,比如span) 而我们一般用的div是块级元素,默认displa ...

  5. dispay属性的block,inline,inline-block

    转自下面的几位大神: http://www.cnblogs.com/KeithWang/p/3139517.html 总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 bl ...

  6. block inline 和 inline-block

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

  7. 2016/2/25 1, margin auto 垂直方向测试 无效 2,margin重叠 3,哪些是块状哪些是内联 4,display:block inline 导航栏把内联转块状最常见+ 扩展

    1.利用margin auto完成首页居中,并自行研究,竖直方向用margin auto,是什么效果#container{width:1002px;margin: 0px auto;}    竖直方向 ...

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

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

  9. display:block;inline;inline-block大总结

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

随机推荐

  1. ubuntu常用的一些命令

    1 添加root用户 其实ubuntu在安装时已经添加了root用户,只是屏蔽了.所以只需要激活即可.打开终端ctrl+alt+t,输入sudo passwd root,然后输入要添加给root的密码 ...

  2. 多主机共享ssh Public/Private Key

    前期服务器比较少,所有代码都放在github的私库中,在自己的github 设置中设置SSH keys就可以拉下相应的库中的代码到本地与服务器了,但是最近服务器多家了几台,每台都生成key加到gith ...

  3. [svc]kill pkill killall管理进程

    进程讲解 操作配置 http://www.centoscn.com/CentOS/help/2013/0809/1218.html 终止一个进程或终止一个正在运行的程序,一般是通过 kill .kil ...

  4. android笔记-----消息提示

    在/res/values目录下的文件中定义要显示的字符串,主要是考虑到后期可能需要换成英文之类的 <string name="login_checkBlank">用户名 ...

  5. jquery实现仿京东侧边栏

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  6. PowerShell中进行文件读取,信息排序,分类计数。

    这是国外某大学QA的一道作业题,读取mainlog文件中的每一行信息,并获取有效的信息,也就是每条信息中第四个@后面的内容,然后进行分类与计数,要求是用Perl写,但我是用PowerShell完成的, ...

  7. dp之区间:最大k乘积

    题目:给你一个n(1<=n<=15)位数,求将它分成m段,用m-1个*连接起来的最大乘积....... 思路:定义dp[i][j]为将前i位数分成j段的最大乘积,那么dp[i][j]==m ...

  8. Curator入门教程1

     简介 Curator是Netflix开源的一套ZooKeeper客户端框架. Netflix在使用ZooKeeper的过程中发现ZooKeeper自带的客户端太底层, 应用方在使用的时候需要自己处理 ...

  9. Excel最多可存多少行,多少列?

    查到的资料如下: Excel 07-2003一个工作表最多可有65536行,行用数字1—65536表示;最多可有256列,列用英文字母A—Z,AA—AZ,BA—BZ,……,IA—IV表示:一个工作簿中 ...

  10. flume sourcetype avro http

    flume  当sourcetype=http的时候可以用 curl -X POST -d '[{"headers" :{"APPSTORE" : " ...