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. Android开发12——Andorid中操作数据库的insert的两种方法以及nullColumnHack

    一.发现问题 先看两种方法插入数据 public void save(Person p){ SQLiteDatabase db = dbHelper.getWritableDatabase(); db ...

  2. [swift]初始化方法自己主动继承

    子类默认不会继承父类的初始化方法,然而,假设某种条件满足的话.父类的初始化方法还是能够继承给子类.在通常情况下,这意味着你不必复写父类的初始化方法.在安全的前提下能够以最低的代价继承父类的初始化方法. ...

  3. ubuntu 清理系统垃圾与备份

    虽然linux下不会有windows下的那么多垃圾和磁盘碎片!但还是会留下一些用不着的临时文件或是多次升级后的N个旧的内核! 1,非常有用的清理命令:sudo apt-get autocleansud ...

  4. 每日英语:Tech Firms Flock to Vietnam

    Opening up a Korean restaurant among the rice fields and limestone karsts north of Hanoi might seem ...

  5. 07、在 Windows10 上获得屏幕分辨率

    因为在 win10 上,app 在运行的时候,默认不是占满全屏幕,并且 windows runtime 当前没有提供获取 屏幕尺寸的 api.在桌面 win32 api 中,可以获取屏幕尺寸,不过因为 ...

  6. java 多线程10:synchronized锁机制 之 锁定类静态方法 和锁定类.Class 和 数据String的常量池特性

    同步静态方法 synchronized还可以应用在静态方法上,如果这么写,则代表的是对当前.java文件对应的Class类加锁.看一下例子,注意一下printC()并不是一个静态方法: public ...

  7. Gson json解析工具

    json 解析工具 ,谷歌出品 对象转换字符串 HashMap<String,String> hashMap = new HashMap<String, String>();  ...

  8. sqlserver 针对预处理sql传入参数的处理方式

    在编写sql中,经常需要对sql进行预处理,动态拼接字符串,那么要获取在这预处理之后返回的的某个值并且赋值,传入参数的语法 USE [OA] GO /****** Object: StoredProc ...

  9. mysql主从复制的介绍

    引用:https://my.oschina.net/u/255939/blog/505598 MySQL复制就是一台MySQL服务器(slave)从另一台MySQL服务器(master)进行日志的复制 ...

  10. linux查找系统中占用磁盘空间最大的文件

    Q:下午有一客户磁盘空间占用很大,使用df查看磁盘剩余空间很小了,客户想知道是哪些文件占满了文件. Q1:在Linux下如何查看系统占用磁盘空间最大的文件? Q2:在Linux下如何让文件夹下的文件让 ...