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. mysql 添加列的索引

    无论哪种模式加入索引.会大幅度增加SELECT速度 索引名:Index_User_Name 栏目名:user_name 索引类型:Nornal 索引方式:BTREE

  2. 一定不要在头文件中using namespace XXX

    一定不要在头文件中using namespace XXX,这样会造成名字空间污染,引发ambiguous错误,又难以定位.

  3. Linux内存管理Swap和Buffer Cache机制

    Linux内存管理Swap和Buffer Cache机制 一个完整的Linux系统主要有存储管理,内存管理,文件系统和进程管理等几方面组成,贴出一些以前学习过的一个很好的文章.与大家共享!以下主要说明 ...

  4. FreeBSD搭建SVN服务器

    我最喜欢使用的OS就是FreeBSD,而且现在刚好有一台FreeBSD服务器,所以我想把我的SVN服务器迁移到FreeBSD上,再配合hudson和ant就可以自动编译了. 第一步:安装svn: 在安 ...

  5. asp.net MVC学习的一些总结

    起初认为视图,控制器,模型它们是完全没有耦合的,真正用了一段时间MVC发现错了. 但通过抽象让他们完全没有耦合,也不是不可能. 1.奇怪的连接地址 用MVC之前,一直认为页面必然访问某个文件.用了MV ...

  6. JMeter学习笔记（五）-总结

    本周主要学习了JMeter如下几方面内容: (1)Bdboy录制方式: (2)JMeter的代理录制方式: (3)关联,在关联时我们要找到哪些内容是要关联的,这个主要通过分析哪些内容是由服务器返回的, ...

  7. python 中安装pandas

    由于计算arima模型需要用到pandas,费尽千辛万苦找到了一个下载地址:http://www.lfd.uci.edu/~gohlke/pythonlibs/,在这里能下载到很多我们要用的模块.找到 ...

  8. 字符编码：ASCII,Unicode,UTF-8

    1.ASCII码美国制定的一套字符编码,对英语字符和二进制位之间的关系,做了统一规定.ASCII码一共规定了128个字符(包括32个不能打印出来的控制符号)的编码,占用一个字节,字节的最前面1位统一为 ...

  9. Python 2.7.9 Demo - 019.01.CRUD oracle by cx_Oracle

    select #coding=utf-8 #!/usr/bin/python import cx_Oracle; conn = None; cursor = None; try: conn = cx_ ...

  10. Oracle PLSQL Demo - 02.SELECT INTO单行赋值[SELECT INTO variables]

    declare v_sal number; begin ; dbms_output.put_line(v_sal); end;