display:box我想大家很熟悉,那么display:inline-box呢,今天在项目中需要设置这样的属性box-align:center,那么就想到用 display:box;如果设置BOX,那么宽度不能自适应,必须设置一个值,我找了一下,终于找到一个属性可以宽度自适应高度定死的弹性伸缩盒的属性display:inline-box,CSS如下写

.dafeiNotice_time {
padding:0 0.12rem;
background:rgba(0,0,0,0.15);
border-radius: 0.1rem;
text-align: center;
color: #fff;
font-size: 0.26rem;
height:0.38rem;
display:-moz-inline-box;/* Firefox */
display:-webkit-inline-box; /* Safari, Chrome, and Opera */
display:inline-box;/* W3C */
-moz-box-align:center;
-webkit-box-align:center;
box-align:center;
}

那么来说一说display 几个属性:

display:block                 将对象变成宽度和高度都可以设置的块元素

display:inline-block        将对象变成高度定死,宽度自适应的行内块元素

display:display:box        将对象作为弹性伸缩盒显示,同样继承block属性。(伸缩盒最老版本)

display:inline-box:        将对象作为内联块级弹性伸缩盒显示,同样继承inline-block属性。(伸缩盒最老版本)

display:flexbox               将对象作为弹性伸缩盒显示,同样继承block属性。(伸缩盒过渡版本)

display:inline-flexbox      将对象作为内联块级弹性伸缩盒显示,同样继承inline-block属性。(伸缩盒过渡版本)

display:flex                    将对象作为弹性伸缩盒显示,同样继承block属性。(伸缩盒最新版本)

display:inline-flex           将对象作为内联块级弹性伸缩盒显示,同样继承inline-block属性。(伸缩盒最新版本)

display:box和display:inline-box的区别的更多相关文章

  1. CSS3 display:flex和display:box有什么区别?

    **区别**,仅是各阶段草案命名.- W3C 2009年第1次草案:[display:box;](https://www.w3.org/TR/2009/WD-css3-flexbox-20090723 ...

  2. display:inline 和display:inline-block和display:block的区别

    之前讲过块级元素使用display:block 行内元素使用display:inline 那么今天我们就来区分一下display:inline,display:inline-block和display ...

  3. display:box;display:flex;弹性盒模型

    display:box:display:flex:弹性盒模型 非常适用于移动端.PC端高级浏览器,效果也很好. display: -webkit-box; display: -moz-box; dis ...

  4. display:flex和display:box布局浏览器兼容性分析

    display:flex和display:box都可用于弹性布局,不同的是display:box是2009年的命名,已经过时,用的时候需要加上前缀:display:flex是2012年之后的命名.在实 ...

  5. display:block、display:inline与displayinline:block的概念和区别

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

  6. 关于line box,inline box,line-height,vertical-align之间的关系

    1.content area 围绕着文字的一种box,高度由font-size和font-family决定.在chrome控制器里,你用鼠标志向某个内敛元素,显示的高度值. 2.inline box的 ...

  7. CSS——display(Block none inline等)属性的用法

    在一般的CSS布局制作时候,我们常常会用到display对应值有block.none.inline这三个值.下面我们来分别来认识和学习什么时候用什么值.这里通过CSS display知识加实例.图演示 ...

  8. js style.display = "" 和style.display="none" 区别

    style.display = "":是清除display样式,display将使用默认值(块元素会变成block,内联元素会变成inline)style.display=&quo ...

  9. block,inline,inline-block的区别

    block: 英语翻译过来是“块”意思,就跟小时候玩过的积木方块一样,一块一块往上搭. inline: 英语翻译过来就是“内联”的意思,内联不好理解,我的理解就是行内元素: block和inline都 ...

随机推荐

  1. transform

    { transform: scale3d(x,y,z) /*放大*/ translate3d(x,y,z) /*位置*/ rotate3d(x,y,z,angle) /*旋转*/ skew(x-ang ...

  2. 【BZOJ-2476】战场的数目 矩阵乘法 + 递推

    2476: 战场的数目 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 58  Solved: 38[Submit][Status][Discuss] D ...

  3. 如何查看Maven项目中的jar包依赖树情况

    对于开发人员,我想大家对于Maven应该不会陌生吧,如何在一个Maven项目中对这个项目中所引用的第三方jar包有个直观的了解呢? 其实实现很简单,只需要借助于Maven的一条命令,如下所示: mvn ...

  4. [Web开发] 在HTML代码里面如何判断IE版本

    在上一篇blog里面提到IE有不同的显示模式以及如何用Javascript 来动态判定. Web开发者可以根据不同显示模式导入不同的内容.这篇blog 主要讲如何让静态HTML代码根据不同IE版本显示 ...

  5. 全文搜索 Lucene.Net

    Lucene简介 首先说明的是--Lucene.Net只是一个全文检索开发包,不是一个成型的搜索引擎, 它的功能就是负责将文本数据按照某种分词算法进行切词,分词后的结果存储在索引库中,从索引库检索数据 ...

  6. 使用行为树(Behavior Tree)实现游戏AI

    ——————————————————————— 谈到游戏AI,很明显智能体拥有的知识条目越多,便显得更智能,但维护庞大数量的知识条目是个噩梦:使用有限状态机(FSM),分层有限状态机(HFSM),决策 ...

  7. 关于Javascript的使用参考

    DOM编程>1.js重要的作用就是可以让用户可以与网页元素进行交互操作-->JS精华之所在 >2.DOM编程也是ajax的基础 >3.DOM(文档对象模型),是HTML与XML ...

  8. 使用phpMyAdmin修改MySQL数据库root用户密码

    点击顶部的“SQL”标签进入sql命令输入界面.输入以下命令: update mysql.user set password=PASSWORD('snsgou$123456') where user= ...

  9. HTTP请求报文格式

    HTTP报文是面向文本的,报文中的每一个字段都是一些ASCII码串,各个字段的长度是不确定的.HTTP有两类报文:请求报文和响应报文. 请求报文 一个HTTP请求报文由请求行(request line ...

  10. PHP的ob_start()函数用法

    经典参考片段: <?php ob_start(); echo '123'; echo '456'; echo '789'; $content = ob_get_contents(); ob_en ...