-webkit-box的属性

最新推荐文章于 2023-05-08 23:46:33 发布
原创 最新推荐文章于 2023-05-08 23:46:33 发布 · 1.5k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#webkit #box #flex

本文详细介绍了 CSS 中 -webkit-box 相关属性的使用方法，包括子元素的排列方向、比例、排列顺序等，帮助读者更好地掌握 Flexbox 布局技巧。

-webkit-box-orient子元素排列方向 horizontal | vertical |inline-axis | block-axis | inherit，其中默认值是inline-axis，即横向排列

-webkit-box-flex 子元素之间比例，仅作一个系数

-webkit-box-direction 子元素排列顺序 normal | reverse |inherit，其中默认值是normal

-webkit-box-flex-group 以组为单位的流体系数

-webkit-box-ordinal-group 以组为单位的子元素排列方向

-webkit-box-lines子元素是否换行，类似word-wrap和word-break的作用

-webkit-box-align 子元素垂直方向的对其方式

-webkit-box-pack 子元素水平方向的对其方式

CSS -webkit-box-orient: vertical属性编译后丢失问题详解
01-19
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; 后来发现代码里写的好好的，一到页面上居然没有反应，和没写一个样，f12看了下，原来是-webkit-box-orient: vertical;这个属性丢失，...
css3弹性布局-webkit-box的用法演示
11-04
`-webkit-box` 是`display`属性的一个值，用于开启WebKit浏览器的弹性布局。在标准的Flexbox中，对应的属性值是`display: flex`。设置此属性后，容器将变为一个弹性盒模型，其子元素会根据规则进行排列和调整。 二...
display:-webkit-box
weixin_30681615的博客
06-26 917
Flexbox 为 display 属性赋予了一个新的值（即 box 值）, flexbox的属性有很多，记录一些比较常用的属性： 用于父元素的样式： display: box; 该属性会将此元素及其直系子代加入弹性框模型中。（Flexbox 模型只适用于直系子代） box-orient:horizontal|vertical|inherit; 该属性定义父元素的子元素...
CSS -webkit-box的属性
sinat_15155817的专栏
05-18 1339
 -webkit-box-orient子元素排列方向 horizontal | vertical |inline-axis | block-axis | inherit，其中默认值是inline-axis，即横向排列 -webkit-box-flex 子元素之间比例，仅作一个系数 -webkit-box-direction 子元素排列顺序 normal | reverse |inheri
