文档章节

弹性盒模型(box)

L
 LorinLuo
发布于 2015/11/26 17:32
字数 772
阅读 43
收藏 2

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
     /*--box模型需要加浏览器前缀需要加前缀--*/
div.box {
        width: 300px;
        height: 300px;
        border: 1px solid gray;
        margin: 0 auto;

        display: -webkit-box; /*--display: box 让容器成为弹盒--*/
display: -moz-box;
        display: -o-box;
        display: -ms-box;
        display: box;

        -webkit-box-orient: horizontal; /*--设置弹盒子元素的排列方式(vertical/horizontal)--*/
-moz-box-orient: horizontal;
        -o-box-orient: horizontal;
        -ms-box-orient: horizontal;

        -webkit-box-direction: normal; /*--设置弹盒子元素是否倒序排列--(normal/reverse)*/
-moz-box-direction: normal;
        -o-box-direction: normal;
        -ms-box-direction: normal;

        -webkit-box-pack: start; /*--设置弹盒子元素的对齐方式(start/center/end/justify),box-align反方向,box-orient同方向--*/
-moz-box-pack: start;
        -o-box-pack: start;
        -ms-box-pack: start;

        -webkit-box-align: baseline; /*--设置弹盒子元素的对齐方式(start/center/end/baseline/stretch),box-pack反方向,box-orient反方向--*/
-moz-box-align: start;
        -o-box-align: start;
        -ms-box-align: start;

        -webkit-box-lines: multiple; /*--设置弹盒的元素是否可以换行显示(single/multiple),浏览器还没实现该属性的效果--*/
-moz-box-lines: multiple;
        -o-box-lines: multiple;
        -ms-box-lines: multiple;
     }
     div.box-item-1 {
        background-color: green;

        -webkit-box-flex: 1; --设置或检索弹性盒模型对象的子元素如何分配其剩余空间(Integer)--
        -moz-box-flex: 1;
        -o-box-flex: 1;
        -ms-box-flex: 1;

        -webkit-box-flex-group: 1; /*--数值较大的组分配的空间为所占的实际空间,剩余空间分配给数值最小的那个组--*/
-moz-box-flex-group: 2;
        -o-box-flex-group: 2;
        -ms-box-flex-group: 2;

        -webkit-box-ordinal-group: 3; --设置弹盒子元素的顺序(值越大越靠后排列)--
        -moz-box-ordinal-group: 3;
        -o-box-ordinal-group: 3;
        -ms-box-ordinal-group: 3;
     }
     div.box-item-2 {
        background-color: pink;

        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        -o-box-flex: 1;
        -ms-box-flex: 1;

        -webkit-box-flex-group: 2;
        -moz-box-flex-group: 2;
        -o-box-flex-group: 2;
        -ms-box-flex-group: 2;

        -webkit-box-ordinal-group: 2;
        -moz-box-ordinal-group: 2;
        -o-box-ordinal-group: 2;
        -ms-box-ordinal-group: 2;
     }
     div.box-item-3 {
        background-color: plum;

        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        -o-box-flex: 1;
        -ms-box-flex: 1;

        -webkit-box-flex-group: 2;
        -moz-box-flex-group: 1;
        -o-box-flex-group: 1;
        -ms-box-flex-group: 1;

        -webkit-box-ordinal-group: 1;
        -moz-box-ordinal-group: 1;
        -o-box-ordinal-group: 1;
        -ms-box-ordinal-group: 1;
     }
  </style>
</head>
<body>
  <div class="box" id="box">
     <div class="box-item-1" id="box-item-1">box-item-1</div>
     <div class="box-item-2" id="box-item-2">box-item-2</div>
     <div class="box-item-3" id="box-item-3">box-item-3</div>
  </div>

  box
  <br/>
  <br/>
  box-orient
  <select name="" id="box-orient">
     <option value="horizontal" selected="selected">horizontal</option>
     <option value="vertical">vertical</option>
  </select>
  <br/>
  <br/>
  box-direction
  <select name="" id="box-direction">
     <option value="normal">normal</option>
     <option value="reverse">reverse</option>
  </select>
  <br/>
  <br/>
  box-pack(剩余空间没分配的情况下使用,即没有使用box-flexbox-flex-group)
  <select name="" id="box-pack">
     <option value="start">start</option>
     <option value="center">center</option>
     <option value="end">end</option>
     <option value="justify">justify</option>
  </select>
  <br/>
  <br/>
  box-align
  <select name="" id="box-align">
     <option value="start">start</option>
     <option value="center">center</option>
     <option value="end">end</option>
     <option value="baseline">baseline</option>
     <option value="stretch">stretch</option>
  </select>
  <br/>
  <br/>
  box-item
  <br/>
  <br/>
  <select name="" id="box-item">
     <option value="box-item-1">box-item-1</option>
     <option value="box-item-2">box-item-2</option>
     <option value="box-item-3">box-item-3</option>
  </select>
  <br/>
  <br/>
  box-flex(>=0) 经测试js动态设置此属性无效
