首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

CSS :什么时候使用display flex和display inline-block?

display:flex和display:inline-block是CSS中用于布局的两种常见属性。

  1. display:flex:
    • 概念:display:flex是一种弹性布局模型,通过将容器内的子元素设置为弹性项目,可以实现灵活的布局。
    • 分类:属于CSS3中的布局模块。
    • 优势:相比传统的布局方式,使用display:flex可以更方便地实现水平和垂直居中、等高布局、自适应布局等复杂布局需求。
    • 应用场景:适用于需要灵活布局的场景,如导航菜单、页面头部、页面底部等。
    • 腾讯云相关产品:腾讯云提供了云服务器、云数据库、云存储等多种产品,可以用于搭建和部署使用display:flex布局的网站。具体产品介绍请参考腾讯云官网:腾讯云产品介绍
  • display:inline-block:
    • 概念:display:inline-block将元素设置为内联块级元素,使其既具有内联元素的特性(可以与其他元素在同一行显示),又具有块级元素的特性(可以设置宽高、边距等属性)。
    • 分类:属于CSS2.1中的基本显示属性。
    • 优势:使用display:inline-block可以实现多个元素在同一行显示,并且可以设置宽高等属性,适用于一些需要水平排列的元素。
    • 应用场景:适用于制作导航菜单、按钮组、图片列表等需要水平排列的场景。
    • 腾讯云相关产品:腾讯云提供了云存储、云函数等产品,可以用于存储和处理使用display:inline-block布局的网页中的图片、文件等资源。具体产品介绍请参考腾讯云官网:腾讯云产品介绍

注意:以上答案仅供参考,具体的应用场景和推荐产品需要根据实际需求进行选择。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

cssjshtml cssdisplay:inline-block布局

可以使用padding上下左右都有效,margin只有leftright产生边距效果,但是topbottom就不行. block(块级元素): 使元素变成块级元素,独占一行,在不设置自己的宽度的情况下...没错,displayinline-block的效果几乎浮动一样,但也有不同,接下来讲一下inline-block浮动的比较。...c.浏览器兼容性:ie6/7是不兼容 displayinline-block的所以要额外处理一下:   在ie6/7下:   对于行内元素直接使用{dislplay:inline-block;}...  对于块级元素:需添加{display:inline;zoom:1;} 4.总结:   displayinline-block的布局方式浮动的布局方式,究竟使用哪个,我觉得应该根据实际情况来决定的...:   a.对于横向排列东西来说,我更倾向与使用inline-block来布局,因为这样清晰,也不用再像浮动那样清除浮动,害怕布局混乱等等。

