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. 常用的web功能测试方法

    功能测试就是对产品各功能进行验证,根据功能测试用例,逐项测试,检查产品是否达到用户要求功能,即是否满足需求.常用的测试方法如下: 1.页面连接检查:每一个连接是否都有对应的页面,并且页面之间切换正确. ...

  2. qml中打开本地html

    main.cpp QString tmploc = QStandardPaths::writableLocation(QStandardPaths::GenericDataLocation); QDi ...

  3. μC/OS-Ⅲ中的临界段代码

    临界段代码(critical sections),也叫临界区(critical region),是指那些必须完整连续运行,不可被打断的代码段.μC/OS-Ⅲ系统中存在大量临界段代码.采用两种方式对临界 ...

  4. SQL IF ELSE

    if (条件)    begin        (执行模块)    endelse if (条件)    begin        (执行模块)    endelse    begin        ...

  5. CONTAINING_RECORD的实现

    // 9.25.cpp : 定义控制台应用程序的入口点.///*----------------------------CONTAINING_RECODER的实现------------------- ...

  6. c# 第一个实例 通哥

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  7. SQL简单语法

    (1)select SELECT 列名称 FROM 表名称 (2)distinct SELECT DISTINCT 列名称 FROM 表名称 SELECT * FROM 表名称 (3)where SE ...

  8. 怎样用SQL语句查询一个数据库中的所有表?

    怎样用SQL语句查询一个数据库中的所有表?  --读取库中的所有表名 select name from sysobjects where xtype='u'--读取指定表的所有列名select nam ...

  9. php 目录函数和日期函数

    continue . break . exit目录函数opendir(); 打开一个文件夹is_file 只判断文件是否存在: file_exists 判断文件是否存在或者是目录是否存在: is_di ...

  10. 探索javascript----事件对象下的各种X和Y

    每次用到诸如client,screen,offset等,虽然通常都是能用对的,但是总觉得不是那么的自信没错.所以整理一下可以再需要的时候来查阅. 一:clientX和clientY,screenX和s ...