文档章节

弹性盒模型(box)

L
 LorinLuo
发布于 2015/11/26 17:32
字数 772
阅读 45
收藏 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>



© 著作权归作者所有

共有 人打赏支持
上一篇: js实现依赖注入
下一篇: Flex 布局教程
L
粉丝 18
博文 166
码字总数 116776
作品 0
成都
程序员
私信 提问
CSS中各种布局的背后(*FC)

CSS中各种布局的背后,实质上是各种*FC的组合。CSS2.1 中只有 BFC 和 IFC, CSS3 中还增加了 FFC 和 GFC。 盒模型(Box Model) 上图为W3C标准盒模型,另外还有一种IE盒模型(IE6以下),唯一的...

啊咩
2018/12/10
0
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
display属性值求解

display属性值求解 run-in:根据上下文决定对象是内联对象还是块级对象。(CSS3) box:将对象作为弹性伸缩盒显示。 (伸缩盒最老版本)(CSS3) inline-box:将对象作为内联块级弹性伸缩盒显...

gcbeen
2014/12/24
178
2

没有更多内容

加载失败,请刷新页面

加载更多

安卓constraintLayout中app:srcCompat设置的图片显示不出来

使用 app:srcCompat 的时候 引入的图片显示不出来的解决方案 首先查看的你的Activity 继承的是那个Activity 如果是继承AppcompatActivity 使用 ImageView的 app:srcCompat 是没有问题的 如果...

雨焰
38分钟前
1
0
MySQL mysqldump数据导出详解

MySQL mysqldump数据导出详解 2016-04-07 11:14 by pursuer.chen, 114348 阅读, 0 评论, 收藏, 编辑 介绍 在日常维护工作当中经常会需要对数据进行导出操作,而mysqldump是导出数据过程中使用...

linjin200
38分钟前
0
0
Lucene 检索时的步骤

用户输入查询语句:lucene AND learned NOT hadoop 搜索主要分为以下几步 第一步、对查询语句进行词法分析,语法分析,及语言处理 词法分析主要用来识别单词和关键字 语法分析主要是根据查询...

kdy1994
39分钟前
2
0
Gradle Implementation vs API configuration

注: 可以把 Implementation理解为java类的private, 使用Implementation则外部依赖本库的代码引用不到本库Implementation的代码, 也就是降低依赖树的层级, 这样就可以避免外部代码编译时候, 导...

SuShine
43分钟前
2
0
pdf安卓手机适配以及ie的兼容 以及隐藏掉下载打印按钮的方式

这是我目前遇到pdf方面最多的问题。 在百度上搜了很多答案,结果都是建议使用插件。而目前百度能搜的插件基本上都是有缺陷的。自己测试了很多插件。最后使用了pdf.js这个插件。这个插件目前完...

流年那么伤
48分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部