CSS中inline、block和inline-block的区别菜鸟指南_区别基础入门

block块级元素特点:1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行)2、元素的高度、宽度、行高以及顶和底边距都可设置。3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。,

,

, ,

  • 是块元素的例子。 in

CSS中inline、block和inline-block的区别菜鸟指南

block

块级元素特点:

CSS中inline、block和inline-block的区别菜鸟指南_区别基础入门

1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行)

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。

 

inline

内联元素特点:

1、和其他元素都在一行上;

2、元素的高度、宽度及顶部和底部边距不可设置;

3、元素的宽度就是它包含的文字或图片的宽度,不可改变。

inline-block

内联块状元素(inline-block)就是同时具备内联元素、块状元素的特点。

inline-block 元素特点:

1、和其他元素都在一行上;

2、元素的高度、宽度、行高以及顶和底边距都可设置。

说明:

并不是所有浏览器都支持此属性,目前支持的浏览器有:Opera、Safari在IE中对内联元素使用display:inline-block,IE是不识别的,但使用display:inline-block在IE下会触发layout,从而使内联元素拥有了display:inline-block属性的表症。从上面的这个分析,也不难理解为什么IE下,对块元素设置display:inline-block属性无法实现inline-block的效果。这时块元素仅仅是被display:inline-block触发了layout,而它本就是行布局,所以触发后,块元素依然还是行布局,而不会如Opera中块元素呈递为内联对象。 

IE下块元素如何实现display:inline-block的效果?

有两种方法:
1、先使用display:inline-block属性触发块元素,然后再定义display:inline,让块元素呈递为内联对象(两个display要先后放在两个CSS声明中才有效果,这是IE的一个经典bug,如果先定义了display:inline-block,然后再将display设回inline或block,layout不会消失)。代码如下(…为省略的其他属性内容):

div {display:inline-block;...} 
div {display:inline;}

2、直接让块元素设置为内联对象呈递(设置属性display:inline),然后触发块元素的layout(如:zoom:1等)。代码如下:

div {display:inline; zoom:1;}

总体概念

block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块,会单独换一行;inline元素则前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满。

大体来说HTML元素各有其自身的布局级别(block元素还是inline元素):

block元素可以包含block元素和inline元素;但inline元素只能包含inline元素。要注意的是这个是个大概的说法,每个特定的元素能包含的元素也是特定的,所以具体到个别元素上,这条规律是不适用的。比如 P 元素,只能包含inline元素,而不能包含block元素。

一般来说,我们会用display:block,display:inline或者display:inline-block来调整元素的布局级别,其实display的参数远远不止这三种,仅仅是比较常用而已。

海计划公众号
(0)
上一篇 2020/03/26 23:33
下一篇 2020/03/26 23:33

