所有的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. Unity3D Shader 入门之简单案例的实现(通过法线实现颜色变化)

    在没有接触Unity3D  Shader 之前,总感觉shader特别神奇,因为听说是对渲染流水线进行编程,就是对GPU进行编程.听着特别高大上.这不,最近刚刚接触Shader,学了几个小案例,然后本 ...

  2. redis 延迟消息

    1.查询下redis 是否打开了键空间通知功能 发现打开了,如果没有打开可以在执行下 我们可以看到参数设置 2.订阅下键空间或者事件通知 订阅键空间:subscribe __keyspace@0__: ...

  3. 手机微硬盘读取速度>50MB/s eMMC技术浅析

    转载:http://mobile.zol.com.cn/296/2968659_all.html#p2968659 手机微硬盘读取速度>50MB/s 在开始今天的话题之前,请大家随笔者一起时光倒 ...

  4. XCode 4.3 Unable to load persistent store UserDictionary.sqlite 以及 ios simulator failed to install the application

    I have been working on an iOS app for some time, all of a sudden I am getting the following crash ev ...

  5. Don't Panic! KRACK 没你想象的那么糟

    上海交通大学密码与计算机安全实验室(LoCCS)软件安全小组(GoSSIP)版权所有,转载请与作者取得联系! 著名的计算机学术安全会议CCS在2017年录用了一篇名为Key Reinstallatio ...

  6. 如何突破Windows环境限制打开“命令提示符”

    如今,许多企业或组织都会通过使用受限的windows环境来减少系统表面的漏洞.系统加固的越好,那么也就意味着能被访问和使用到的功能就越少. 我最近遇到的情况是,一个已经加固的系统同时受到McAfee ...

  7. python 列表结构更新的奇妙问题

    使用python + plt 画图遇到了一个奇怪的问题 应该出来的是这样: 结果做出来以后是这样: 为什么画到一起了...... 这个锅python列表背 a=[1,2]b=a  这样  改变b ,a ...

  8. git 怎样删除远程仓库的最近一次错误提交?

    假设你有3个commit如下: commit 3 commit 2 commit 1 其中最后一次提交commit 3是错误的,那么可以执行: git reset --hard HEAD~1 你会发现 ...

  9. [Algorithms] Sort an Array with a Nested for Loop using Insertion Sort in JavaScript

    nsertion sort is another sorting algorithm that closely resembles how we might sort items in the phy ...

  10. 关于C语言中二维数组传參————————【Badboy】

    直接上代码: #include void Fun(int *a[],int m,int n)// { printf("%d\t",*a);//[0][0] /* int e[2][ ...