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. unity save layout

    调整完布局,点Save Layout,并命名,就得到一个新的layout,以后可以直接在下拉菜单中选择并切换到此布局.

  2. Android 常见面试题

    这些面试是我之前总结的 .觉得还不错,就贴出来与大家分享一下.当中有不少问题.也是我以前被面试官问过的问题,另一些基础问题总结(既然是基础知识 ,必定是成为一名的 Android 开发者 所必须掌握的 ...

  3. IIS启用GZip压缩的详细教程(图文)

    本文将详细介绍如何在IIS启用GZip压缩,同时解决可能遇到的一些问题 IIS启用GZip压缩,是提高网站速度和减轻服务器负载的一个优化手段和方法,经测试,网站启用GZip压缩后,速度快了3倍!而配置 ...

  4. 【Android】12.1 Intent基本概念

    分类:C#.Android.VS2015: 创建日期:2016-02-23 一.简介 Intent:意图,含义就是你想利用它调用哪个组件实现相关的功能,比如调用相机组件实现拍照.调用Contact组件 ...

  5. 查杀病毒实战----------------》ddg.223 and AnXQV

    htop 发现导常: 接着发现可疑进程: 首先检测crontab,发现问题: # crontab -l */ * * * * curl -fsSL http://www.bdyutiudwj.com/ ...

  6. read pread write pwrite open

    http://stackoverflow.com/questions/7592822/what-are-the-advantages-of-pwrite-and-pread-over-fwrite-a ...

  7. 使用Supervisor管理Linux进程

    使用Supervisor管理Linux进程 简介 Supervisor是一个C/S系统,它可以在类UNIX系统上控制系统进程,由python编写,提供了大量的功能来实现对进程的管理. 安装 sudo ...

  8. sql 判断

    sql server select expertId,mail= ( CASE mail WHEN '' THEN ' ' else mail end ) from Siemens.dbo.tblEx ...

  9. javascript 中mediator pattern(中介者模式)一个实例demo

    <!doctype html> <html lang="en"> <head> <title>JavaScript Patterns ...

  10. winform文本框不能粘贴、复制和屏蔽右键

    有3个常用方法 1.MouseMove事件中,使选不中 private void textBox3_MouseMove(object sender, MouseEventArgs e) { if (t ...