CSS3弹性盒模型开发笔记(一)


Posted in HTML / CSS onApril 26, 2016

弹性盒模型(Flexible Box Moudle),该模型用于决定元素在盒子中的分布方式以及处理盒子的可用空间。这与XUL(Firefox浏览器的用户交互语言)相似,其他语言也使用相同的盒模型。如XAML,GladeXML等。通过弹性盒模型,可以轻松地创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局。

兼容性:弹性盒模型规范是W3C标准化组织于2009年发布的,目前还没有主流浏览器对其进行支持,不过采用Webkit和Mozilla渲染引擎的浏览器都自定义了一套私有属性,用来支持弹性盒模型。

采用Webkit渲染引擎的浏览器主要包括Safari和Chrome浏览器,该引擎支持以-webkit为前缀的私有属性。

Mozilla渲染引擎的浏览器主要包括Firefox浏览器,该引擎支持以-moz为前缀的私有属性。

相关属性:

box-align:定义子元素在盒子垂直方向上的空间分配方式
box-direction:定义盒子的显示顺序
box-flex:定义子元素在盒子内的自适应尺寸
box-flex-group:定义自适应子元素群组
box-lines:定义子元素分列显示
box-ordinal-group:定义子元素在盒子内的显示位置
box-orient:定义盒子分部的坐标轴
box-pack:定义子元素在盒子内水平方向的空间分配方式

box-orient属性

该属性可用于定义盒子元素内部的流动布局方向.在使用弹性盒子模型时,需要先把父容器的display属性设置为box或者inline-box。
语法:

box-orient:horizontal | vertail | inline-axis | block-axis | inherit

取值简单说明:

horizontal:盒子元素从左到右在一条水平线上显示它的子元素。

vertail:盒子元素从上到下在一条垂直线上显示它的子元素。

inline-axis:盒子元素沿着内联轴显示它的子元素。

block-axis:盒子元素沿着块轴显示它的子元素。

实战体验:设计多栏布局

html代码:

XML/HTML Code复制内容到剪贴板
  1. <div id="box">  
  2.     <div id="box0"><img src="images/web_01.gif" /></div>  
  3.     <div id="sub-box">  
  4.         <div id="box1"><img src="images/web_02.gif" /></div>  
  5.         <div id="box2"><img src="images/web_03.gif" /></div>  
  6.         <div id="box3"><img src="images/web_04.gif" /></div>  
  7.     </div>  
  8. </div>  
  9.   

CSS3代码:

CSS Code复制内容到剪贴板
  1. <style type="text/css">   
  2. body{/*文档样式*/  
  3.     margin:0;padding:0px;/*清除页边距*/  
  4.     text-align:center;/*文档居中对齐*/  
  5.     background:#170843;   
  6. }   
  7. #box{   
  8.     margin:auto;/*文档居中对齐*/  
  9.     text-align:center;   
  10.     width:975px;   
  11. }   
  12. /*定制各个栏目的宽度*/  
  13. #box1{width:185px;}   
  14. #box2{width:601px;}   
  15. #box3{width:189px;}   
  16. /*定制子包含框的盒子显示,其包含的元素水平流动*/  
  17. #sub-box{   
  18.     display:-moz-box;   
  19.     display:-webkit-box;   
  20.     display:box;   
  21.     box-orient:horizontal;   
  22.     -moz-box-orient:horizontal;   
  23.     -webkit-box-orient:horizontal;     
  24. }   
  25. </style>   

演示效果:

CSS3弹性盒模型开发笔记(一)

box-direction属性

box-direction属性可以改变盒子元素中内部元素的流动顺序,该属性基本语法:

box-direction:normal | reverse | inherit

取值简单说明:

normal:正常显示顺序,即如果盒子元素的box-origent属性值为horizontal,则其包含的子元素按照从左到右的顺序显示,即每个子元素的左边总是靠近前一个子元素的右边;如果盒子元素的box-origent属性值设置为vertical,则其包含的子元素按照从上到下的顺序显示。

reverse:反向显示,盒子所包含的子元素的显示顺序将于normal相反。

inherit:继承上级元素的显示顺序。

实战体验:反向布局网页(以上面的案例为基础):

CSS3代码:

