`
陌上花会开
  • 浏览: 39587 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

CSS3中的弹性流体盒模型技术详解(二)

csscss3弹性布局自适应布局盒子模型 
阅读更多
在上一篇文章《CSS3中的弹性流体盒模型技术详解(一)》里，我给大家列出了，从css1到css3各版本中盒子模型的基本元素。本篇我会把余下的属性进行详细讲解。

box-pack 作用：用来规定子元素在盒子内的水平空间分配方式
box-pack 语法：box-pack: start | end | center | justify;
 
start
对于正常方向的框，首个子元素的左边缘吸附在盒子的左边框显示
对于相反方向的框，最后子元素的右边缘吸附在盒子的右边框显示
end
对于正常方向的框，最后子元素的右边缘吸附在盒子的右边框显示
对于相反方向的框，首个子元素的左边缘吸附在盒子的左边框显示
center 均等分割剩余空间，一半在首个子元素之前，一半在最后子元素之后
justify 首尾子元素分别吸附在左右边框上，中间的子元素分割多余空间
 
注意：由于此属性还处于测试当中，所以为了兼容webkit核心的浏览器，需要加上-webkit-前缀，Mozilla核心的浏览器，需要加上前缀-moz-。
 
示例:
 
    box-pack:start;
 
.row{/*设置外围容器样式*/
margin:auto;
border:1px solid black;
width:600px;
height:400px;
margin-top:50px;
 
display:-webkit-box;/*兼容webkit或mozilla核心浏览器，启用弹性盒子模型*/
display:-moz-box;
display:box;
 
-webkit-box-orient:horizontal;/*水平方向显示，兼容webkit和mozilla核心浏览器*/
-moz-box-orient:horizontal;
box-orient:horizontal;
 
-webkit-box-align:center; /*在垂直方向上，居中显示*/
-moz-box-align:center;
box-align:center;
 
-webkit-box-pack:start; /*在水平方向上，正常情况下，从左侧显示。*/
-moz-box-pack:start;
box-pack:start;
}
    运行效果如下：
clipboard08
 
当然，如果盒子的顺序是从右到做，则上图就会吸附在右侧边框显示。
 
    box-pack:end;
.row{/*设置外围容器样式*/
margin:auto;
border:1px solid black;
width:600px;
height:400px;
margin-top:50px;
 
display:-webkit-box;/*兼容webkit或mozilla核心浏览器，启用弹性盒子模型*/
display:-moz-box;
display:box;
 
-webkit-box-orient:horizontal;/*水平方向显示，兼容webkit和mozilla核心浏览器*/
-moz-box-orient:horizontal;
box-orient:horizontal;
 
-webkit-box-align:center; /*在垂直方向上，居中显示*/
-moz-box-align:center;
box-align:center;
 
-webkit-box-pack: end; /*在水平方向上，正常情况下，吸附在右侧显示。*/
-moz-box-pack: end;
box-pack: end;
}
运行效果如下：
clipboard09
 
注：如果盒子内的显示顺序是相反方向，则它会吸附在左侧边框显示。
 
box-pack:center
.row{/*设置外围容器样式*/
margin:auto;
border:1px solid black;
width:600px;
height:400px;
margin-top:50px;
 
display:-webkit-box;/*兼容webkit或mozilla核心浏览器，启用弹性盒子模型*/
display:-moz-box;
display:box;
 
-webkit-box-orient:horizontal;/*水平方向显示，兼容webkit和mozilla核心浏览器*/
-moz-box-orient:horizontal;
box-orient:horizontal;
 
-webkit-box-align:center; /*在垂直方向上，居中显示*/
-moz-box-align:center;
box-align:center;
 
-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
}
    运行效果如下：
clipboard10
 
box-pack:justify
.row{/*设置外围容器样式*/
margin:auto;
border:1px solid black;
width:600px;
height:400px;
margin-top:50px;
 
display:-webkit-box;/*兼容webkit或mozilla核心浏览器，启用弹性盒子模型*/
display:-moz-box;
display:box;
 
-webkit-box-orient:horizontal;/*水平方向显示，兼容webkit和mozilla核心浏览器*/
-moz-box-orient:horizontal;
box-orient:horizontal;
 
-webkit-box-align:center; /*在垂直方向上，居中显示*/
-moz-box-align:center;
box-align:center;
 
-webkit-box-pack: justify; /*在水平方向上，正常情况下，从左侧显示。*/
-moz-box-pack: justify;
box-pack: justify;
}
运行效果如下:
 
clipboard11
 
 
box-direction 作用：box-direction规定了盒子内子元素以什么方向来排列。
box-direction 语法：box-direction: normal | reverse | inherit;
 
normal 以默认方式显示子元素
reverse 以相反方向显示子元素
inherit 从父容器继承box-direction
 
注意：由于此属性还处于测试当中，所以为了兼容webkit核心的浏览器，需要加上-webkit-前缀，Mozilla核心的浏览器，需要加上前缀-moz-。
 
示例：
 
    现在我就基于上面的例子，在样式表文件的 .row 里加上box-direction属性，大家一起观察分别观察它们的区别
 
 
 以水平方向显示子元素 box-orient:horizontal;
normal
.row{/*设置外围容器样式*/
… /*此处代码省略*/
 
-webkit-box-orient:horizontal;/*水平方向显示，兼容webkit和mozilla核心浏览器*/
-moz-box-orient:horizontal;
box-orient:horizontal;
 
-webkit-box-pack:justify; /*在水平方向上，正常情况下，从左侧显示。*/
-moz-box-pack:justify;
box-pack:justify;
 
-webkit-box-direction:normal; /*以正常方向显示*/
-moz-box-direction:normal;
box-direction:normal;
}
 大家可以发现显示顺序还是以前默认的显示顺序，
水平方向，就是从左到右
reverse
.row{/*设置外围容器样式*/
… /*此处代码省略*/
 
-webkit-box-orient:horizontal;/*水平方向显示，兼容webkit和mozilla核心浏览器*/
-moz-box-orient:horizontal;
box-orient:horizontal;
 
-webkit-box-pack:justify; /*在水平方向上，正常情况下，从左侧显示。*/
-moz-box-pack:justify;
box-pack:justify;
 
-webkit-box-direction:reverse; /*以相反方向显示*/
-moz-box-direction: reverse;
box-direction: reverse;
}
 应用上box-direction:reverse之后，显示方向颠倒了，
以前是从左到右，现在变成从右到左了。
 
以垂直方向显示子元素 box-orient: vertical;
normal
.row{/*设置外围容器样式*/
… /*此处代码省略*/
 
-webkit-box-orient:vertical;/*垂直方向显示，兼容webkit和mozilla核心浏览器*/
-moz-box-orient:vertical;
box-orient:vertical;
 
-webkit-box-direction: normal;
-moz-box-direction: normal;
box-direction: normal;
}
大家可以发现，当以垂直方向显示子元素时，
normal属性采用默认的从上到下显示顺序。
reverse
.row{/*设置外围容器样式*/
… /*此处代码省略*/
 
-webkit-box-orient:vertical;/*垂直方向显示，兼容webkit和mozilla核心浏览器*/
-moz-box-orient:vertical;
box-orient:vertical;
 
-webkit-box-direction:reverse;
-moz-box-direction:reverse;
box-direction:reverse;
}
 应用上box-direction:reverse之后，显示方向颠倒了，
以前是从上到下，现在变成从下到上了。
 
从上面的比较，大家可以看出，box-direction是根据当前子元素的显示方向（水平或垂直）来起作用的。
 
box-direction:inherit 这个大家可以私下自行测试。
 
box-flex 作用：box-flex属性规定了盒子内的子元素是否可以自动伸缩其尺寸，只要盒子内对应显示方向上有剩余空间，可伸缩元素就会扩展来填充这些空间。
box-flex 语法：box-flex: value。
 
value 元素的可伸缩值，柔性是相对，例如 box-flex:2.0 的子元素伸缩尺寸两倍于 box-flex:1.0的子元素
注意：由于此属性还处于测试当中，所以为了兼容webkit核心的浏览器，需要加上-webkit-前缀，Mozilla核心的浏览器，需要加上前缀-moz-。
 
示例：
 
    现在我们就来对box-flex的作用通过示例来证明一下：
 
对 sidebar 应用样式
.sidebar{/*给侧边栏添加样式*/
background-color:#00B366;
 
/*将应用了此样式的元素都设置为可伸缩元素*/
-webkit-box-flex:1.0; 
-moz-box-flex:1.0;
box-flex:1.0;
}
 
.middle{/*给中间区域添加样式*/
background-color:#80C8FE;
}
 
.article{/*给主体内容添加样式*/
background-color:#FEB380;
}
从显示效果来看， 这正好证明了， 设置了box-flex的元素是有弹性的，
且只要盒子内对应显示方向上有剩余空间， 可伸缩元素就会扩展来填充这些空间。
对sidebar和middle应用样式
.sidebar{/*给侧边栏添加样式*/
background-color:#00B366;
 
 /*将应用了此样式的元素都设置为可伸缩元素*/
-webkit-box-flex:1.0;
-moz-box-flex:1.0;
box-flex:1.0;
}
 
.middle{/*给中间区域添加样式*/
background-color:#80C8FE;
 
/*将应用了此样式的元素都设置为可伸缩元素*/
-webkit-box-flex:2.0; 
-moz-box-flex:2.0;
box-flex:2.0;
}
 
.article{/*给主体内容添加样式*/
background-color:#FEB380;
}
从显示效果可以看出，当 .middle 样式设置了box-flex:2.0时，
应用了 .middle 样式的元素也变成了弹性元素，且伸缩尺寸是
box-flex:1.0的两倍。
对sidebar,middle和article应用样式
.sidebar{/*给侧边栏添加样式*/
background-color:#00B366;
 
-webkit-box-flex: 1.0; 
-moz-box-flex:1.0;
box-flex:1.0;
}
 
.middle{/*给中间区域添加样式*/
background-color:#80C8FE;
 
-webkit-box-flex:2.0; 
-moz-box-flex:2.0;
box-flex:2.0;
}
 
.article{/*给主体内容添加样式*/
background-color:#FEB380;
 
-webkit-box-flex:3.0; 
-moz-box-flex:3.0;
box-flex:3.0;
}
 这里大家得注意一下，大家可能会认为，.article应该占1/2的空间的，
怎么看.sidebar和.middle加起来都比.article大的啊
 
其实这里分配的原则是， 剩余空间按照对应比率来分配。
 
对sidebar来说，伸缩的空间 = 总剩余空间 *(1.0/6.0)；
对middle来说，伸缩的空间 = 总剩余空间*(2.0/6.0) ;
对article来说，伸缩的空间 = 总剩余空间 * (3.0/6.0);
 

box-flex-group 作用： 一组设置了box-flex-group元素当中，值最小的，占用全部剩余空间；值最小且相等，则平均分配剩余空间。

 
.sidebar{/*给侧边栏添加样式*/
background-color:#00B366;
 
-webkit-box-flex:1.0; 
-moz-box-flex:1.0;
box-flex:1.0;
 
-webkit-box-flex-group:1; 
-moz-box-flex-group:1;
box-flex-group:1;
}
 
.middle{/*给中间区域添加样式*/
background-color:#80C8FE;
 
-webkit-box-flex:2.0; 
-moz-box-flex:2.0;
box-flex:2.0;
 
-webkit-box-flex-group:2; 
-moz-box-flex-group:2;
box-flex-group:2;
}
 
.article{/*给主体内容添加样式*/
background-color:#FEB380;
 
-webkit-box-flex:2.0; 
-moz-box-flex:2.0;
box-flex:2.0;
 
-webkit-box-flex-group:1; 
-moz-box-flex-group:1;
box-flex-group:1;
}
大家从效果图应该可以看出， 如果box-flex-group的值较大，则它只分配实际空间，
剩余空间分配给最小的一组 按比率分配。
 
这句话到底啥意思呢？
我们从代码中可以看到：sidebar的box-flex-group为1，article的box-flex-group也为1，
所以 sidebar和article分配剩余的空间。 但是article的box-flex两倍于sidebar的box-flex，
所以剩余空间，article伸缩的空间 应该是 sidebar伸缩空间的两倍。
 
box-ordinal-group 作用：box-ordinal-group属性可以使我们定义子元素的显示顺序，值小的排在前，值大的排在后。
 
注意：由于此属性还处于测试当中，所以为了兼容webkit核心的浏览器，需要加上-webkit-前缀，Mozilla核心的浏览器，需要加上前缀-moz-。
 
示例：
 
我们先看一下，没有运用box-ordinal-group属性时的运行效果，样式代码如下：
.sidebar{/*给侧边栏添加样式*/
background-color:#00B366;
 
-webkit-box-flex:2.0; 
-moz-box-flex:2.0;
box-flex:2.0;
}
 
.middle{/*给中间区域添加样式*/
background-color:#80C8FE;
 
-webkit-box-flex:2.0; 
-moz-box-flex:2.0;
box-flex:2.0;
}
 
.article{/*给主体内容添加样式*/
background-color:#FEB380;
 
-webkit-box-flex:2.0; 
-moz-box-flex:2.0;
box-flex:2.0;
}
此时运行页面，效果如下：
clipboard13
 
 
根据上面页面，当前的显示顺序是 sidebar -> middle -> article
 
现在我们给这些子元素应用box-ordinal-group，且相应值 middle < article < sidebar，则我们期待的显示顺序应该是， middle -> article -> sidebar
 
样式代码如下：
.sidebar{/*给侧边栏添加样式*/
background-color:#00B366;
 
-webkit-box-flex:2.0; 
-moz-box-flex:2.0;
box-flex:2.0;
 
-webkit-box-ordinal-group:4;
-moz-box-ordinal-group:4;
box-ordinal-group:4;
}
 
.middle{/*给中间区域添加样式*/
background-color:#80C8FE;
 
-webkit-box-flex:2.0; 
-moz-box-flex:2.0;
box-flex:2.0;
 
-webkit-box-ordinal-group:2;
-moz-box-ordinal-group:2;
box-ordinal-group:2;
}
 
.article{/*给主体内容添加样式*/
background-color:#FEB380;
 
-webkit-box-flex:2.0; 
-moz-box-flex:2.0;
box-flex:2.0;
 
-webkit-box-ordinal-group:3;
-moz-box-ordinal-group:3;
box-ordinal-group:3;
}
运行页面，效果如下：
clipboard12
 
 
从效果图来看，的确是按照我们所期待的顺序显示的（ middle -> article -> sidebar）。
 
至此，CSS3新增弹性盒模型属性就讲完了，本节内容还是比较多的，但是它给了我们很多惊喜，让我们在页面布局方面更加收放自如。
 
下一节，我讲综合运用CSS3 弹性盒模型 属性 来手把手教大家 《CSS3实战开发: 弹性WEB界面设计（兼容移动端浏览器）》。
 
欢迎大家加入互联网技术交流群：62329335 
个人申明：所分享博文，绝对原创，并力争每一个知识点都通过实战演示来进行验证。
1
顶
2
踩
分享到：
| CSS3中的弹性流体盒模型技术详解(一)
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    CSS布局 案例详解

    Flexbox（弹性盒布局）是CSS3引入的一种新的布局模式，适用于单行或单列的复杂布局。它允许元素在容器中灵活地调整大小和位置。通过设置`display: flex;`，容器变为flex容器，可以调整`flex-direction`、`justify-...

    CSS详解教程（基础）

    CSS提供了多种布局方式，包括盒模型、定位（static、relative、absolute、fixed）、流体布局（百分比单位）、Flexbox（弹性盒模型）和Grid（网格布局）。这些布局方式让开发者能够灵活控制元素的排列和对齐。 **4. ...

    CSS中文样式表

    CSS3中的媒体查询（media queries）是实现响应式设计的核心工具，允许开发者根据设备特征（如屏幕尺寸、分辨率、方向等）来应用不同的样式。 **总结** CSS中文样式表是学习和查找CSS相关知识的重要资源，涵盖了从...

    CSS详解及查询（有了它，css不成问题，可用于css查询，及学习）

    2. **Flexbox布局**: 弹性盒模型（Flexbox）用于处理容器内的元素对齐、排列和分配空间，适应不同屏幕尺寸。 3. **Grid布局**: CSS Grid提供二维布局系统，可以方便地创建网格布局，处理复杂的页面结构。 4. **...

    CSS完全使用详解

    CSS3引入了`box-sizing`属性，可设置为`content-box`（默认）或`border-box`，改变盒模型的行为。 ### 五、响应式设计 1. **媒体查询**: 使用`@media`规则根据设备特征（如屏幕宽度）应用不同的样式。 2. **流体...

    CSS完全使用详解.rar

    这涵盖了盒模型（Box Model）、流体布局、网格系统、Flexbox（弹性盒布局）和Grid Layout（网格布局）。随着网页设计需求的复杂化，这些布局技术使得创建响应式和适应不同屏幕尺寸的页面变得更加容易。 第11至第15...

    网站制作中CSS层叠样式表视频详解

    3. **布局技术**：讲解流体布局（使用百分比单位）、网格系统、Flexbox（弹性盒模型）和Grid布局，这些都是创建响应式网站的关键工具，可以适应不同屏幕尺寸。 4. **响应式设计**：探讨媒体查询@media，用于根据...

    网页制作之CSS用法布局详解

    本文将深入讲解CSS的基础知识、布局技术以及如何通过CSS解决网页设计中的常见问题。 首先，CSS是一种层叠样式表语言，用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档的呈现。CSS描述了如何在媒体（如...

    CSS中文教程 网页制作

    3. **Flexbox**：弹性盒模型提供了一种更简单、直观的方式来处理元素的布局，可以轻松实现主轴对齐、交叉轴对齐以及分配多余空间。 4. **Grid**：CSS Grid布局允许创建二维网格系统，适用于复杂和多列布局，如网页...

    CSSAPI中文版.rar

    1. **盒模型（Box Model）**: CSS中的每个元素都被视为一个矩形盒子，包括内容(content)、内边距(padding)、边框(border)和外边距(margin)。 2. **流体布局（Fluid Layout）**: 基于百分比的布局，使页面在不同屏幕...

    CSSReference一个最流行CSS属性的可视化指南

    3. **布局模式**：流体布局（block）、网格布局（grid）和弹性布局（flexbox）是现代CSS布局的主要方式，其中Flexbox特别适用于一维布局，而Grid则擅长二维布局。 4. **响应式设计**：通过媒体查询（@media query）...

    超实用的CSS代码段-源码.rar

    3. **布局技术**：包括流体布局、响应式布局（媒体查询@media）、Flexbox（弹性盒模型）和Grid（网格布局），这些都是现代Web设计中常用的技术。 4. **颜色与背景**：如何使用颜色、渐变、背景图片以及背景重复等...

    Core CSS

    - **Flexbox**：弹性盒布局模型，用于创建动态和响应式的布局，支持元素的对齐、顺序调整等。 - **Grid布局**：CSS网格布局系统，提供二维布局，让网页设计更为灵活和精确。 3. **颜色、字体与文本** - **颜色...

    css英文网站模板

    2. **布局技术**：CSS提供了多种布局模式，如流体布局（Fluid Layout）、网格布局（Grid Layout）、Flexbox（弹性盒布局）和CSS Grid。其中，Flexbox适用于一维布局（行或列），而CSS Grid则更适合二维布局，能够更...

    DIV+CSS基础知识

    3. **布局作用**：`div`常用于创建行、列、段落等布局结构，通过`display`属性调整其行为，如`block`（块级元素）、`inline`（行内元素）或`flex`（弹性盒模型）。 ### 二、CSS基础 1. **选择器**：CSS通过选择器...

    阿里巴巴内部CSS+DIV培训PPT

    - **盒模型**：CSS中的每个元素都可视为一个盒子，包含内容、内边距、边框和外边距，影响元素的大小和位置。 2. **CSS布局方式** - **流体布局**：利用百分比宽度使元素随浏览器窗口大小变化而自适应。 - **网格...

    css.rarcss.rarcss.rarcss.rarcss.rarcss.rarcss.rarcss.rarcss.rarcss.rarcss.rarcss.rarcss.rarcss.rar

    4. **布局技术**：CSS提供了多种布局方式，如传统流体布局、网格系统（CSS Grid）、Flexbox（弹性盒子布局）和最新的CSS Grid Layout。这些布局技术可以帮助开发者实现复杂的网页布局。 5. **响应式设计**：随着...

    CSS层叠样式表手册

    - **Flexbox**：弹性盒布局模型，适用于一维布局，如行或列，提供灵活的子元素对齐方式。 - **Grid**：网格布局系统，用于二维布局，能更精确地控制元素的排列和对齐。 4. **响应式设计** - **媒体查询**：`@...

    css经典布局

    弹性盒模型（Flexbox）是现代CSS布局的标准，适用于一维布局，如行或列。它可以自动调整元素大小和顺序，适应不同屏幕尺寸。 8. **Grid布局** CSS Grid提供二维布局能力，允许在行和列上精确控制元素位置，特别...

Magicbox
Global site tag (gtag.js) - Google Analytics