display:box 属性
一、作用
在元素上设置该属性,可使其子代排列在同一水平上,类似 display:inlineblock;。
目前 box-flex 属性还没有得到 firefox、 Opera、 chrome 浏览器的完全支
持 , 但 可 以 使 用 它 们 的 私 有 属 性 定 义 firefox(-moz-) 、 opera(-o-) 、
chrome/safari(-webkit-)。
二、可在其子代设置如下属性
前提:使用如下属性,必须在父代设置 display:box;
0x1 box-flex
可能的值为 n(数字)。
- 占父级元素宽度的 n 份
- 若子元素设置固定宽度,则该子元素应用固定宽度,其他未设置固定宽度的字元素将余下的父级宽度(父级-已设置固定宽度的子代元素的总宽度按 n 占份数
- 若子元素有 margin 值,则按余下(父级宽度-子代固定总宽度-总 margin 值)宽度占 n 份
0x2 box-orient
可能的值: horizontal | vertical | inline-axis | block-axis | inherit
- horizontal 在水平行中从左向右排列子元素。
- vertical 从上向下垂直排列子元素。
- inline-axis 沿着行内轴来排列子元素(映射为 horizontal)。
- block-axis 沿着块轴来排列子元素(映射为 vertical)。
- inherit 应该从父元素继承 box-orient 属性的值。
0x3 box-direction
可能的值:normal|reverse|inherit
- normal以默认方向显示子元素。
- reverse 以反方向显示子元素。
- inherit 应该从子元素继承 box-direction 属性的值
0x4 box-align
可能的值:start|end|center|baseline|stretch
在父级设置,子代的垂直对齐方式:
- start 垂直顶部对齐
- end 垂直底部对齐
- center 垂直居中对齐
- stretch 拉伸子代的高度,与父级设置的高度一致。子代 height
无效。
baseline 如果 box-orient 是 inline-axis 或 horizontal,所有子元素均与其基线对齐。
0x5 box-pack
可能的值:start|end|center|justify;
在父级设置,子代的水平对齐方式。
- start 水平左对齐
- end 水平右对齐
- center 水平居中对齐
- justify 在每个子元素之间分割多余的空间(首个子元素前和最
后一个子元素后没有多余的空间)。
三、兼容性
目前没有浏览器支持以上的属性。
但是需要加上前缀的,以 box-flex 为例:
Firefox 支持替代的 -moz-box-flex 属性。
Safari、 Opera 以及 Chrome 支持替代的 -webkit-box-flex 属性。
display:box 属性相关推荐
- css display:box 新属性
一.display:box; 在元素上设置该属性,可使其子代排列在同一水平上,类似display:inline-block;. 二.可在其子代设置如下属性 前提:使用如下属性,必须在父代设置displ ...
- CSS3盒模型display:box详解
display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 目前box ...
- 尖刀出鞘的display常用属性及css盒模型深入研究
一:diplay:inline-block 含义:指元素创建了一个行级的块级元素,该元素内部(内容)被格式化成一个块级元素,同时元素本身则被格式化成一个行内元素.更简单的说就是说inline-bloc ...
- display:box和flex的区别
没区别,仅是各阶段草案命名. flex是最新的,但是在实际的浏览器测试中,display: flex 不能完全替代display: -webkit-box display: box 使用可以参考htt ...
- html+css:display:flex属性
博客 </a></li><li class="" title="高价值源码课程分享"><a data-report-c ...
- html block属性,css display block属性的意思、作用和效果
css中display的block属性是什么意思呢?他是指拥有该属性的html元素以块的方式显示,同时,该元素的前面和后面都会换行,也就是说,如果给一个元素B设置的display:block,那么该元 ...
- display显示属性理解
display显示属性理解 display属性设置一个元素应如何显示,是我们在前端开发中常常使用的一个属性,其中,最常见的有: 目录 display:none;表示此元素将不被显示. display: ...
- box-sizing是CSS3的box属性
box-sizing是CSS3的box属性之一.一说到CSS的盒模型(Box model)我想很多人都会比较烦,特别是对于新手,然而这个Box model又是我们CSS运用中比较重要的一个属性.那么C ...
- 三分钟快速了解CSS Display的属性:Block,Inline,Inline-Block
文章目录 三分钟快速了解CSS Display的属性:Block,Inline,Inline-Block Block Inline Inline-block Block,Inline,Inline-B ...
最新文章
- 服务没有报告任何错误。 请键入 NET HELPMSG 3534 以获得更多的帮助。
- oracle json 搜索,oracle 正则查询json返回报文中某个字段的值
- 奇迹暖暖登录一直显示服务器满,奇迹暖暖无法登录解决办法
- Intel Realsense D435 composite_frame类 frame类 video_frame类 depth_frame类的关系
- storm metric的使用说明
- sharing分片集合环境搭建【MongDB系列之七】
- python3 抓包 解包_Python结构包,解包
- android自定义曲线控件,Android自定义折线图
- 林淮川孙玄:分布式锁选型背后的架构设计思维【附源码】
- Unity3D Editor Undo回退效果实现3 Odin相关
- opengl 加载obj模型
- flac格式怎么转换mp3格式?
- RSA之共模攻击与共享素数
- 腾讯百度之间地图经纬度的转换
- word指定页插入页码
- android录音波浪动画_Android实现波浪效果 - WaveView
- 亚马逊云科技的区域和可用区概念解释
- 2023最新完整版python安装教程
- 【AU】单链表就地逆置
- gdal、proj、geos、sqlite等在VS2015下编译和配置