CSS3.0盒模型display:-webkit-box;的使用
我以我名，行我道！
03-14 1699
box-flex是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。经典 的一个布局应用就是布局的垂直等高、水平均分、按比例划分。 目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(- moz)、opera(-0)、chrome/safari（-w
display:-webkit-box布局
weixin_52255957的博客
05-08 5837
webkit-box-pack:是让子元素在水平方向上的对其方式，跟flex布局中的justify-content属性差不多。父元素500px - 150px(child-three )=350px,子元素1和2就各占350px的1/3和2/3。以上就是我目前对-webkit-box的一个初步了解，希望能帮到你，如果有什么错误的地方请在评论区指正~~-webkit-box-align:子元素在垂直方向的对齐方式，跟flex中的align-items差不多。:默认值，子元素横向排序。
display : -webkit-box-inline 我见
weixin_30242907的博客
04-08 301
发现： 最近在做移动端的东西，说起移动端弹性盒子布局真是无往不利，用起来特别爽，我也是偶尔间发现的这个属性并且它的用法，在网上基本查不到这个属性的资料（个人看法）。如果没有听说过（display:box）的朋友建议去别人家的博客看看CSS3就可以直接command+w了，由字看意，是不是能联想到 display:inline 这个属性，不知道的可以看看我的上一篇随笔, 之所有在前面加上-we...
CSS3 Notes: -webkit-box-reflect实现倒影的实例
09-24
在CSS3中，`-webkit-box-reflect` 是一个非标准的Webkit私有属性，用于在特定元素的下方、上方、右侧或左侧创建倒影效果。这个属性主要用于基于WebKit的浏览器，比如Chrome和Safari，以及一些移动端浏览器。由于它是...
css -webkit-line-clamp WebKit的CSS扩展(WebKit是私有属性)
09-27
在这个文本中，我们首先要了解的知识点是关于Webkit浏览器引擎的一个非标准CSS属性：-webkit-line-clamp。这个属性的用途在于限制一个块级元素内的文本显示行数，超出部分则通过省略号隐藏，从而达到所谓的“文本...
-webkit-box-
凯子的专栏
03-14 1189
弹性盒模型
移动web开发实践-css3（1）盒模型display:-webkit-box;的使用
weixin_30516243的博客
06-19 297
　　提到移动布局不得不提到盒模型display:-webkit-box;这个属性，在移动布局中浮动已经不在重要，相反自适应成为主要的需求，所以display:-webkit-box;变得尤为重要。 　　box-flex是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。 目前box-flex属性还没...
css3 webkit-box
PHP游刃者的专栏
07-14 484
css3 webkit-box1、之前要实现横列的web布局，通常就是float或者display：inline-block; 但是都不能做到真正的流体布局。至少width要自己去算百分比。 2.flexible box 就可以实现真正意义上的流体布局。只要给出相应属性，浏览器会帮我们做额外的计算。提供的关于盒模型的几个属性：box-orient 子元素排列 vertical
css3 display：-webkit-box
weixin_30699235的博客
01-09 197
1、webkit-box 1》.之前要实现横列的web布局，通常就是float或者display:inline-block;但是都不能做到真正的流体布局。至少width要自己去算百分比 2》.box-flex是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。 提供的关于盒模型的几个属性 ...
关于display:-webkit-box
csdn_xiangJ的博客
12-17 465
移动布局中自适应-webkit-box 随着现在app的需求越来越多，我们在写代码时，为了能使app在各个版本手机上都能自动适应放大和缩小，css3提出的-webkit-box使用越来越频繁，实现布局的垂直登高/水平均分/按比例划分。 目前没有浏览器支持 box-pack 属性。 Firefox 支持替代的 -moz-box-pack 属性。 Safari、Opera 以及 Chrome 支持替代...
-webkit-box —— flex布局的前世（流体布局）
cc_King的博客
03-07 974
-webkit-box 布局整理、flex布局整理
display: -webkit-box; 盒模型
晴天Smile
05-09 2287
p {         width: 100%;         overflow: hidden;         text-overflow: ellipsis; 文本溢出隐藏         display: -webkit-box; /* 定义为盒子显示 */         -webkit-box-orient: vertical;  /* 定义为竖向编排显示 */     
关于display: -webkit-box；
weixin_50948265的博客
03-29 3661
目录display:-webkit-boxbox属性（父元素的属性）子元素的属性 display:-webkit-box 一般用于移动端布局，没有得到firefox、Opera、chrome浏览器的完全支持，但是都可以加上浏览器私有前缀然后进行使用的 当父元素设置了这个属性之后，子元素变成内联元素(子元素的子元素不会受影响，感觉和flex十分类似)，高度默认占满父元素，当所有子元素的宽度超过父元素的宽度的时候，他不会自动换行，会继续占领那一行，父元素的宽度不会改变 box属性（父元素的属性） box-or
【CSS3】水平垂直居中 -webkit-box
BIG_LEE_SHOW的博客
02-03 3001
我把干货都放在了代码里，说明全在注释上，希望可以帮到有需要的人。 Document html,body{ width: 100%; height:100%; } /*理解-webkit-box-flex的用法*/ .parent1{ /*首先定义父元素display:-webkit-box; 这个属性必须给父元素，所有的属性都是用来控制子元素的*/
display：-webkit-box用法
m0_45043105的博客
11-05 2897
@TOC（1）介绍的第一个就是display：-webkit-box，我们知道元素大致分为内联元素、块状元素和介于两者之间的元素，当然还有inline-table、table-cell等神马的，那么display: -webkit-box怎么用呢 display：-webkit-box用法 这时候我们可以试试新的display:-webkit-box，另外还有如下属性配合使用， -webkit-b...
-webkit-box
09-01
你提到了一个CSS属性，-webkit-box。这是Webkit浏览器引擎中的一个私有属性，用于控制元素的布局行为。它主要用于旧版本的WebKit浏览器，如Safari和Chrome中。 -webkit-box属性主要有以下几个值： 1. -webkit-box-orient: 用于设置容器内子元素的排列方向，可以是水平方向（row）或垂直方向（column）。 2. -webkit-box-direction: 用于设置容器内子元素的排列顺序，可以是正常顺序（normal）或反向顺序（reverse）。 3. -webkit-box-pack: 用于设置子元素在容器主轴方向上的对齐方式，可以是起始对齐（start）、居中对齐（center）、结束对齐（end）或分散对齐（justify）。 4. -webkit-box-align: 用于设置子元素在容器交叉轴方向上的对齐方式，可以是起始对齐（start）、居中对齐（center）、结束对齐（end）或拉伸对齐（stretch）。 需要注意的是，-webkit-box属性是一个私有属性，只在WebKit浏览器中有效，并且在新版浏览器中已经被弃用。推荐使用更标准的CSS Flexbox布局或CSS Grid布局来替代使用。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值