1.1K20
  • css基础」如何理解Display的属性:None,Block,Inline,Inline-Block

    display: inline-block (文末送最新CSS3英文电子书) 本篇文章阅读时间预计2分钟。...01 display: none vs visibility: hidden 如下段代码所示,我们有三个红、蓝、绿的方块: css部分 #box-1 { width: 100px; height...> 首先我们先使用 display: none 属性隐藏蓝色的方块,如下段代码所示: #box-2 { display: none; width...03 Display: Inline-block 某些情况下,行内元素块级元素并不能满足我们的设计需求,因此有了Inline-block这个属性,从属性的名字,我们就可以分析出其综合了两者的一些特征。...今天的文章就到这里,希望通过本篇文章,你明白了display这些基本属性的差异用法。

    1.4K20

    css文字块-display行内元素块 inline-block 只给文字加背景

    我们想要实现第二行的效果,所以用display: inline-block;给文字定义为行内元素块。...如下图图片display: display 属性规定元素应该生成的框的类型。可能的值图片值描述none此元素不会被显示。block此元素将显示为块级元素,此元素前后会带有换行符。inline默认。...inline-block行内块元素。(CSS2.1 新增的值)list-item此元素会作为列表显示。run-in此元素会根据上下文作为块级元素或内联元素显示。...compactCSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。markerCSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。...table-column此元素会作为一个单元格列显示(类似 )table-cell此元素会作为一个表格单元格显示(类似 )table-caption此元素会作为一个表格标题显示

    3.9K10

    css3 flex布局的使用 图片文字垂直居中排列 图文混排垂直居中 display:flex「建议收藏」

    遇到的问题 在实际工作的过程中经常遇到图片文字的混排,需要图片与一段文字垂直居中,这个实现方法以前一直非常复杂,而flex是解决这个问题比较好的办法; css代码 display:flex; flex的是...图文混排垂直居中基本用法 用flex实现文字图片在同一行的时候的垂直居中排列方式: 将父元素容器的display属性设为flex,而子元素的垂直方向上的margin设置为auto,就能实现图文混排的图片与文字垂直居中...: css代码: .container{ display:flex; width:30rem; height:10rem; background-color...css代码片段: .container2{ width:60rem; height:20rem; display:flex; background-color: #fdf; justify-content...display:flex; background-color: #f99; padding:20px; flex-wrap:no-wrap;/*这个是默认为no-wrap 不换行*/ }

    3.6K20

    day007:使用display:inline-block会产生什么问题?解决方法?

    day 007: 使用display:inline-block会产生什么问题?解决方法? 问题复现 问题: 两个displayinline-block元素放到一起会产生一段空白。 如代码: <!...: 14px; background: blue; display: inline-block; width: 100px; height...产生空白的原因 元素被当成行内元素排版的时候,元素之间的空白符(空格、回车换行等)都会被浏览器处理,根据CSS中white-space属性的处理方式(默认是normal,合并多余空白),原来 HTML代码中的回车换行被转成一个空白符...将子元素标签的结束符下一个标签的开始符写在同一行或把所有子标签写在同一行 左 <div...为子元素设置float:left .left{ float: left; font-size: 14px; background: red; display: inline-block;

    32610

    CSS】通过定位修改 display 显示模式 ( Display 显示模式转换 | inline-block 改块元素为行内块元素示例 | 为块元素设置浮动 | 为块元素设置定位 )

    一、Display 显示模式转换 ---- display 显示模式 , 可以分为 行内显示模式 ; 块内显示模式 ; 行内块显示模式 ; 将 元素 的显示模式修改为 行内块显示模式 的方法 : 使用...inline-block 可以改变显示模式 , 将 元素的显示模式 改为 行内块 显示模式 ; 使用 浮动 , 也可以 将 块内元素 改为 类似于行内块的显示模式 , 浮动是脱标的 , 不占用标准流元素的位置...; 绝对定位 固定定位 都可以到达 将 元素转为 行内块显示模式 的效果 ; 行内盒子 , 一旦使用了 浮动 / 绝对定位 / 固定定位 就可以将该盒子看做 行内块元素 盒子 , 为该盒子设置宽高等属性...; 浮动元素 绝对定位 / 固定定位 元素 , 都是脱标的 , 都不会触发 外边距塌陷 问题 , 为 盒子设置 浮动 / 定位 , 就不用考虑 外边距塌陷的问题 ; 二、块元素示例 ---- div...: inline-block; height: 100px; background-color: pink; } <div class

    1.2K30

    【前端攻略】最全面的水平垂直居中方案与flexbox布局

    { text-align:center; } 并且适用于文字,链接,及其inline或者inline-block、inline-tableinline-flex。...学会使用flexbox 要为元素设置flexbox布局,只需将display属性值设置为flex。...当要被居中的元素是inline或者inline-block元素 当要被居中的元素是inline或者inline-block的时候,可以巧妙的将父级容器设置为display:table-cell,配合text-align...Demo 总结     CSS3的transformflex固然好用,但在项目的实际运用中必须考虑兼容问题,大量的hack代码可能会导致得不偿失。...某些浏览器仍需使用前缀写法: .flexboxtest{ display: flex; display: -webkit-flex; //Safari仍旧需要使用特定的浏览器前缀 } 浏览器对最新版本的

    1.4K40

    css display属性的值及用法_css clear作用

    CSS 2.1 */ display: inline-block; display: table; display: inline-table; display: table-cell; display...: inline-block inline-blockCSS 2.1 新增的属性。...CSS表格能够解决所有那些我们在使用绝对定位浮动定位进行多列布局时所遇到的问题。例如,display:table的CSS声明能够让一个HTML元素和它的子节点像table元素一样。...,所以应该是不能使用的,支持度全无 display: flex flex是一种弹性布局属性 注意,设为Flex布局以后,子元素的float、clearvertical-align属性将失效。...: -webkit-box 由于某X5浏览器某些版本还不支持最新版的flex布局,所以为了保证良好的运行,建议还是使用display: box,boxflex布局的主要差别如下: 容器属性 display

    2.4K10

    【常用整理】CSS布局方案大全

    a) inline-block + text-align .parent{ text-align: center; } .child{ display: inline-block; } tips:此方案兼容性较好...,可兼容至IE8,对于IE567并不支持inline-block,需要使用css hack进行兼容 b) table + margin .child{ display: table; margin: 0...auto; } tips:此方案兼容至IE8,可以使用代替css写法,兼容性良好 c) absolute + transform .parent{ position: relative...flex是一个强大的css,生而为布局,它可以轻松的满足各种居中、对其、平分的布局要求,但由于现浏览器兼容性问题,此方案很少被使用,但是值得期待浏览器兼容性良好但那一天!...; vertical-align: middle; } .child{ display: inline-block; } tips:兼容至IE8 b) absolute + transform .parent

    1K30

    【前端】CSS : display

    inline-block既具有block的宽高特性又具有inline的同行元素特性(CSS 2.1 新增) table : 作为块级表格来显示(类似table),表格前后带有换行符。...inline-block inline-block既具有block的宽高特性又具有inline的同行元素特性 (CSS 2.1 新增) 例: .display4 { display: inline-block...使用基于表格的CSS布局,使我们能够轻松定义一个单元格的边界、背景等样式, 而不会产生因为使用了table那样的制表标签所导致的语义化问题。...flex: 属性是flex-grow, flex-shrink flex-basis的简写,默认值为0 1 auto。后两个属性可选。...结语 在熟悉display使用之后,日常的布局基本都能解决。 (多数布局都可以通过flex解决) 参考 CSS display 属性详解 有错误之处,感谢指出,接收批评

    1.8K10
    领券