display:box和display:inline-box的区别
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的区别的更多相关文章
- CSS3 display:flex和display:box有什么区别?
**区别**,仅是各阶段草案命名.- W3C 2009年第1次草案:[display:box;](https://www.w3.org/TR/2009/WD-css3-flexbox-20090723 ...
- display:inline 和display:inline-block和display:block的区别
之前讲过块级元素使用display:block 行内元素使用display:inline 那么今天我们就来区分一下display:inline,display:inline-block和display ...
- display:box;display:flex;弹性盒模型
display:box:display:flex:弹性盒模型 非常适用于移动端.PC端高级浏览器,效果也很好. display: -webkit-box; display: -moz-box; dis ...
- display:flex和display:box布局浏览器兼容性分析
display:flex和display:box都可用于弹性布局,不同的是display:box是2009年的命名,已经过时,用的时候需要加上前缀:display:flex是2012年之后的命名.在实 ...
- display:block、display:inline与displayinline:block的概念和区别
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
- 关于line box,inline box,line-height,vertical-align之间的关系
1.content area 围绕着文字的一种box,高度由font-size和font-family决定.在chrome控制器里,你用鼠标志向某个内敛元素,显示的高度值. 2.inline box的 ...
- CSS——display(Block none inline等)属性的用法
在一般的CSS布局制作时候,我们常常会用到display对应值有block.none.inline这三个值.下面我们来分别来认识和学习什么时候用什么值.这里通过CSS display知识加实例.图演示 ...
- js style.display = "" 和style.display="none" 区别
style.display = "":是清除display样式,display将使用默认值(块元素会变成block,内联元素会变成inline)style.display=&quo ...
- block,inline,inline-block的区别
block: 英语翻译过来是“块”意思,就跟小时候玩过的积木方块一样,一块一块往上搭. inline: 英语翻译过来就是“内联”的意思,内联不好理解,我的理解就是行内元素: block和inline都 ...
随机推荐
- transform
{ transform: scale3d(x,y,z) /*放大*/ translate3d(x,y,z) /*位置*/ rotate3d(x,y,z,angle) /*旋转*/ skew(x-ang ...
- 【BZOJ-2476】战场的数目 矩阵乘法 + 递推
2476: 战场的数目 Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 58 Solved: 38[Submit][Status][Discuss] D ...
- 如何查看Maven项目中的jar包依赖树情况
对于开发人员,我想大家对于Maven应该不会陌生吧,如何在一个Maven项目中对这个项目中所引用的第三方jar包有个直观的了解呢? 其实实现很简单,只需要借助于Maven的一条命令,如下所示: mvn ...
- [Web开发] 在HTML代码里面如何判断IE版本
在上一篇blog里面提到IE有不同的显示模式以及如何用Javascript 来动态判定. Web开发者可以根据不同显示模式导入不同的内容.这篇blog 主要讲如何让静态HTML代码根据不同IE版本显示 ...
- 全文搜索 Lucene.Net
Lucene简介 首先说明的是--Lucene.Net只是一个全文检索开发包,不是一个成型的搜索引擎, 它的功能就是负责将文本数据按照某种分词算法进行切词,分词后的结果存储在索引库中,从索引库检索数据 ...
- 使用行为树(Behavior Tree)实现游戏AI
——————————————————————— 谈到游戏AI,很明显智能体拥有的知识条目越多,便显得更智能,但维护庞大数量的知识条目是个噩梦:使用有限状态机(FSM),分层有限状态机(HFSM),决策 ...
- 关于Javascript的使用参考
DOM编程>1.js重要的作用就是可以让用户可以与网页元素进行交互操作-->JS精华之所在 >2.DOM编程也是ajax的基础 >3.DOM(文档对象模型),是HTML与XML ...
- 使用phpMyAdmin修改MySQL数据库root用户密码
点击顶部的“SQL”标签进入sql命令输入界面.输入以下命令: update mysql.user set password=PASSWORD('snsgou$123456') where user= ...
- HTTP请求报文格式
HTTP报文是面向文本的,报文中的每一个字段都是一些ASCII码串,各个字段的长度是不确定的.HTTP有两类报文:请求报文和响应报文. 请求报文 一个HTTP请求报文由请求行(request line ...
- PHP的ob_start()函数用法
经典参考片段: <?php ob_start(); echo '123'; echo '456'; echo '789'; $content = ob_get_contents(); ob_en ...