哎，老了之display-box

最新推荐文章于 2023-05-08 23:46:33 发布
最新推荐文章于 2023-05-08 23:46:33 发布
阅读量768 收藏
点赞数 1
原文链接：http://www.cnblogs.com/benchan2015/p/4743326.html
版权

哎，不想吐槽自己了，表示已远远落后，从今天起开始恶补吧，来一个实例

<html>
  <head>
    <meta name="generator"
    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
    <title></title>
	<style>
		*{
			margin:0px;
			padding:0px;
		}
		.test{
			width:700px;
			height:200px;
			display:-moz-box;
			display:-webkit-box;
			display:box;
		}
		.test div{
			
			
			background:green;
			margin-right:20px;
		}
		 .test div:first-child{
			-moz-box-flex:2;
			-webkit-box-flex:2;
		}
		.test div:nth-child(2){
			-moz-box-flex:3;
			-webkit-box-flex:3;
		}
		.test div:nth-child(3){
			-moz-box-flex:3;
			-webkit-box-flex:3;
		}
	</style>
  </head>
  <body>
	<div class="test">
		<div></div>
		<div></div>
		<div></div>
	</div>
  </body>
</html>

 

转载于:https://www.cnblogs.com/benchan2015/p/4743326.html

weixin_34246551
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css3中的display：-webkit-box的用法
csdn_chenli
10-27 7万+
css3中的display：-webkit-box的用法 webkit-box 1.之前要实现横列的web布局，通常就是float或者display:inline-block;但是都不能做到真正的流体布局。至少width要自己去算百分比。 2.flexiblebox就可以实现真正意义上的流体布局。只要给出相应属性，浏览器会帮我们做额外的计算。 3.box-flex是css3新添加的盒子模型
详解css display:box 新属性
09-24
如果子元素设置了固定宽度，那么这个宽度会被优先使用，其他没有固定宽度的子元素则根据`box-flex`值按比例分配剩余空间。如果有`margin`值，它们会在剩余空间内按比例计算。 3. **box-orient: horizontal/vertical...
display: -webkit-box
leverage2009的博客
06-16 1530
转自：https://www.cnblogs.com/frankwong/p/4603141.htmlFlexbox 为 display 属性赋予了一个新的值（即 box 值）, flexbox的属性有很多，记录一些比较常用的属性：用于父元素的样式：display: box; 该属性会将此元素及其直系子代加入弹性框模型中。（Flexbox 模型只适用于直系子代）box-orient: horizo...
display：-webkit-box用法
m0_45043105的博客
11-05 2478
@TOC（1）介绍的第一个就是display：-webkit-box，我们知道元素大致分为内联元素、块状元素和介于两者之间的元素，当然还有inline-table、table-cell等神马的，那么display: -webkit-box怎么用呢 display：-webkit-box用法 这时候我们可以试试新的display:-webkit-box，另外还有如下属性配合使用， -webkit-b...
关于display: -webkit-box；
weixin_50948265的博客
03-29 3228
目录display:-webkit-boxbox属性（父元素的属性）子元素的属性 display:-webkit-box 一般用于移动端布局，没有得到firefox、Opera、chrome浏览器的完全支持，但是都可以加上浏览器私有前缀然后进行使用的 当父元素设置了这个属性之后，子元素变成内联元素(子元素的子元素不会受影响，感觉和flex十分类似)，高度默认占满父元素，当所有子元素的宽度超过父元素的宽度的时候，他不会自动换行，会继续占领那一行，父元素的宽度不会改变 box属性（父元素的属性） box-or
盒子模型:display:-webkit-box的使用
yushang的博客
04-15 7190
在移动布局中浮动已经不再重要,自适应成为主要的需求,所以display:-webkit-box;变的尤为重要. box-flex是css3新添加的盒子模型属性,实现布局的垂直登高/水平均分/按比例划分.兼容性有待提高,没有得到完全支持,可以使用它们的私有属性定义Firefox(-moz)/opera(-o)/chrome/safari(-webkit） 一、box-flex属性 box-fl...
display:-webkit-box；在IE浏览器中不兼容问题
ganjingjie的博客
08-31 3836
问题：在IE里面不兼容，右边那部分掉下去了 解决方案： 加一句display: -ms-flexbox;代码就可以兼容IE了（只能兼容到IE10）， display: -webkit-box; （Chrome 4+, Safari 3.1, iOS Safari 3.2+） display: -moz-box; （Firefox 17-） display: -webkit-flex; （Chrome 21+, Saf...
display:-webkit-box布局
weixin_52255957的博客
05-08 3832
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:flex和display:-webkit-box的用法
agk98610的博客
06-24 1098
一、对内部元素平均分配的问题 1、display:flex; 如果要加私有的话那么方法是display:-webkit-flex;而不是-webkit-display:flex;子元素flex:1然后平均分配，但是这个方法会有一个兼容性，就是UC和QQ浏览器有兼容 2、display:-webkit-box,display:box; 子元素要：-webkit-box-flex:1;...
display: -webkit-box; 盒模型
晴天Smile
05-09 2185
p {         width: 100%;         overflow: hidden;         text-overflow: ellipsis; 文本溢出隐藏         display: -webkit-box; /* 定义为盒子显示 */         -webkit-box-orient: vertical;  /* 定义为竖向编排显示 */     
display:-webkit-inline-box和display: inline-block，等高的div却不在同一条水平线上。
cxu123321的博客
06-05 1282
display:-webkit-inline-box和display: inline-block，等高的div却不在同一条水平线上。 风言枫语 CSS： .bank-box .bank-change .bank-icon { width: 1.5rem; height: 1.5rem; background-image: url(../images/change.png); background-size: cover; displa...
uib-boxmodel-display
05-22
在本实践项目中，我们关注的是“uib-boxmodel-display”，这是一个关于基本CSS练习的课题，特别是涉及CSS的“display”属性。"display"属性在HTML布局中起着至关重要的作用，它控制着元素如何在页面上呈现。让我们...
css3弹性布局-webkit-box的用法演示
11-04
二、`-webkit-box-direction`与`-webkit-box-orient` `-webkit-box-direction`决定了子元素的排列方向。默认值是`normal`，子元素从左到右排列（对于水平布局）或从上到下排列（对于垂直布局）。设置为`reverse`时，...
深入浅析css3 中display box使用方法
09-24
所有盒项的`box-flex`值之和用于计算每个元素的实际宽度或高度。 5. **示例代码解析**： 在提供的代码示例中，`#outer`是Box Container，`#a1`, `#a2`, `#a3`是Box Items。`#outer`设置了`display: box`，并指定了...
ASP外观专利图像检索平台(源代码+论文).rar
07-21
ASP外观专利图像检索平台(源代码+论文)
C++课程设计：电煤气管理系统【源码+文档】
07-21
C++课程设计：电煤气管理系统【源码+文档】 本程序是一个水电气管理信息系统，能够对高校的水电气费用进行管理, 包括了成员的基本信息，如学号、编号、姓名、成员水电气的用量等。程序的用途包括缴纳水电气费、查询一个同学水电气费用量、查看所有同学的缴费情况、增加学生信息、删除学生信息、退出系统等。在设计时也考虑到学生和教师在用水电气时的不同，学生可以免费使用一定额度的水电气，超过这个额度的以后必须付费，且付费部分水电气费的价格要高于教工的收费标准，该措施的实行是为了鼓励同学们节约资源，以免造成不必要的资源浪费。该软件主要是为了学校的管理人员提供便捷，以更快的完成水电气费用的收缴。该软件本着简洁明了，实用稳定为一体进行设计。 系统将实现以下功能： （1）实现对用户信息的录入； （2）实现水电煤气数据的录入； （3）实现计算并查询用户应缴费用，查询未缴纳费用的名单； （4）实现对人员的删除和添加；
ASP+ACCESS网上动态同学录系统（源代码+论文+系统说明+答辩PPT）.rar
07-21
ASP+ACCESS网上动态同学录系统（源代码+论文+系统说明+答辩PPT）
avaloniassification-mas笔记
最新发布
07-21
avalonia
ASP+ACCESS学生排课管理系统毕业设计(源代码+论文).rar
07-21
ASP+ACCESS学生排课管理系统毕业设计(源代码+论文)

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值