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

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

用display: inline 或display: block命令就可以改变一个元素的这一特性。什么时候需要改变这一属性呢? 
让一个inline元素从新行开始;
让块元素和其他元素保持在一行上;
控制inline元素的宽度(对导航条特别有用);
控制inline元素的高度;
无须设定宽度即可为一个块元素设定与文字同宽的背景色

Block和inline元素对比的更多相关文章

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

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

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

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

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

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

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

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

  5. block,inline和inline-block对比

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

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

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

  7. display:inline-block,block,inline的区别与用法

    一.首先要了解什么是块级元素与行级元素 块级元素 会占领页面的一行,其后多个block元素自动换行. 可以设置width,height,设置了width后同样也占领一行.同样也可以设置   margi ...

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

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

  9. 2017-08-20 block,inline和inline-block概念和区别

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

随机推荐

  1. mysql数据库引擎(InnoDB MyISAM)

    MySQL的默认存储引擎’在5.5版本以前是MYISAM,5.5之后是INNODB. 两种存储引擎的索引结构都是B+树,B+树的详细介绍可参考https://www.cnblogs.com/yange ...

  2. Android Studio 常见命令

    android studio 常用命令 Description Mac Linux/Win Lookup IDE commands Cmd+Shift+A Ctrl+Shift+A Open Clas ...

  3. [JSOI 2015] 子集选取

    4475: [Jsoi2015]子集选取 Time Limit: 1 Sec  Memory Limit: 512 MBSubmit: 363  Solved: 255[Submit][Status] ...

  4. 如何轻松的把图片导入execl表格中

    在项目中有时候会遇到往数据库中导数据的时候,往往需要把图片也一起导入execl表格中,那怎么才能把图片一块导入至execl中呢?那么今天我们就来看看怎么实现吧! 如何实现?今天我们就来用jxl和poi ...

  5. BZOJ 2131 [scoi2010] 传送带

    @(BZOJ)[三分法] Description 在一个2维平面上有两条传送带,每一条传送带可以看成是一条线段. 两条传送带分别为线段AB和线段CD. lxhgww在AB上的移动速度为P,在CD上的移 ...

  6. JavaWeb过滤器.监听器.拦截器-?原理&区别

    过滤器可以简单理解为“取你所想取”,忽视掉那些你不想要的东西:拦截器可以简单理解为“拒你所想拒”,关心你想要拒绝掉哪些东西,比如一个BBS论坛上拦截掉敏感词汇. 1.拦截器是基于java的反射机制,过 ...

  7. DEV GridControl 常用属性 z

    1隐藏最上面的GroupPanel gridView1.OptionsView.ShowGroupPanel=false; 2.得到当前选定记录某字段的值 sValue=Table.Rows[grid ...

  8. WindowManager.LayoutParams 详解

    WindowManager.LayoutParams 是 WindowManager 接口的嵌套类:继承于 ViewGroup.LayoutParams .它的内容十分丰富.其实WindowManag ...

  9. Projective Texture的原理与实现 【转】

              Projective Texture是比较常见的一种技术,实现起来代码也就区区的不过百行,了解其原理及技术细节是我们的重点,知其然,知其所以然.        粗略的说就是想象场景 ...

  10. Linux Apache 给 awstats 创建 訪问password

    CentOS7 安装最新版本号 awstats ,在httpd.conf 中增加了alias,能够直接訪问网址就进入 浏览.十分不安全. 给訪问加上password的方法: [root@localho ...