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. (Apache)ab 压力测试 简单使用

    该工具在Apache安装目录的bin目录里面.所以想要这个使用这个工具,只需要下载Apache即可.在Window环境下,推荐使用 PhpStudy 工具的集成环境.就可以轻松拥有Apache.ab压 ...

  2. 基于EM的多直线拟合实现及思考

    作者:桂. 时间:2017-03-22  06:13:50 链接:http://www.cnblogs.com/xingshansi/p/6597796.html 声明:欢迎被转载,不过记得注明出处哦 ...

  3. OpenGL cullface

    opengl cullface是根据顶点顺逆时针来判断正反面的.而不是根据法线判断的.所以有可能法线是正确的,但cullface效果却是反的.

  4. Python之反射练习

    # 什么是反射?可以用字符串的方式去访问对象的属性 class Test(): _name = "sss" def fun(self): return "Hellowor ...

  5. MYSQL 更改数据库data存储目录 创建用户 创建权限 设置远程访问的权限.

    一. 怎么更改数据库data存储目录:  1. 安装MYSQL. 2. 切换到 C:\Program Files\MySQL\MySQL Server 5.6 3. 新建my.ini. 加入如下配置: ...

  6. Golang Redis操作

    1. Redis简介 Redis是一个开源的.使用C语言编写的.支持网络交互的.可基于内存也可持久化的Key-Value数据库.   1.1 特点 支持更多数据类型 和Memcached类似,它支持存 ...

  7. mysql删除账户

    mysql> select user,host,password from user; +------+-----------+--------------------------------- ...

  8. cocos2d-x--精灵反转效果--CCOrbitCamera

    CCSprite* pSprite = CCSprite::spriteWithFile("grossini.png"); pSprite->setPosition(ccp( ...

  9. 【Verilog】verilog实现奇数次分频

    实现占空比为50%的N倍奇数分频:首先进行上升沿触发进行模N计数,计数到某一个值时进行输出时钟翻转,然后经过(N-1)/2再次进行翻转得到一个占空比非50%的奇数n分频时钟.再者 同时进行下降沿触发的 ...

  10. 小tip: 如何让contenteditable元素只能输入纯文本

    div模拟textarea文本域轻松实现高度自适应 这篇文章发布于 2010年12月23日,星期四,22:07,归类于 css相关. 阅读 112630 次, 今日 40 次 by zhangxinx ...