移动布局box||-webkit-box

最新推荐文章于 2023-02-01 10:22:33 发布
最新推荐文章于 2023-02-01 10:22:33 发布
阅读量591 收藏
点赞数
分类专栏： web前端之路 文章标签： 布局 displaybox
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lovqc/article/details/51188036
版权

移动布局，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居中无效

lovqc
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解css display:box 新属性
01-19
一、display:box; 　　在元素上设置该属性，可使其子代排列在同一水平上，类似display:inline-block;。 二、可在其子代设置如下属性 　　前提：使用如下属性，必须在父代设置display:box; 　　1.box-flex:number; 　　　　1）占父级元素宽度的number份 　　　　2）若子元素设置固定宽度，则该子元素应用固定宽度，其他未设置固定宽度的字元素将余下的父级宽度（父级-已设置固定宽度的子代元素的总宽度按　number占份数 　　　　3）若子元素有margin值，则按余下（父级宽度-子代固定总宽度-总margin值）宽度占number份 　　2.bo
CSS3.0盒模型display:-webkit-box;的使用
我以我名，行我道！
03-14 1537
box-flex是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。经典 的一个布局应用就是布局的垂直等高、水平均分、按比例划分。 目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(- moz)、opera(-0)、chrome/safari（-w
css display:box 新属性
apl2015的博客
04-11 388
一、display:box; 　　在元素上设置该属性，可使其子代排列在同一水平上，类似display:inline-block;。 二、可在其子代设置如下属性 　　前提：使用如下属性，必须在父代设置display:box; 　　1.box-flex:number; 　　　　1）占父级元素宽度的number份 　　　　2）若子元素设置固定宽度，则该子元素应用固定宽度，其他未设置...
在chrome下-webkit-box布局的一个bug
weixin_35771144的博客
02-04 100
　　chrome，也就是webkit内核下作的检测， chrome版本是40, -webkit-box这种布局在移动端用的比较多，主要是因为pc端的浏览器内核参差不齐。 因为在写HTML的时候看上了-webkit-box的自动根据浏览器窗口大小自动排列的智能布局， 所以我也入了坑， 坑是这样的： <!DOCTYPE html PUBLIC "-//W3C//D...
CSS3中webkit-box布局页面实例
一步一步,网上爬
03-12 1115
之前布局都是用float布局或者是display:inline-block;+width:**%；来计算，所以都不是真正意义上的流布局； 接下来的实例能完整的教给大家如何建立CSS3当中的流布局（以chrome为例） 三列自适应布局                  .wrap {   display: -we
CSS3 Notes: -webkit-box-reflect实现倒影的实例
09-24
主要介绍了CSS3 Notes: -webkit-box-reflect实现倒影的实例,具有一定的参考价值，有需要的可以了解一下。
关于box-sizing的全面理解
12-13
语法box-sizing: content-box|border-box|inherit; content-box ：w3c标准（默认） border-box ：IE传统标准 content-box: .test1{ box-sizing:content-box; width:200px; padding:10px; borde
Python库 | dsbox-datacleaning-0.2.4.tar.gz
05-14
资源分类：Python库 所属语言：Python 资源全名：dsbox-datacleaning-0.2.4.tar.gz 资源来源：官方 安装方法：https://lanzao.blog.csdn.net/article/details/101784059
CSS -webkit-box-orient: vertical属性编译后丢失问题详解
01-19
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; 后来发现代码里写的好好的，一到页面上居然没有反应，和没写一个样，f12看了下，原来是-webkit-box-orient: vertical;这个属性丢失，...
-webkit-box-
凯子的专栏
03-14 1044
弹性盒模型
关于display: -webkit-box；
weixin_50948265的博客
03-29 3149
目录display:-webkit-boxbox属性（父元素的属性）子元素的属性 display:-webkit-box 一般用于移动端布局，没有得到firefox、Opera、chrome浏览器的完全支持，但是都可以加上浏览器私有前缀然后进行使用的 当父元素设置了这个属性之后，子元素变成内联元素(子元素的子元素不会受影响，感觉和flex十分类似)，高度默认占满父元素，当所有子元素的宽度超过父元素的宽度的时候，他不会自动换行，会继续占领那一行，父元素的宽度不会改变 box属性（父元素的属性） box-or
display:box布局的详细介绍（图解）
热门推荐
AliceWu的博客
08-01 2万+
使用display:-webkit-box布局很久了，但是每次使用的时候都是现用现查，而且发现网上没有找到一篇非常全面的关于此布局的介绍，今天决定写一篇博客来记录这个自适应布局。 1、首先不同的浏览器要做不同的兼容：目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(-moz)、opera(-0)、chrome/...
display：-webkit-box用法
m0_45043105的博客
11-05 2268
@TOC（1）介绍的第一个就是display：-webkit-box，我们知道元素大致分为内联元素、块状元素和介于两者之间的元素，当然还有inline-table、table-cell等神马的，那么display: -webkit-box怎么用呢 display：-webkit-box用法 这时候我们可以试试新的display:-webkit-box，另外还有如下属性配合使用， -webkit-b...
-webkit-box之 pack与align
04-30 1182
-webkit-box-pack 取值：start | center | end | justify box-pack受-webkit-box-orient的影响，默认情况下（即box-orient设置为horizontal）start和end所呈现的效果等同于左对齐和右对齐；当box-orient设置为vertical时，start和end所呈现的效果等同于顶部对齐和底部对齐； cen
自适应布局webkit-box的用法
m0_72200584的博客
02-01 1543
自适应布局webkit-box的用法
关于display:-webkit-box
csdn_xiangJ的博客
12-17 379
移动布局中自适应-webkit-box 随着现在app的需求越来越多，我们在写代码时，为了能使app在各个版本手机上都能自动适应放大和缩小，css3提出的-webkit-box使用越来越频繁，实现布局的垂直登高/水平均分/按比例划分。 目前没有浏览器支持 box-pack 属性。 Firefox 支持替代的 -moz-box-pack 属性。 Safari、Opera 以及 Chrome 支持替代...
nodeJs处理json
小灯博客
01-18 1万+
返回json > var http = require('http'); var data = { 'name': ['chao','qin'], 'company': 'lla', 'movies':[{ 'name': "星河战队1", 'type': "太空歌剧" },{ 'name': "星河战队2：掠夺者
npm设置下载路径
小灯博客
12-22 5305
安装node，测试一切ok后进行： npm config get prefix npm config get cache 就可以看到默认的路径； 接下来使用set进行重置： npm config set prefix “D:\Program Files\nodejs\node_global” npm config set prefix “D:\Program Files
div可编辑状态设置
小灯博客
10-28 5055
div,p标签等可以激活他们的可编辑状态 jQuery中 $("div").attr("contenteditable":"true");
不匹配的属性值 ([<font-style> || <font-variant-css21> || <font-weight> || <font-stretch-css3>]? <font-size> [/ <line-height>]? <font-family> | caption | icon | menu | message-box | small-caption | status-bar | <apple-system-font> | <moz-system-font> | [initial | inherit | unset | revert])
最新发布
06-07
这个错误通常出现在 CSS 属性中，表示属性值不符合语法规则或不支持该属性值。你可以检查该属性的语法是否正确，并确认浏览器是否支持该属性值。如果该属性值不被支持，你可以尝试使用其他合法的属性值来替换它。如果出现语法错误，你可以检查该属性值中的拼写、大小写和格式是否正确。如果问题仍然存在，你可以尝试在搜索引擎中搜索该错误信息以获取更多的解决方案。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值