所有的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. ListView 在设备切换横竖屏时保存状态

    比如listview在设备切换横竖屏时,仍然需要保证position, activity - > onSaveInstanceState  - > restoreInstanceState ...

  2. fastscript增加公共函数

    fastscript增加公共函数 unit fs_BsCommFuncs; interface{$i fs.inc}uses SysUtils, Classes, fs_iclassesrtti, f ...

  3. Weblogic内存溢出及常用参数配置

        http://www.360doc.com/content/14/0306/14/16134804_358216319.shtml 一.WebLogic内存溢出 最近访问量门户访问量突然增大, ...

  4. android状态栏总结

    针对状态栏的操作,只针对4.4kitKat(含)以上的机型,部分国产rom会失效,目前发现的有华为的EMUI Activity必须是noActionbar主题 本文基于StatusBarUtils略作 ...

  5. uva 11374 最短路+记录路径 dijkstra最短路模板

    UVA - 11374 Airport Express Time Limit:1000MS   Memory Limit:Unknown   64bit IO Format:%lld & %l ...

  6. 老毛桃winpe优盘启动系统个性修改全攻略

    PE优盘系统也有很多:大白菜.老毛桃.深度.通用PE工具箱.U大师.电脑店……这些PE优盘系统大多都会捆绑软件安装.更改主页等,一不小心,你就中招.虽然有些是可以自己去取消,但是启动画面还是带有各种L ...

  7. 转:android studio入门合集

    http://blog.csdn.net/column/details/zsl-androidstudio.html

  8. 22. Spring Boot 拦截器HandlerInterceptor【从零开始学Spring Boot】

    转:http://blog.csdn.net/linxingliang/article/details/52069495 上一篇对过滤器的定义做了说明,也比较简单.过滤器属于Servlet范畴的API ...

  9. 手把手教你安装Hbase,一次成功!

    安装环境: OS: Centos 6.5 JDK: jdk1.6.0_18 Hadoop: hadoop-0.20.2 Hbase: hbase-0.90.5 安装准备: 1.       Jdk环境 ...

  10. xterm.js 基于websocket 链接容器 命令行工具

    <template> <div> <el-dialog title="命令" :visible.sync="dialogTableVisib ...