CSS Code复制内容到剪贴板
  1. <style>   
  2. body{   
  3.     margin:0;padding:0px;   
  4.     text-align:center;   
  5.     background:#170843;   
  6. }   
  7. #box{   
  8.     margin:auto;   
  9.     text-align:center;   
  10.     width:975px;   
  11. }   
  12. #box1{width:185px;}   
  13. #box2{width:601px;}   
  14. #box3{width:189px;}   
  15. #sub-box{   
  16.     display:-moz-box;   
  17.     display:-webkit-box;   
  18.     display:box;   
  19.     box-orient:horizontal;   
  20.     -moz-box-orient:horizontal;   
  21.     -webkit-box-orient:horizontal;     
  22.     box-direction:reverse;   
  23.     -moz-box-direction:reverse;   
  24.     -webkit-box-direction:reverse;   
  25. }   
  26. </style>   
  27.   

演示效果:

CSS3弹性盒模型开发笔记(一)

box-ordinal-group属性

  box-direction属性可以改变盒子内部元素的流动顺序,而box-ordinal-group属性能够设置每个子元素在盒子中的具体显示位置,语法如下:

box-ordinal-group:<integer>

取值说明:

属性值是一个自然数,从1 开始,用来设置子元素的位置符号。子元素的分布将根据这个属性值从小到大进行排列。在默认情况下,子元素将根据元素的位置进行排列。
注意:如果没有指定box-ordinal-group属性值的子元素,则其序号默认都为1,并且序号相同的元素将按照他们在文档中的加载的顺序进行排列。

实战体验:垂直网页布局

HTML代码:

XML/HTML Code复制内容到剪贴板
  1. <div id="box">  
  2.     <div id="box1"><img src="images/web1_01.gif" /></div>  
  3.     <div id="box2"><img src="images/web1_02.gif" /></div>  
  4.     <div id="box3"><img src="images/web1_03.gif" /></div>  
  5.     <div id="box4"><img src="images/web1_04.gif" /></div>  
  6. </div>  
  7.   

CSS3代码:

CSS Code复制内容到剪贴板
  1. <style type="text/css">   
  2. body {   
  3.     margin:0;   
  4.     padding:0;   
  5.     text-align:center;   
  6.     background:#d9bfe8;   
  7. }   
  8. #box {   
  9.     margin:auto;   
  10.     text-align:left;   
  11.     width:988px;   
  12. }   
  13. /*定义盒形显示及盒内元素垂直显示*/  
  14. #box {   
  15.     display : -moz-box;   
  16.     display : -webkit-box;   
  17.     display : box;   
  18.     box-orient:vertical;   
  19.     -moz-box-orient:vertical;   
  20.     -webkit-box-orient:vertical;   
  21. }   
  22. /*根据网页内容的现实需要,借助弹性盒模型调整各个板块的显示顺序*/  
  23. #box1 {/*设置第一个元素显示在第二个位置*/  
  24.     -moz-box-ordinal-group : 2;/*兼容Mozilla Gecko引擎*/  
  25.     -webkit-box-ordinal-group : 2;/*兼容Webkit引擎*/  
  26.     box-ordinal-group : 2;/*标准用法*/  
  27. }   
  28. #box2 {/*设置第二个元素显示在第三个位置*/  
  29.     -moz-box-ordinal-group : 3;/*兼容Mozilla Gecko引擎*/  
  30.     -webkit-box-ordinal-group : 3;/*兼容Webkit引擎*/  
  31.     box-ordinal-group : 3;/*标准用法*/  
  32. }   
  33. #box3 {/*设置第三个元素显示在第一个位置*/  
  34.     -moz-box-ordinal-group : 1;/*兼容Mozilla Gecko引擎*/  
  35.     -webkit-box-ordinal-group : 1;/*兼容Webkit引擎*/  
  36.     box-ordinal-group : 1;/*标准用法*/  
  37. }   
  38. #box4 {/*设置第四个元素显示在第四个位置*/  
  39.     -moz-box-ordinal-group : 4;/*兼容Mozilla Gecko引擎*/  
  40.     -webkit-box-ordinal-group : 4;/*兼容Webkit引擎*/  
  41.     box-ordinal-group : 4;/*标准用法*/  
  42. }   
  43. </style>   
  44.   

演示效果:

CSS3弹性盒模型开发笔记(一)

以上就是关于CSS3弹性盒模型基础开发知识总结,希望对大家认识CSS3弹性盒模型有所帮助。

