返回顶部
首页 > 资讯 > 精选 >CSS的display:inline-block属性如何使用
  • 114
分享到

CSS的display:inline-block属性如何使用

2023-07-05 00:07:41 114人浏览 泡泡鱼
摘要

这篇文章主要介绍“CSS的display:inline-block属性如何使用”,在日常操作中,相信很多人在CSS的display:inline-block属性如何使用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家

这篇文章主要介绍“CSS的display:inline-block属性如何使用”,在日常操作中,相信很多人在CSS的display:inline-block属性如何使用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”CSS的display:inline-block属性如何使用”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

CSS中display:inline-block属性用法

在使用CSS实现表现的时候,会经常接触到display:inline-block这一属性,无论是初接触WEB标准还是接触标准已久的朋友,大都会对这一属性感觉很迷惑和模糊。

display:inline-block

将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。
但对于这个属性不是所有浏览器都识别。

支持的浏览器有:Opera、Safari

但很遗憾,***的IE和Firefox却不支持这个属性(据说下一版本的Firefox将会支持display:inline-block)。不过Firefox下却有私有属性-moz-inline-box和inline-block形似,为什么是“形似”而不是“神似”呢?这是因为使用-moz-inline-box会带来很多意想不到的后遗症,比如使用这一属性后,text-align有时候就会有问题,还得改用Firefox的私有属性-moz-box-align来解决(谢谢aoao提供案例)。

◆建议:***不要使用Firefox私有属性-moz-inline-box。

或许有朋友会对上面所说的IE也不支持display:inline-block属性,表示疑问或者反对。说:“我在IE中对a或者span等内联元素使用display:inline-block一直是有效的”。

其实不然,在IE中对内联元素使用display:inline-block,IE是不识别的,但使用display:inline-block在IE下会触发layout(如果你对layout感觉到陌生,可以参看old9翻译的《Onhavinglayout》),从而使内联元素拥有了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不会消失)。代码如下(...为省略的其他属性内容):

ExampleSourceCode

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

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

ExampleSourceCode

div{display:inline;zoom:1;...}

css的选择器有哪些

css的选择器可以分为三大类,即id选择器、class选择器、标签选择器。它们之间可以有多种组合,有后代选择器、子选择器、伪类选择器、通用选择器、群组选择器等等

到此,关于“CSS的display:inline-block属性如何使用”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

--结束END--

本文标题: CSS的display:inline-block属性如何使用

本文链接: https://www.lsjlt.com/news/348287.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • CSS的display:inline-block属性如何使用
    这篇文章主要介绍“CSS的display:inline-block属性如何使用”,在日常操作中,相信很多人在CSS的display:inline-block属性如何使用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家...
    99+
    2023-07-05
  • 如何进行CSS的display:inline-block属性的使用
    如何进行CSS的display:inline-block属性的使用,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。display:inlin...
    99+
    2024-04-02
  • CSS中display:inline-block属性的用法
    这篇文章主要讲解了“CSS中display:inline-block属性的用法”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“CSS中display:inli...
    99+
    2024-04-02
  • 如何使用display:inline-block居中没有宽度的元素
    这篇文章主要介绍“如何使用display:inline-block居中没有宽度的元素”,在日常操作中,相信很多人在如何使用display:inline-block居中没有宽度的元素问题上存在疑惑,小编查阅了...
    99+
    2024-04-02
  • css中display属性之inline-block布局的使用示例
    这篇文章主要介绍css中display属性之inline-block布局的使用示例,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完! CSS display 属性注释:如果规定了 !DOCTYPE,则 Inte...
    99+
    2023-06-08
  • 如何使用CSS的overflow属性
    这篇“如何使用CSS的overflow属性”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“如...
    99+
    2024-04-02
  • css的float属性如何使用
    这篇“css的float属性如何使用”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“css的float属性如何使用”文章吧。f...
    99+
    2023-07-04
  • CSS的padding属性如何使用
    这篇文章主要介绍了CSS的padding属性如何使用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇CSS的padding属性如何使用文章都会有所收获,下面我们一起来看看吧。CSS padding属性元素的内边距...
    99+
    2023-07-04
  • css的hover属性如何使用
    本篇内容介绍了“css的hover属性如何使用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!hover的定义:hover 选择器用于选择鼠标...
    99+
    2023-07-04
  • CSS如何使用outline属性
    这篇文章将为大家详细讲解有关CSS如何使用outline属性,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。 在谷歌Chrome浏览器的形式像控制<input>...
    99+
    2024-04-02
  • CSS如何使用transform属性
    小编给大家分享一下CSS如何使用transform属性,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧! 您可以使用CSStran...
    99+
    2024-04-02
  • CSS盒属性如何使用
    这篇文章主要介绍“CSS盒属性如何使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“CSS盒属性如何使用”文章能帮助大家解决问题。一、块级元素在容器中的居中问题:我...
    99+
    2024-04-02
  • CSS如何使用position属性
    这篇文章主要介绍了CSS如何使用position属性的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇CSS如何使用position属性文章都会有所收获,下面我们一起来看看吧。position属性有4个值:默认是s...
    99+
    2023-07-04
  • css的background-color属性如何使用
    这篇文章主要介绍了css的background-color属性如何使用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇css的background-color属性如何使用文章都会...
    99+
    2024-04-02
  • CSS的padding-bottom属性如何使用
    本篇内容主要讲解“CSS的padding-bottom属性如何使用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“CSS的padding-bottom属性如何使用”吧!CSS padding-bo...
    99+
    2023-07-04
  • CSS的margin-bottom属性如何使用
    本篇内容主要讲解“CSS的margin-bottom属性如何使用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“CSS的margin-bottom属性如何使用”吧!什么是csscss是一种用来表现...
    99+
    2023-07-04
  • CSS中clip属性如何使用
    这篇文章将为大家详细讲解有关 CSS中clip属性如何使用,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。CSS clip 属性定义和用法clip 属性剪裁绝...
    99+
    2024-04-02
  • CSS中display属性如何使用
    这篇文章将为大家详细讲解有关CSS中display属性如何使用,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。CSS display 属性定义和用法displ...
    99+
    2024-04-02
  • CSS中 top属性如何使用
    CSS中 top属性如何使用,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。CSS top 属性定义和用法top 属性规定元素的顶部边缘。该属性...
    99+
    2024-04-02
  • CSS中expression属性如何使用
    CSS中expression属性如何使用,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。CSS expression属性作用1、给元素固有属...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作