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. spring中事务配置

    1 如果在方法.类.接口上使用注解的方式声明事务,需要在配置文件中进行配置,以便通知 Spring 容器对标注 @Transactional 注解的 bean 加工处理. 首先需要引入 tx 命名空间 ...

  2. Linux下nagios网络监控与/proc/net/tcp文件详解

    问题描述:nagios自带的check_antp太过简约,除了状态统计输出外,什么参数都不提供.在面对不同应用服务器时,报警就成了很大问题. 问题描述:nagios自带的check_antp太过简约, ...

  3. novas的verdi和debussy是干什么用的(关于debussy的一些介绍)

    source code window: 提供了一个比较友好的界面,将整个设计的source code按设计的层次结构以树状排布,并且可以在代码上反标仿真结果,支持查找.寻找驱动等一些debug常用的操 ...

  4. c++重载后置++和--

    c++语言并不要求递增和递减运算符必须是类的成员,但是因为它们改变的正好是所操作对象的状态,所以建议将其设定为成员函数.(但下面的代码为了练习,还是分别采用成员函数和全局函数的方式实现) 业余实现代码 ...

  5. C/C++/C#/Python日志框架

    俗话说,打得一手好log才是一个优秀的程序员. **打log的目的是为了迅速排错或在有争议时拿出证据证明自己.基于这个目的,log不在多,只要抓住一切对自己有利的信息,就可以了.** 日志框架列表 C ...

  6. 一款由jQuery实现的手风琴式相册图片展开效果

    之前我们有分享过很多jQuery手风琴样式的菜单,比如CSS3手风琴下拉菜单.今天要分享的jQuery手风琴效果很特别,它是手风琴样式的相册图片展开效果.我们只需点击图片缩略图即可展开当前的图片,并将 ...

  7. PPP点到点协议&pap验证

    RA RB

  8. Lo4j(一)初识

    最近开始在研究log4j,可能因为是想要自己去搭建框架那. 废话不多说,先上一个例子好了. 第一步:当然是引入对象的jar包了 地址:http://www.apache.org/dyn/closer. ...

  9. java Web监听器实现定时发送邮件

    首先介绍java定时器(java.util.Timer)有定时执行计划任务的功能,通过设定定时器的间隔时间,会自动在此间隔时间后执行预先安排好的任务(java.util. TimerTask) 由于我 ...

  10. JavaScript 使用 php 的变量

    php 里面有一个变量,我想让 js 调用他, 有如下流程: <?php for ($i = 0; $i < 8; $i++) { echo "<tr>"; ...