本文地址:http://blog.csdn.net/lovejulyer/article/details/51231951

HTML / CSS 相关文章推荐
纯CSS3实现圆角效果(含IE兼容解决方法)
May 07 HTML / CSS
CSS Grid布局教程之网格单元格布局
Dec 30 HTML / CSS
Html5 Canvas 实现一个“刮刮乐”游戏
Sep 05 HTML / CSS
HTML5之SVG 2D入门10—滤镜的定义及使用
Jan 30 HTML / CSS
HTML5 Web Workers之网站也能多线程的实现
Apr 24 HTML / CSS
使用canvas对多图片拼合并导出图片的方法
Aug 28 HTML / CSS
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
Jan 18 HTML / CSS
H5最强接口之canvas实现动态图形功能
May 31 HTML / CSS
使用html2canvas实现将html内容写入到canvas中生成图片
Jan 03 HTML / CSS
使用HTML+Css+transform实现3D导航栏的示例代码
Mar 31 HTML / CSS
HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手
May 10 HTML / CSS
教你做个可爱的css滑动导航条
Jun 15 HTML / CSS
CSS3弹性盒模型开发笔记(三)
Apr 26 #HTML / CSS
浅析两列自适应布局的3种思路
May 03 #HTML / CSS
CSS3 3D位移translate效果实例介绍
May 03 #HTML / CSS
详解CSS的border边框属性及其在CSS3中的新特性
May 10 #HTML / CSS
CSS3中border-radius属性设定圆角的使用技巧
May 10 #HTML / CSS
CSS3使用多列制作瀑布流
May 10 #HTML / CSS
使用CSS3的rem属性制作响应式页面布局的要点解析
May 24 #HTML / CSS
You might like
超神学院:鹤熙已踏入神圣领域,实力不比凯莎弱
2020/03/02 国漫
全国FM电台频率大全 - 13 福建省
2020/03/11 无线电
来自PHP.NET的入门教程
2006/10/09 PHP
PHP的加密方式及原理
2012/06/14 PHP
php模板函数 正则实现代码
2012/10/15 PHP
php 批量生成html,txt文件的实现代码
2013/06/26 PHP
php无法连接mysql数据库的正确解决方法
2016/07/01 PHP
总结PHP内存释放以及垃圾回收
2018/03/29 PHP
Laravel框架Auth用户认证操作实例分析
2019/09/29 PHP
用javascript操作xml
2006/11/04 Javascript
[IE&amp;FireFox兼容]JS对select操作
2007/01/07 Javascript
jQuery.getScript加载同域JS的代码
2012/02/13 Javascript
js关闭子窗体刷新父窗体实现方法
2012/12/04 Javascript
通过jQuery源码学习javascript(一)
2012/12/27 Javascript
DIV+CSS+JS不间断横向滚动实现代码
2013/03/19 Javascript
原生的html元素选择器类似jquery选择器
2014/10/15 Javascript
封装好的js判断操作系统与浏览器代码分享
2015/01/09 Javascript
js带前后翻页的图片切换效果代码分享
2015/09/08 Javascript
node.js使用cluster实现多进程
2016/03/17 Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
2016/11/07 Javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
2017/02/27 Javascript
nodejs开发——express路由与中间件
2017/03/24 NodeJs
vue-router 控制路由权限的实现
2020/09/24 Javascript
[01:14]辉夜杯战队访谈宣传片—NEWBEE.Y
2015/12/26 DOTA
Django中的CBV和FBV示例介绍
2018/02/25 Python
解决Python3.5+OpenCV3.2读取图像的问题
2018/12/05 Python
python将四元数变换为旋转矩阵的实例
2019/12/04 Python
简单了解pytest测试框架setup和tearDown
2020/04/14 Python
Ruby如何创建一个线程
2013/03/10 面试题
文秘专业个人求职信
2013/12/22 职场文书
幼儿老师求职信
2014/06/30 职场文书
幼儿园六一儿童节活动方案
2014/08/26 职场文书
2014年“向国旗敬礼”网上签名寄语活动方案
2014/09/27 职场文书
证劵公司反洗钱宣传活动总结
2015/05/08 职场文书
Python内置数据结构列表与元组示例详解
2021/08/04 Python
详解Golang如何实现支持随机删除元素的堆
2022/09/23 Python