display:block

　　1.block元素会独占一行，多个block元素会各种新起一行。默认情况下，block元素宽度自动填满其父元素容器；

　　2.block元素可以设置width和height属性，块级元素即使设置宽度还是会独占一行；

　　3.block元素可以设置margin和padding；

display:inline

　　1.inline元素不会独占一行，多个相邻的行内元素会排在同一行里，直到一行排列不下，才会新起一行，起宽度随元素内容而变化；

　　2.inline元素设置width和height无效；

　　3.inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果；

display:inline-block

　　1.将对象呈现为inline对象，但是对象的内容作为block对象呈现，之后的内联对象会被排列在同一行内。比如我们给a标签inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性；

block、inline、inline-block对比的更多相关文章

  1. block，inline和inlinke-block细节对比

    block,inline和inlinke-block细节对比 display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度 ...

  2. block，inline和inline-block对比

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

  3. block，inline和inline-block概念和区别

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

  4. block，inline和inline-block概念和区别（转）

    转自  http://www.cnblogs.com/KeithWang/p/3139517.html 总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-lev ...

  5. block，inline,inline-block的区别

    block: 英语翻译过来是“块”意思,就跟小时候玩过的积木方块一样,一块一块往上搭. inline: 英语翻译过来就是“内联”的意思,内联不好理解,我的理解就是行内元素: block和inline都 ...

  6. css(二) block，inline和inline-block概念和区别

    转: http://www.cnblogs.com/KeithWang/p/3139517.html 总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-leve ...

  7. block，inline和inline-block概念和区别（转载）

    转自: http://www.cnblogs.com/KeithWang/p/3139517.html 总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-lev ...

  8. 2017-08-20 block，inline和inline-block概念和区别

    display:inline.block.inline-block的区别 display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都 ...

  9. Css 中的 block，inline和inline-block概念和区别

    1.block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通常被现 ...

  10. CSS——display（Block none inline等）属性的用法

    在一般的CSS布局制作时候,我们常常会用到display对应值有block.none.inline这三个值.下面我们来分别来认识和学习什么时候用什么值.这里通过CSS display知识加实例.图演示 ...

随机推荐

  1. html中的图片、css、js等路径加载问题

    网页文件的存取路径有3种:物理路径.绝对路径和相对路径. 物理路径就是你的文件放在主机上的具体位置,例如:D:\\image\\1.jpg 这种格式,该方法可以很快确定出你的文件,但是在网页显示路径基 ...

  2. 《算法导论》插入排序----InsertSort

    算法导论,插入排序 public class InsertSort { public static double [] sort(double [] num) { for(int i =1; i< ...

  3. jQuery源码学习（1）：整体架构

    整体架构 $().find().css().hide() 从jQuery的表达式可以看出两点: jQuery的构建方式 jQuery的调用方式 下面从这两方面来窥探jQuery的整体架构: 分析一:无 ...

  4. Makefile — 基础

    参考: 跟我一起写 Makefile GNU make <GNU+Make项目管理(第三版)> 1.Makefile用途 使用GNU Make工具来管理程序是每个Linux工程师必须掌握的 ...

  5. 可用于Windows Server 2008 R2的Xbox One手柄、接收器驱动

    让客厅里的Gen8可以玩FC和PS1游戏,折腾了半天,终于将Xbox One手柄驱动弄好: http://www.drvsky.com/Microsoft/Xbox_One.htm http://ww ...

  6. onethink权限管理 RBAC

    查看了官网的视频,写的不错. 大致熟悉了流程.这里打算自己动手写一个权限的控制

  7. python获取绑定的IP，并动态指定出口IP

    在做采集器的过程中,经常会遇到IP限制的情况,这时候可以通过切换IP能继续访问. 如果是多IP的服务器,那么可以通过切换出口Ip来实现. 1.首先是如何获取服务器绑定的IP import netifa ...

  8. Beautifulsoup 和selenium 的查询

    Selenium There are vaious strategies to locate elements in a page. You can use the most appropriate ...

  9. 如何在Eclipse下安装myeclipse插件

    来自http://www.blogjava.net/show911/archive/2008/04/27/86284.html 下载myeclipse插件 支持eclipse3.1.x, 具体安装步骤 ...

  10. spark中数据的读取与保存

    1.文本文件 (1)读取文本文件 JavaRDD<String> input =sc.textFile(dir) (2)保存文本文件 result.saveAsTextFile(dir)) ...