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. FAQ系列 | 如何保证主从复制数据一致性(转)

    导读 MySQL主从复制环境中,如何才能保证主从数据的一致性呢? 关于主从复制 现在常用的MySQL高可用方案,十有八九是基于 MySQL的主从复制(replication)来设计的,包括常规的一主一 ...

  2. Chipscope使用

    作者:桂. 时间:2017-08-07  06:47:31 链接:http://www.cnblogs.com/xingshansi/p/7297482.html 前言 Chipscope在FPGA调 ...

  3. Ubuntu下python两个版本的切换

    最近在Ubuntu16.04安装了python3.5还有系统自带的python2.7.13,总结一下不同版本的切换问题. alias:别名 bashrc:个人配置文件 一.修改Python版本(针对用 ...

  4. 安装composer slim(php web api micro services)

    1. 安装php7 2. 下载 https://getcomposer.org/composer.phar 3. 开启ssh, 在 php.ini中.extension=C:\Program File ...

  5. 【Asp.net之旅】--因自己定义控件注冊而引发的思考

    前言 近期在开发远洋的SOA系统平台,开发使用的是.NET平台.对于Asp.net并不困难,但该系统的开发并非全然依靠Asp.net.而是自身封装好的框架.这套框架是远洋地产购买的微软的开发平台,项目 ...

  6. 安卓手机数据恢复软件-DiskDigger Pro

    以前的手机是支持大容量存储模式,可以被分配到盘符,但是自从手机不支持U盘大容量存储模式只能MTP模式之后,想要做数据恢复麻烦了很多啊! 经过多方查找,终于找到了这个能在手机上用的软件DiskDigge ...

  7. C#中http请求下载的常用方式demo

    //通过webClient方式 WebClient client = new WebClient(); string url="http://down6.3987.com:801/2010/ ...

  8. python学习笔记(13)--向文件夹插入课文朗读

    说明: 1. 2016年初刚学python写的一段代码,找到了一个walk函数,研究了半天.文件复制粘贴,研究了半天.正则匹配,研究了半天,期间被斜杠差点搞死.后来做完了跟CZ炫耀,他说python里 ...

  9. java web 应用中包,接口的设计

    采用标准的架构:描述从低层到高层首先是系统分析,找出你需要什么功能,然后按照下面的步骤执行: 数据库层:数据库层就是SQL语句.数据库.表.视图.触发器等等的创建和管理.这一层和JAVA无关,但是却是 ...

  10. 【C#】Event事件的订阅和发布

    学习笔记:学习了委托和事件的用法.事件是一种特殊的委托,记录下事件从订阅到发布的流程. 学习资料源于视频:http://www.maiziedu.com/course/510-6891/ 新建一个De ...