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. Mysql 视图 游标 触发器 存储过程 事务

    Mysql 视图 触发器 存储过程 游标 游标是从数据表中提取出来的数据,以临时表的形式存放在内存中,在游标中有一个数据指针,在初始状态下指向的是首记录,利用fetch语句可以移动该指针,从而对游标中 ...

  2. windows下MySQL 忘记初始密码

    一.windows下修改MySQL用户密码的方法:   1.关闭正在运行的MySQL服务:net stop mysql  或 在windows 任务管理器中结束 mysqld.exe 进程 或 在 管 ...

  3. js中遍历删除数组中的项(项目中遇到的问题解决)

    代码如下: for (var key=0;key<$scope.pageContent.messages.length;key++){ if($scope.pageContent.message ...

  4. ionic ios 友盟多渠道/自动签名/加固之腾讯云。乐固

    之前写了一篇文章主要是介绍使用gradle进行多渠道分发处理的文章--链接:http://www.cnblogs.com/happen-/p/6029387.html 最近在做app上线的处理,发现某 ...

  5. API接口:分页

    // 查询满足要求的总记录数 $count = M("back")->where($back_map)->count(); $pagecount = ceil($cou ...

  6. postgresql:pgadmin函数调试工具安装过程

    通过安装第三方插件pldebugger,可实现在pgadmin客户端对函数设置断点.调试,具体过程如下: 1.下载pldebugger安装包:http://git.postgresql.org/git ...

  7. 大熊君大话NodeJS之------(Url,QueryString,Path)模块

    一,开篇分析 这篇文章把这三个模块拿来一起说,原因是它们各自的篇幅都不是很长,其次是它们之间存在着依赖关系,所以依次介绍并且实例分析.废话不多说了,请看下面文档: (1),"Url模块&qu ...

  8. Unity3D 之脚本架构,优雅地管理你的代码

    本文参考雨松MOMO大神的帖子: 图片全部来自他的帖子(请允许我偷懒下) --------------------------------------------------------------- ...

  9. javascript 函数与对象

    javascript中的函数是非常重要的概念,也是比较难于理解的一个知识点! 下面就来聊聊函数: JS基于对象:什么是基于对象呢?简单的说所有代码都是"对象"; 比如函数: fun ...

  10. 微信公众平台推出"微信保护"提升微信账号安全 附微信保护开启教程

    前两天小美女的微信公众平台要群发消息时提示需要绑定手机才能操作,当时还以为是动态ip的问题,今天微信公众平台安全中心就说升级了,原来那时已经在公测了.微信公众平台推出"微信保护", ...