您可能感兴趣的内容

  • 如何渲染几万条数据并不卡住界面?入门基础教程_渲染入门攻略

    如何在不卡住页面的情况下渲染数据,也就是说不能一次性将几万条 都渲染出来,而应该一次渲染部分 DOM,那么就可以通过 requestAnimationFrame 来 每 16 ms 刷新一次。代码

    <meta name="viewport"

    2020/03/23
  • JS算法题之有效的括号小白攻略_算法题菜鸟教程下载

    题目描述给定一个只包括 ‘(‘,’)’,'{‘,’}’,'[‘,’]’ 的字符串,判断字符串是否有效。有效字符串需满足:左括号必须用相同类型的右括号闭合。左括号必须以正确的顺序闭合。注意空字符串可被认为是有效字符串。示例输入: “()”
    输出: true输入: “()[]{}”
    输出: true输入: “(]”
    输出: false输入: “([)]”
    输出:

    2020/03/29
  • maptalks.js使用说明_一个轻的JavaScript库来创建集成的2D / 3D地图

    maptalks.js使用说明 官方网址:https://maptalks.org GitHub:https://github.com/maptalks/maptalks.js 简…

    2020/03/07
  • 使用Js的一些小技巧小白教程_技巧小白知识

    任何一门技术在实际中都会有一些属于自己的小技巧。同样的,在使用JavaScript时也有一些自己的小技巧,只不过很多时候有可能容易被大家忽略。而在互联网上,时不时的有很多同行朋友会总结(或收集)一些这方面的小技巧。作为一位JavaScript的菜鸟级的同学,更应该要留意这些小技巧,因为这些小技巧可以在实际业务的开发中帮助我们解决问题,而且会很容易的解决问题。

    2020/03/29
  • VuePress教程视频_一款Vue 驱动的静态网站生成器

    VuePress教程视频 官方网址:https://vuepress.vuejs.org/ GitHub:https://github.com/vuejs/vuepress 简介描…

    2020/03/06
  • a标签调用js的几种方法教程视频_标签小白帮助

    a标签点击事件方法汇总 标签的 href 属性用于指定超链接目标的 URL,href 属性的值可以是任何有效文档的相对或绝对 URL,包括片段标识符和 JavaScript 代码段。这里的href=”javascript:;”,其中javascript:是伪协议,它可以让我们通过一个链接来调用javascript函数.而采用这个方式 javascrip

    2020/03/24
  • 如何使用SASS编写可重用的CSS?菜鸟教程下载_sass指南教程

    Sass 是一个CSS预处理程序,至今使用广泛,它之所以流行,是因为它修复了几个CSS缺陷:Sass 也是 Bootstrap 4 运行的基础。这意味着为了理解如何操作引导代码而学习Sass是非常有帮助的,而不是覆盖代码(这是大多数开发人员的定制方法)。理解Sass可以更好地理解源代码级别的工具。当使用CSS时,我们经常在一个全局环境设置,这样可能会错误地设

    2020/03/22
  • js中,数组如何去重?基础指南_数组指南攻略

    关于如何去除一个给定数组中的重复项,应该是 Javascript 面试中最常见的一个问题了,最常见的方式有三种: Set 、 Array.filter 以及 Array.reduce ,对于只有简单数据的数组来讲,我最喜欢 Set ,没别的,就是写起来简单。const originalArray = [1, 2, ‘咩’, 1, ‘Super Ball’,

    2020/03/26
  • 软件测试职业大洗牌使用攻略_测试基础知识

    入行软件 测试 职业,十年。曾经,入行是一件很简单的事。会点点点,是个正常人,愿意做,就行。反正也对你没太大期望,整个软件开发完了,给测试点一遍,没问题,就可以上线了。所以,给很多同学留下的印象就是:测试职业,门槛低,入门简单。如果找不到工作,或者不想干开发,就来做测试吧。也不知道,后来入行的同学,是从哪里得到的信息。现在还有很多同学,有这类思维。比如:写了

    2020/03/26
  • es6字符串的扩展指南教程_字符串入门百科

    1. 字符的 Unicode 表示法Javascript 中允许采用 uxxxx的形式表示一个字符,其中xxxx表示字符的Unicode码点。如下”\u0061″
    这种 表示有区间 只能在 0000 ~ FFFF之间,如果超出则需要用双字节的的形式表示”\u20BB7\uDFB1″
    在ES6中,对字符串的写法做出了改变。改为将码点放入大括号中,就能正确读取该

    2020/03/30
  • script.js零基础入门_异步 JavaScript 加载器和依赖管理器

    script.js零基础入门 GitHub:https://github.com/ded/script.js 简介描述:异步 JavaScript 加载器和依赖管理器 script…

    2020/03/08
  • 欺骗技术13款开源工具分享小白攻略_工具使用帮助

    “无论什么战斗,光靠防守是赢不了的。想要赢,就必须攻击。” ——《死亡笔记》一旦被那些受利益驱使或有政府背景的黑客团伙盯上,在这场不太公平的攻防博弈中,你会明显感到力不从心。他们有充足的时间,有娴熟的技术和丰富的资源,而且只要在无数次的尝试中成功一次就可以大获全胜。但安全团队的防守却需要保证百分之百的成功率。这也就是我们常说的“攻防不对等”。防守方靠什么扳倒

    2020/03/29
  • 数据库自增ID用完了会怎样?菜鸟指南_数据库使用帮助

    起步对DBA来说这应该是送分题吧。而我是突如其来的想法想测试下的。正常来说程序员是不会关心自增ID用完的情况的。以 Mysql 为例,它支持的最大的整型是 unsigned bigint,上限是 2 的 64 次次方。假设每秒记录100万条数据的增长,用完自增ID要58万年以后了。自增ID用完了会怎样,什么报错那要是真的58万年以后了呢。就是要探究下用光了会

    2020/03/22
  • Web 研发模式的演变攻略教程_web入门基础教程

    一、简单明快的早期时代可称之为 Web 1.0 时代,非常适合创业型小项目,不分前后端,经常 3-5 人搞定所有开发。页面由 JSP、PHP 等工程师在服务端生成,浏览器负责展现。基本上是服务端给什么浏览器就展现什么,展现的控制在 Web Server 层。这种模式的好处是:简单明快,本地起一个 Tomcat 或 Apache 就能开发,调试什么的都还好,只

    2020/03/30
  • Hammer.js实现多点触控的javascript库小白攻略_库指南教程

    Hammer.js是一个开源的能实现多点触控的javascript库,可以识别触摸,鼠标点击和手势滑动操作,它不依赖任何第三方库,并且非常小巧灵活。安装使用npm安装:npm install –save hammerjs
    使用CDN或者直接下载到本地:<script src="https://cdn.bootcss.com/hammer.js/2.0.8/

    2020/03/29
  • node-tap基础知识_一个测试和代码覆盖工具

    node-tap基础知识 官方网址:https://www.node-tap.org/ GitHub:https://github.com/tapjs/node-tap 简介描述:…

    2020/03/06