所有的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. char 转string

    c++: string.c_str()       --------->    c: char c; string str;stringstream stream;stream << ...

  2. AGC006

    AtCoder Grand Contest 006 <br > 心血来潮,开了一套AGC..... 然后发现各种不会做.........感觉智商被AGC摁在地上摩擦...... <b ...

  3. Java ArrayList 详解

    只记录目前为止关注的.JDK1.8 一.基础属性 1.1 内部参数 //空存储实例.直接new ArrayList()便是以该空数组作为实例 private static final Object[] ...

  4. linux几种常见的文件内容查找和替换命令

    作为一个以前没怎么接触过linux的小白,开始使用linux,各种不习惯,这周遇到一个文件内容测查找和替换的需求.学习了以下几种实现方式: 1.vi命令下的查找和替换 1.1 vi下的查找 /patt ...

  5. android -- 存储byte

    public static String byteArrayToHexStr(byte[] byteArray) { if (byteArray == null){ return null; } ch ...

  6. iOS 推送 获取手机设备的 deviceToken

    第一步:申请证书: 第二步:申请app ids,应用名字必须一致.然后再进入进行编辑.使其enable,绿灯. 第三步:申请provisioning profile,生成.mobileprovisio ...

  7. Sencha touch 初体验

    一.什么是Sencha Touch? Sencha Touch是一个应用手持移动设备的前端js框架,与extjs是同一个门派的,它继承了extjs的优点和缺点.功能很强大,效果很炫丽,效率不高. 二. ...

  8. error MSB8011: 未能注冊输出。请尝试启用“逐用户重定向”

    初试MFC就遇到困难了.vs2010创建一个MFC ActiveX控件项目. 什么都还没做呢,就出现故障了? 郁闷呀.! ! 1>C:\Program Files\MSBuild\Microso ...

  9. hdu5296(2015多校1)--Annoying problem(lca+一个公式)

    Annoying problem Time Limit: 16000/8000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others ...

  10. 何时使用Entity或DTO

    关注公众号: 锅外的大佬 每日推送国外优秀的技术翻译文章,励志帮助国内的开发者更好地成长! JPA和Hibernate允许你在JPQL和Criteria查询中使用DTO和Entity作为映射.当我在我 ...