CSS3延展性盒实体模型开发设计笔记(1)

日期:2021-01-20 类型:科技新闻 

关键词:微信小程序页面设计,python小程序,小程序首页模板,如何建立微信小程序,怎么做微信小程序

延展性盒实体模型(Flexible Box Moudle),该实体模型用于决策元素在盒子中的遍布方法和解决盒子的能用室内空间。这与XUL(Firefox访问器的客户互动語言)类似,别的語言也应用同样的盒实体模型。如XAML,GladeXML等。根据延展性盒实体模型,能够轻轻松松地建立自融入访问器对话框的流动性合理布局或自融入字体样式尺寸的延展性合理布局。

适配性:延展性盒实体模型标准是W3C规范化机构于2009年公布的,现阶段都还没流行访问器对其开展适用,但是选用Webkit和Mozilla3D渲染模块的访问器都自定了1套独享特性,用来适用延展性盒实体模型。

选用Webkit3D渲染模块的访问器关键包含Safari和Chrome访问器,该模块适用以-webkit为前缀的独享特性。

Mozilla3D渲染模块的访问器关键包含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:盒子元素从左到右在1条水平网上显示信息它的子元素。

vertail:盒子元素从上到下在1条竖直网上显示信息它的子元素。

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,则其包括的子元素依照从左到右的次序显示信息,即每一个子元素的左侧一直挨近前1个子元素的右侧;假如盒子元素的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个当然数,从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 {/*设定第1个元素显示信息在第2个部位*/  
  24.     -moz-box-ordinal-group : 2;/*适配Mozilla Gecko模块*/  
  25.     -webkit-box-ordinal-group : 2;/*适配Webkit模块*/  
  26.     box-ordinal-group : 2;/*规范用法*/  
  27. }   
  28. #box2 {/*设定第2个元素显示信息在第3个部位*/  
  29.     -moz-box-ordinal-group : 3;/*适配Mozilla Gecko模块*/  
  30.     -webkit-box-ordinal-group : 3;/*适配Webkit模块*/  
  31.     box-ordinal-group : 3;/*规范用法*/  
  32. }   
  33. #box3 {/*设定第3个元素显示信息在第1个部位*/  
  34.     -moz-box-ordinal-group : 1;/*适配Mozilla Gecko模块*/  
  35.     -webkit-box-ordinal-group : 1;/*适配Webkit模块*/  
  36.     box-ordinal-group : 1;/*规范用法*/  
  37. }   
  38. #box4 {/*设定第4个元素显示信息在第4个部位*/  
  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