移动布局box||-webkit-box

最新推荐文章于 2023-08-16 09:44:39 发布
最新推荐文章于 2023-08-16 09:44:39 发布
阅读量628 收藏
点赞数
分类专栏： web前端之路 文章标签： 布局 displaybox
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/lovqc/article/details/51188036
版权
本文介绍了一种使用 display 属性实现移动布局的方法，包括设置父级容器的显示方式、子元素的排列方向、对齐方式及顺序等。适用于希望了解 CSS 灵活布局技术的前端开发者。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

移动布局，display:-webkit-box||dispaly:box;
父级：
水平|垂直排列-webkit-box-orient:horizontal|vertical
子级垂直对齐方式-webkit-box-align:center|start|end|stretch|baseline;
子级水平对齐方式-webkit-box-pack:start|end|center|justify
子级排列顺序-webkit-box-direction:nomal|reverse|inherit;
子级比例：-webkit-box-flex:1
注意：父级为block，子级呈内联容器inline-block显示，margin居中无效

css3弹性布局-webkit-box的用法演示
11-04
css3弹性布局-webkit-box的用法演示 css3弹性布局-webkit-box的用法演示
纯css实现左右滑动(-webkit-box使用)
艾欢欢的博客
04-19 3107
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>纯css实现左右滑动</title> <...
CSS3.0盒模型display:-webkit-box;的使用
我以我名，行我道！
03-14 1663
box-flex是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。经典 的一个布局应用就是布局的垂直等高、水平均分、按比例划分。 目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(- moz)、opera(-0)、chrome/safari（-w
display:-webkit-box布局
weixin_52255957的博客
05-08 5364
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差不多。:默认值，子元素横向排序。
CSS3弹性伸缩布局
Vurtne1st的博客
09-12 1310
◆旧版本写法： ●IE浏览器不支持●其他浏览器需要加前缀 display:-webkit-box;  //设置弹性伸缩盒模型 1.-webkit-box-orient  //主要实现盒子内部元素的流动方向 有四个值：horizontal (伸缩项目从左到右水平排列)默认值       vertical(伸缩项目从上到下垂直排列)       inline-axis(伸缩项目沿着内联轴排
CSS text-shadow，box-shadow，border-radius属性
09-25
CSS中的text-shadow、box-shadow和border-radius属性是用于增强页面视觉效果的重要工具。这些属性自CSS3版本起被广泛采用，并在现代网页设计中扮演着至关重要的角色。下面将分别对这三个属性进行详细解释，并探讨...
移动app开发
10-09
4. `-webkit-box-pack`: 定义主要轴上的对齐方式，如起始（`start`）、结束（`end`）、居中（`center`）或均匀分布（`justify`）。 5. `-webkit-box-align`: 控制次要轴上的对齐方式，如顶部（`top`）、底部（`...
css-flex-box-实践
02-09
在前端开发领域，CSS（Cascading Style Sheets）是用于定义网页布局和样式的语言，而Flex Box（弹性盒布局）是CSS3中的一种布局模式，极大地简化了复杂的页面布局问题。本实践教程将深入探讨Flex Box的核心概念、...
uni-app flex布局
01-20
在uni-app中，使用CSS3的flex布局能够极大地提升移动应用的界面设计和用户体验。下面将详细阐述flex布局的概念、特点、优势以及相关的术语和属性。 **概念** flex布局，全称为“Flexible Box”，即弹性盒布局，是...
CSS-Layout:AluraCSS布局课程
04-19
7. Box-sizing属性：改变元素的盒模型，可设置为`content-box`（默认）或`border-box`，影响元素的实际尺寸计算。 8. FlexGrow, FlexShrink, FlexBasis：在Flexbox中，这三个属性控制元素如何分配空间。FlexGrow...
10、flex应用
u010502101的博客
12-19 294
flex布局在原来的旧版上已经做了很多改动，但很多应用还是应用的旧版的，下面分别对照两种版本进行分析。 一、flex旧版 在对需要使用flex布局的容器上使用display: -webkit-box。 1、-webkit-box-orient容器的布局方向 -webkit-box-orient属性本质上确定了主轴是哪一根，因为容器内的内容默认是按主轴进行排列的。可选值包括： horizontal...
display：-webkit-box用法
m0_45043105的博客
11-05 2756
@TOC（1）介绍的第一个就是display：-webkit-box，我们知道元素大致分为内联元素、块状元素和介于两者之间的元素，当然还有inline-table、table-cell等神马的，那么display: -webkit-box怎么用呢 display：-webkit-box用法 这时候我们可以试试新的display:-webkit-box，另外还有如下属性配合使用， -webkit-b...
-Webkit-Box 在 Safari 中出现的兼容性问题
qq_31551105的博客
08-16 2090
想到这里，突然想到，-webkit-box 这个是早期版本的 flex 布局，那会不会就跟 display: flex;这个一样，当有了 flex 容器之后，flex 元素就不再是 BFC、IFC 之类的，而是 FFC 呢?如果真是这样的话，那么是不是就可以多嵌套一层，由最外层控制文本多行截断，最里层控制 tag 的浮动效果呢?于是改变一下 HTML 结构。于是在最外层再包一个div把原先的display:-webket-box放在最外面的div样式里，这下总算解决了！
自适应布局webkit-box的用法
m0_72200584的博客
02-01 1726
自适应布局webkit-box的用法
关于display: -webkit-box；
weixin_50948265的博客
03-29 3521
目录display:-webkit-boxbox属性（父元素的属性）子元素的属性 display:-webkit-box 一般用于移动端布局，没有得到firefox、Opera、chrome浏览器的完全支持，但是都可以加上浏览器私有前缀然后进行使用的 当父元素设置了这个属性之后，子元素变成内联元素(子元素的子元素不会受影响，感觉和flex十分类似)，高度默认占满父元素，当所有子元素的宽度超过父元素的宽度的时候，他不会自动换行，会继续占领那一行，父元素的宽度不会改变 box属性（父元素的属性） box-or
移动端Flex 布局新旧混合兼容
百九
04-13 7242
flex是个非常好用的属性，如果说有什么可以完全代替float和position，那么肯定是非它莫属了（虽然现在还有很多不支持flex的浏览器）。然而在移动开发中，本来绝大多数浏览器（包括安卓2.3以上的自带浏览器）都支持的属性，偏偏有个例外，就是国产某某X5内核神器（不知哪个版本的webkit，仅支持display:box），自主研发这东西也不好多说什么了，下面入正题。 首先还是从两个版本
CSS3中webkit-box布局页面实例
一步一步,网上爬
03-12 1223
之前布局都是用float布局或者是display:inline-block;+width:**%；来计算，所以都不是真正意义上的流布局； 接下来的实例能完整的教给大家如何建立CSS3当中的流布局（以chrome为例） 三列自适应布局                  .wrap {   display: -we
CSS3 弹性盒布局模型和布局原理
Wendy
02-09 9510
在CSS 3中，CSS Flexible Box模块为一个非常重要的模块，该模块用于以非常灵活的方式实现页面布局处理。        虽然可以使用其他CSS样式属性来实现页面布局处理，但是如果使用CSS Flexible Box模块中定义的弹性盒布局技术，可以根据屏幕尺寸或浏览器窗口尺寸自动调整页面中各局部区域的显示方式，即实现非常灵活的布局处理。        引入弹性盒布局模型的目的是
-webkit-line-clamp: 9;
最新发布
03-28
2. **-webkit-box-orient**: 设置为 `vertical` 来定义弹性盒子的方向为纵向布局[^5]。 3. **overflow**: 需要设置为 `hidden` 以隐藏超出范围的内容。 4. **text-overflow**: 设置为 `ellipsis` 可以让截断处显示...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值