脚本之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > CSS > css3 >

CSS3弹性盒模型开发笔记（一）

  发布时间：2016-04-26 14:31:44   作者：佚名   我要评论
这篇文章主要为大家分享了CSS3弹性盒模型开发笔记，对兼容性，不同属性进行介绍，感兴趣的小伙伴们可以参考一下

弹性盒模型（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>   

演示效果：

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.   

演示效果：

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弹性盒模型有所帮助。

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

相关文章

  • CSS盒模型制定网页的宽度和高度的原理-CSS教程-网页制作-网页教学网

    当我们布局一个网页的时候，经常会遇到这样的一种情况，那就是最终网页成型的宽度或是高度会超出我们预先的计算，其实就就是所谓的CSS的盒模型造成的。 #test{margin:10
    2008-10-17

  • CSS教程:盒模型(BOX Model)-CSS教程-网页制作-网页教学网

    　　如果想熟练掌握DIV和CSS的布局方法，首先要对盒模型有足够的了解。每个HTML元素都可以看作一个装了东西的盒子，盒子里面的内容到盒子的边框之间的距离即填充（padding
    2008-10-17

  • CSS入门教程:计算CSS盒模型宽和高-CSS教程-网页制作-网页教学网

    　出处：当我们布局一个网页的时候，经常会遇到这样的一种情况，那就是最终网页成型的宽度或是高度会超出我们预先的计算，其实就就是所谓的CSS的盒模型造成的。 #test{m
    2008-10-17

  • 掌握盒模型轻松DIV CSS网页布局

    网页制作Webjx文章简介：如果想熟练掌握DIV和CSS的布局方法，首先要对盒模型有足够的了解。每个HTML元素都可以看作一个装了东西的盒子，盒子里面的内容到盒子的边框之间的
    2009-04-02

  • CSS教程:通过实例学习和理解CSS盒模型

    网页制作Webjx文章简介：盒模型主要定义四个区域：内容（content）、内边框距（padding）、边框（border）和外边距（margin）。 自从1996年CSS1的推出，W3
    2009-04-02

  • CSS教程之CSS盒模型

    CSS 盒模型 网页设计中的每个元素都是长方形的盒子。盒子的尺寸是怎样精确计算的，请看下图： 如果是 Firebug 用户的话(基本和前端有关的都会用到 Firebug 吧 –
    2009-06-06

  • 网页设计学习教程 CSS盒模型

    Margin 比较特别，它不会影响盒子本身的大小，但是它会影响和盒子有关的其他内容，因此 margin 是盒模型的一个重要的组成部分。
    2009-07-19

  • css盒模型和块级、行内元素深入理解

    盒模型是CSS的核心知识点之一，它指定元素如何显示以及如何相互交互。页面上的每个元素都被看成一个矩形框，这个框由元素的内容、内边距、边框和外边距组成,需要了解的朋友
    2012-12-24

  • css3弹性盒模型实例介绍

    Css3引入了新的盒模型——弹性盒模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间，使用该模型，可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大
    2013-05-27

  • css3弹性盒模型（Flexbox）详细介绍

    今天刚学了css3的弹性盒模型，这是一个可以让你告别浮动、完美实现垂直水平居中的新特性。本文主要是总结一下今天所学，有需要的朋友可以参考下
    2014-10-08

最新评论

关注微信公众号

扫一扫