block(块级元素):

div 、from、 p 、table、 pre、h1~h6、 dl 、ol 、ul等

inline(内联元素):

span、a、strong、em、label、input、select、textarea、img、br等

display:block

  block元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度。

  block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。

  block元素可以设置margin和padding属性。

有width,height,仍然独占一行:

可以设置margin,padding属性:

display:inline

  inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。

  inline元素设置width,height属性无效。

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

width,height无效:

padding有效,margin-left,margin-right有效;margin-top,margin-bottom 无效:

display:inline-block

  简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。

display:inline; display:block;的更多相关文章

  1. 理解display:inline、block、inline-block

    要理解display:inline.block.inline-block的区别,需要先了解HTML中的块级(block)元素和行级(inline)元素的特点,行内元素也叫内联元素. 块级元素 总是另起 ...

  2. HTML5 display:inline、block、inline-block的区别--备用

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  3. display:inline、block、inline-block的区别(转)

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  4. display:inline,display:inline-block,display:block 区别

    之前一直迷惑于display:inline/inline-block/block的异同,在度娘谷哥的帮助下,突然有了一点思路. 按照网上的介绍,inline将对象转化为内联元素,block将对象转化为 ...

  5. display:inline、block、inline-block区别

    display:inline.block.inline-block区别 display:block就是将元素显示为块级元素. display:inline就是将元素显示为行内元素. inline-bl ...

  6. display:inline、block、inline-block的区别(摘抄)

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

  7. display:inline、block、inline-block的区别 摘】

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  8. (转载)display:inline、block、inline-block的区别

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  9. display:inline、block、inline-block的区别

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度不设是它的容器的100%,除非设定一个宽度 <div& ...

随机推荐

  1. zabbix-agent配置文件说明

    zabbix-agent配置文件:/etc/zabbix/zabbix_agentd.conf Server=zabbix server IP,网关IP hostname=本机IP ServerAct ...

  2. MFC之键盘和键盘消息处理

    今天学习了最基本的MFC操作,键盘及键盘消息函数,跟着书中的内容自己编了个小程序.检测用户是否同时按下SHIFT和B键 第一步:先是建了一个单文档模式的MFC程序,添加了键盘消息及处理函数.键盘消息处 ...

  3. JSFuck奇葩的js编码

    以前对黑客很崇拜,黑客的世界无比精彩.最近为了炫耀,想起了这段特殊的代码. [][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[ ...

  4. OC NSString 基本操作(用到补充持续更新)

    1.将字符串拆分成数组 NSString *string = @"1,2,3,4"; NSArray *array = [string componentsSeparatedByS ...

  5. 搬运:Python for Windows——监控Windows某个目录下文件的变化

    https://win32com.goermezer.de/content/view/286/285/ 这个网站真是给力,不多说,代码直接搬运过来,还有我的测试结果,拿走不谢! import os i ...

  6. keil uvision3 添加 STC单片机库

    本人工作以来,一直从事仪表程序维护和开发工作,使用的清一色的都是microchip单片机。现在弄一个光立方的小玩意,需要用STC单片机。它有特点很明显,方便、资料多、最重要的一点便宜。 网上下载的ke ...

  7. Python学习基本

    刚开始学习是看了这个网站: 廖雪峰的官方网站  http://www.liaoxuefeng.com/wiki/001374738125095c955c1e6d8bb493182103fac92707 ...

  8. 清除缓存,计算Sql Server查询效率

    --优化之前 DBCC FREEPROCCACHE DBCC DROPCLEANBUFFERS SET STATISTICS IO ON select Dtime,Value from dbo.his ...

  9. 《SharePoint 2013 应用开发实战》目录

    博客地址:http://blog.csdn.net/FoxDave 第 1 章  1 ◄SharePoint概述►        1 1.1  SharePoint的发展历程 1 1.1.1  Sha ...

  10. sql语句格式化数字(前面补0)、替换字符串

    以下是详细分析: 1.select power(10,3)得到1000(即:10的3次方) 2.select cast(1000+33 as varchar) 将1000转换类型(即:将int转化成v ...