<input type="text" id="box-flex"/>
  <br/>
  <br/>
  box-flex-group(>=1)
  <input type="text" id="box-flex-group"/>
  <br/>
  <br/>
  box-ordinal-group(>=1)
  <input type="text" id="box-ordinal-group"/>



  <script>
     var box = document.getElementById("box");
     var orient = document.getElementById("box-orient");
     var direction = document.getElementById("box-direction");
     var pack = document.getElementById("box-pack");
     var align = document.getElementById("box-align");
     var flex = document.getElementById("box-flex");
     var flexGroup = document.getElementById("box-flex-group");
     var ordinalGroup = document.getElementById("box-ordinal-group");
     var boxItem = document.getElementById("box-item");

     var array = [
        {dom: orient, type: "Orient"},
        {dom: direction, type: "Direction"},
        {dom: pack, type: "Pack"},
        {dom: align, type: "Align"}
     ]

     function onchangeBind (dom, type) {
        dom.onchange =function () {
           box.style["webkitBox" + type] = this.value;
           box.style["mozBox" + type] = this.value;
           box.style["oBox" + type] = this.value;
           box.style["msBox" + type] = this.value;
        }
     }

     for (var i = 0; i < array.length; i++) {
        onchangeBind(array[i].dom, array[i].type);
     }

     flex.onblur = function () {
        var itemType = boxItem.value;
        var item = document.getElementById(itemType);
        var value = this.value ? this.value : 0;

        item.style.webkitBoxFlex = value;
        item.style.mozBoxFlex = value;
        item.style.oBoxFlex = value;
        item.style.msBoxFlex = value;
     }

     flexGroup.onblur = function () {
        var itemType = boxItem.value;
        var item = document.getElementById(itemType);
        var value = this.value ? this.value : 1;

        item.style.webkitBoxFlexGroup = value;
        item.style.mozBoxFlexGroup = value;
        item.style.oBoxFlexGroup = value;
        item.style.msBoxFlexGroup = value;
     }

     ordinalGroup.onblur = function () {
        var itemType = boxItem.value;
        var item = document.getElementById(itemType);
        var value = this.value ? this.value : 1;

        item.style.webkitBoxOrdinalGroup = value;
        item.style.mozBoxOrdinalGroup = value;
        item.style.oBoxOrdinalGroup = value;
        item.style.msBoxOrdinalGroup = value;
     }
  </script>
</body>
</html>



© 著作权归作者所有

共有 人打赏支持
L
粉丝 18
博文 166
码字总数 116776
作品 0
成都
程序员
弹性盒模型案例讲解

弹性盒模型的设置的方法为display:box 或display:inline-box box-orient 为定义盒模型的布局方向,由于盒模型的只有在webkit或moz的内核才生效,故我们在使用这个属性之前要在它前面加上-webk...

爱前端的小白
2017/07/06
0
0
CSS:弹性盒模型(Flexible Box)学习

关于w3school对弹性盒模型的解释,只找到这些相关的属性: w3school原文中提到 浏览器支持 目前没有浏览器支持 box-flex 属性。 Firefox 支持替代的 -moz-box-flex 属性。 Safari、Opera 以及...

唐佳
2016/09/18
28
0
HTML前端开发之路——弹性盒模型

弹性盒模型(Flexible Box)是一个CSS3新增布局模块,用于实现容器里项目的对齐、方向、排序; 弹性盒模型最大的特效在于,能够动态的修改子元素的宽度和高度,以满足在不同尺寸屏幕下的恰当...

LeslieMay
2016/02/12
143
0
关于CSS中的水平/垂直居中问题

关于css中的水平、垂直居中问题,我想大家也经常遇到过,而且这也是实用性比较高的用法,那么究竟有多少种方法呢?这边编者就做个小小的总结,有什么不足之处,还望大家多多指出。。。 一、横...

FT_Christ
2014/05/06
0
0
css3中的弹性盒模型

css3中的弹性盒模型 注意:在使用弹性盒子模型的时候 父元素必须要加display:box和display:inline-box 现在我先写上我的代码 注意!在使用盒子模型的时候要加display 这里我前面还加了-we...

新网学会
2017/12/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

es6

在实际开发中,我们有时需要知道对象的所有属性,原生js给我们提供了一个很好的方法:Object.keys(),该方法返回一个数组 传入对象,返回属性名 var obj = {'a':'123','b':'345'};console.l...

不负好时光
12分钟前
0
0
叮!您收到一份超值Java基础入门资料!

摘要:Java语言有什么特点?如何最大效率的学习?深浅拷贝到底有何区别?阿里巴巴高级开发工程师为大家带来Java系统解读,带你掌握Java技术要领,突破重点难点,入门面向对象编程,以详细示例...

全部原谅
13分钟前
0
0
web.xml容器加载顺序

容器对于web.xml的加载过程是context-param >> listener >> fileter >> servlet

Aeroever
15分钟前
1
0
Docker容器日志查看与清理

1. 问题 docker容器日志导致主机磁盘空间满了。docker logs -f container_name噼里啪啦一大堆,很占用空间,不用的日志可以清理掉了。 2. 解决方法 2.1 找出Docker容器日志 在linux上,容器日...

muzi1994
16分钟前
0
0
J2Cache 和普通缓存框架有何不同,它解决了什么问题?

不少人看到 J2Cache 第一眼时,会认为这就是一个普普通通的缓存框架,和例如 Ehcache、Caffeine 、Spring Cache 之类的项目没什么区别,无非是造了一个新的轮子而已。事实上完全不是一回事!...

红薯
19分钟前
414
12

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部