• block元素的特点是:

  总是在新行上开始;
  高度,行高以及顶和底边距都可控制;
  宽度缺省是它的容器的100%,除非设定一个宽度
  <div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。

  • inline元素的特点是:

  和其他元素都在一行上;
  高,行高及顶和底边距不可改变;
  宽度就是它的文字或图片的宽度,不可改变。
  <span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。

  • inline和block可以控制一个元素的行宽高等特性,需要切换的情况如下:

  让一个inline元素从新行开始;
  让块元素和其他元素保持在一行上;
  控制inline元素的宽度(对导航条特别有用);
  控制inline元素的高度;
  无须设定宽度即可为一个块元素设定与文字同宽的背景色。

  • inline-block将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。

  inline-block的元素特点:

  将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。(准确地说,应用此特性的元素呈现为内联对象,周围元素保持在同一行,但可以设置宽度和高度地块元素的属性).

block,inline,inline-block的更多相关文章

  1. block,inline和inline-block概念和区别

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

  2. block、inline、inline-block

    block: block - 块级元素 常见的块级元素包括:div,form,p,table,ul,ol,dl,h1~h6,pre block 可以包含 inlne 和 block 和 inline- ...

  3. block,inline和inlinke-block细节对比

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

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

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

  5. block,inline和inline-block概念和区别(转)

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

  6. display:inline; display:block;

    block(块级元素): div .from. p .table. pre.h1~h6. dl .ol .ul等 inline(内联元素): span.a.strong.em.label.input. ...

  7. block,inline,inline-block的区别

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

  8. block,inline和inline-block对比

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

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

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

  10. CSS 概念 Block Inline Containing block

    Block 元素 包括 "block-level box," "block container box," and "block box" ...

随机推荐

  1. 日志管理-NLog日志框架简写用法

    本文转载:http://www.blogjava.net/qiyadeng/archive/2013/02/27/395799.html 在.net中也有非常多的日志工具,今天介绍下NLog.NLog ...

  2. CentOS minimal版安装图形界面的步骤(自动获取IP)

    1.连接网络: CentOS minimal.iso安装好后,进入终端,默认是不开网络的, 首先启用网卡, 自动获取ip. ifconfig eth0 up   www.2cto.com  dhcli ...

  3. .Net MVC4 加.html后缀报404问题

    一.配置方法: routes.MapRoute( name: "User_Default1", url: "user/{action}.html", defau ...

  4. asp.net 获取当月的第一天和最后一天示例

    DateTime now = DateTime.Now; DateTime d1 = ); DateTime d2 = d1.AddMonths().AddDays(-); d1是本月的第一天,d2本 ...

  5. java中内存结构及堆栈详解

    一. java内存结构 1. Heap(堆):实例分配的地方,通过-Xms与-Xmx来设置 2. MethodArea(方法区域):类的信息及静态变量. 对应是Permanet Generation, ...

  6. libevent evbuffer bug

    今天发现 libevent 2.0.22 一个坑爹的bug,导致消息混乱.查找问题浪费一天,复现代码如下 #include <event2/buffer.h> #include <s ...

  7. web开发(Java&Jquery)实现验证码

    1. Ajax Fancy Capcha 一个支持 Ajax 又很炫的 jQuery Captcha 插件,它使用了很人性化的验证机制. ​ from : http://www.webdesignbe ...

  8. 杭电oj 2719

    Tips:本程序没有什么难度,只要按照逻辑进行替换即可,需要注意的是,由于输入串中含有空格符号,所以不能使用scanf("%s",ch);来读取一串,可以使用gets()函数读取一 ...

  9. js LocalStorage

    此对象主要有两个方法:保存数据:localStorage.setItem(Key, value);读取数据:localStorage.getItem(Key);Key:表示你要存入的键名称,此名称可以 ...

  10. java 获取特定天数的时间戳

    public Timestamp strToDate(int type){ Timestamp time = null; DateFormat format2= new SimpleDateForma ...