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. php model与json_encode/json_decode

    常用于model的操作,看看就知道了 <?php class UserModel { var $user_id = 0; var $user_name = ''; var $user_email ...

  2. mysql-5.7 innodb change buffer 详解

    一.innodb change buffer 介绍: 1.innodb change buffer 是针对oltp场景下磁盘IO的一种优化(我也感觉这个不太像人话,但是它又非常的准确的说明 innod ...

  3. cocos2dx 3.x designResolutionSize须主动设置

    cocos2dx 3.x最初设置screenSize和designResolutionSize的地方如下: bool AppDelegate::applicationDidFinishLaunchin ...

  4. lattice diamond 3.7安装破解

    第一步安装:执行.EXE文件,一直下一步,最后license选择没有USB什么的那个(具体记不清了). 第二步破解:安装完成后在环境变量中将license路径指定到license文件即可(LM_LIC ...

  5. [sh]. 点的含义

    . 的含义 当前目录 隐藏文件 任意一个字符 生效配置文件

  6. nginx检查报错 error while loading shared libraries: libprofiler.so.0: cannot open shared object file: No such file or directory

    在centos7.3上编译安装nginx-1.12.2 启动测试出错 [root@web02 local]# /usr/local/nginx/sbin/nginx -t /usr/local/ngi ...

  7. posix多线程--线程取消

    1.三种取消状态Off                   禁用取消Deferred           推迟取消:在下一个取消点执行取消Asynchronous   异步取消:可以随时执行取消 in ...

  8. ph 的使用步骤

    Arcanist用户指南Windows Updated 44 Day(s) Ago所有用户 https://phabricator.webfuns.net/book/phabricator/artic ...

  9. pre 强制换行

    当前位置:懒人建站 > javascript > 网页特效 > css强制pre标签换行 css强制pre标签换行,pre标签的功能就是保留文本源格式,将会保留文本的长度,空格 空行 ...

  10. innerHTML与innerText区别

    document 对象中有innerHTML和innerText 两个属性, 这两个属性都是获取document对象的文本内容的,这两个属性间有哪些区别呢?通过几个例子来看一下. 示例1 <ht ...