`
weitao1026
  • 浏览: 1053355 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

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

 
阅读更多
总体概念
1.block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块,会单独换一行;inline元素则前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满。
2.大体来说HTML元素各有其自身的布局级别(block元素还是inline元素): •常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等。
•常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等。

3.block元素可以包含block元素和inline元素;但inline元素只能包含inline元素。要注意的是这个是个大概的说法,每个特定的元素能包含的元素也是特定的,所以具体到个别元素上,这条规律是不适用的。比如 P 元素,只能包含inline元素,而不能包含block元素。
4.一般来说,可以通过display:inline和display:block的设置,改变元素的布局级别。

block,inline和inlinke-block细节对比
•display:block
1.block元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度。
2.block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
3.block元素可以设置margin和padding属性。

•display:inline
1.inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。
2.inline元素设置width,height属性无效。
3.inline元素的margin和padding属性,水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果;但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

•display:inline-block
1.简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。


补充说明
•一般我们会用display:block,display:inline或者display:inline-block来调整元素的布局级别,其实display的参数远远不止这三种,仅仅是比较常用而已。
•IE(低版本IE)本来是不支持inline-block的,所以在IE中对内联元素使用display:inline-block,理论上IE是不识别的,但使用display:inline-block在IE下会触发layout,从而使内联元素拥有了display:inline-block属性的表象。
分享到:
评论

相关推荐

    display:inline、block、inline-block的区别(转的)

    本篇文章将深入探讨`display:inline`、`display:block`以及`display:inline-block`这三种主要的显示模式之间的区别,帮助你更好地理解它们在实际开发中的应用。 首先,我们来看`display:inline`。这种模式使得元素...

    关于css display: inline block inline-block的区别分析

    display:inline-block 将...不过 Firefox 下却有私有属性 -moz-inline-box 和inline-block 形似,为什么是“形似”而不是“神似”呢?这是因为使用 -moz-inline-box 会带来很多意想不到的后遗症,比如使用这一属性后,

    Block实例------用Block代替delegate来传递值

    在iOS和Objective-C编程中,Block是一种强大的特性,它允许我们定义代码块并在需要的时候执行。Block可以看作是轻量级的函数,能够捕获并封装执行上下文中的变量,使得代码更加简洁、易读。这篇博客"Block实例------...

    Firefox Bug: inline/inline-block的间隙采用代码缩进可解决

    在网页布局中,`inline-block` 是一种常用的CSS布局方式,它允许元素保持内联特性的同时,具有块级元素的宽度和高度可调整性。然而,`inline-block` 在不同浏览器间存在兼容性问题,特别是在Firefox中有一个知名的...

    css块状元素与内联元素以及inline-block

    CSS 块状元素、内联元素和 inline-block elementos CSS 中的块状元素(Block Elements)和内联元素(Inline Elements)是两种基本的元素类型,它们在网页布局和样式设计中扮演着非常重要的角色。块状元素和内联元素...

    inline-block 前世今生1

    display:inline-block 属性是CSS布局中的一个重要概念,它允许元素具有内联元素的特性(如排列在同一行内),同时又能像块级元素那样设置宽度、高度和垂直对齐。这个属性在前端开发中被广泛应用,尤其是用于创建响应...

    inline-block带来的元素间距问题解决

    本文主要关注`inline-block`元素的间距问题及其解决方案,同时也会对比`block`和`inline`的特性。 首先,`display: inline-block` 是一种混合型布局模式,它结合了`inline`元素的并排显示特性与`block`元素的宽高...

    block 和 inline 的区别

    了解`block`和`inline`的区别,有助于开发者更好地控制网页布局和元素的显示方式。在编写HTML时,正确使用这两种元素类型,可以提高代码的可读性和可维护性,同时避免因忽视概念差异而引发的布局问题。在实际开发中...

    跨浏览器的inline-block声明上承诺了很多提供的却很少

    在web设计中,"inline-block"是一种常用的CSS显示属性,它兼具内联元素和块级元素的特点。内联元素如,块级元素如,分别有其独特的布局特性。内联元素不会以新行开始,而是按照它们在文档中出现的顺序排列,而块级...

    CSS属性display:inline-block用法深入理解

    `display:inline-block`是其中一种特殊的值,它结合了`inline`和`block`两种显示特性的优点,使得元素既能像内联元素一样并排显示,又能像块级元素一样控制内容的宽度和高度。下面我们将深入探讨`display:inline-...

    display:inline-block的实际应用

    首先,让我们了解下 `display:inline-block` 的基本概念。当一个元素设置为 `display:inline-block` 时,它会像内联元素那样在同一行内排列,但同时也保留了块级元素的宽度、高度以及垂直对齐的能力。这使得开发者...

    有关display:inline-block在FF出现空白的解决方案

    当使用`display:inline-block`时,元素会像内联元素那样排列,但是它们仍然保留了块级元素的某些特性,如宽度、高度和内边距。在HTML中,空格、换行符甚至缩进都会被浏览器解析为一个空格,导致元素间产生空白。 在...

    IE6的inline-block

    1、display:inline-block 让一个元素具有“区块元素”的属性(可以设置width和height),又具有“内联元素”的属性(不产生换行)。 2、IE中的inline-block IE6不支持这个属性,但IE8开始支持这个属性。 让IE6...

    Justify:一款实现inline-block元素两端对齐布局的javascript插件(a javascript plug-in implementation inline-block elements full-justified layout)

    元素均分宽度、两端自适应对齐的布局在移动web项目中的需求还是挺多的,使用inline-block元素,配合text-align:justify,再注意处理好一些细节问题,便可以在现代浏览器上实现两端对齐,但是最后一行的处理却是个...

    css之display属性之inline-block布局实现详解

    总之,`display`属性的`inline`、`block`和`inline-block`提供了丰富的布局选择,根据设计需求灵活运用这些属性,可以创建出各种复杂的页面布局。理解和掌握这些基本概念对于前端开发者来说至关重要。

    使用display:inline-block居中没有宽度的元素

    "使用display:inline-block居中没有宽度的元素"这个主题主要涉及到CSS中的两个关键概念:`text-align`属性和`display`属性的`inline-block`值,它们在实现动态或未知宽度元素的居中对齐上发挥着重要作用。...

    IE6中a标签同时使用inline-block与text-indent时出现的BUG

    在本文中,我们将深入探讨一个特定的问题:在IE6中,当`<a>`标签同时使用`inline-block`和`text-indent`属性时出现的显示异常。 `inline-block`是一个CSS布局属性,它使元素表现得像内联元素,但同时允许设置宽度、...

Global site tag (gtag.js) - Google Analytics