文档章节

弹性盒模型(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
css3中的弹性盒模型

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

新网学会
2017/12/29
0
0
关于CSS中的水平/垂直居中问题

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

FT_Christ
2014/05/06
0
0

没有更多内容

加载失败,请刷新页面

加载更多

WinDbg

参考来自:http://www.cnit.net.cn/?id=225 SRV*C:\Symbols*http://msdl.microsoft.com/download/symbols ctrl + d to open dump_file Microsoft (R) Windows Debugger Version 6.12.0002.633......

xueyuse0012
26分钟前
2
0
OSChina 周五乱弹 —— 想不想把92年的萝莉退货

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @罗马的王:分享松澤由美的单曲《地球ぎ》 很久没看圣斗士星矢了 《地球ぎ》- 松澤由美 手机党少年们想听歌,请使劲儿戳(这里) @开源中国首...

小小编辑
53分钟前
10
1
springBoot条件配置

本篇介绍下,如何通过springboot的条件配置,控制Bean的创建 介绍下开发环境 JDK版本1.8 springboot版本是1.5.2 开发工具为 intellij idea(2018.2) 开发环境为 15款MacBook Pro 前言 很多时候,...

贺小五
今天
1
0
javascript source map 的使用

之前发现VS.NET会为压缩的js文添加一个与文件名同名的.map文件,一直没有搞懂他是用来做什么的,直接删除掉运行时浏览器又会报错,后来google了一直才真正搞懂了这个小小的map文件背后的巨大...

粒子数反转
昨天
1
0
谈谈如何学Linux和它在如今社会的影响

昨天,还在农耕脑力社会,今天已经人工智能技术、大数据、信息技术的科技社会了,高速开展并迅速浸透到当今科技社会的各个方面,Linux日益成为人们信息时代的到来,更加考验我们对信息的处理程...

linux-tao
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部