首页 / CSS / CSS3中的弹性流体盒模型技术详解(一)

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了CSS3中的弹性流体盒模型技术详解(一)，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5805字，纯文字阅读大概需要9分钟。

内容图文

从这篇文章开始，会利用几个篇幅，我将跟大家分享从CSS1到CSS3都是如何实现页面布局的(当然，所指的范畴是利用CSS技术)。

由于盒子模型技术内容比较多，这篇文章我将着重讲解知识点。

下一篇文章，我会带领大家开发一个兼容 pc端浏览器和移动端浏览器的弹性布局web界面的实例。希望大家能从中领受到CSS3在布局方面的强大功能。

好了，长话短说，现在开始我们的《CSS3中的弹性流体盒模型技术详解》之旅吧！

在讲解CSS3中新增的弹性布局属性之前，我们先回顾一下CSS1 和 CSS2中都已经定义了哪些布局方面的属性，这样也会增加我们理解弹性布局。

其实我们现在有很多一部分人，你们刚刚接触CSS层叠样式表，或者接触有一段时间了，但是却没有很好的去消化与理解。可能平时你们还一直在使用table，然后通过不断了合并单元格来实现网页布局。希望我今天的这篇文章能彻底改变大家的观念。

Q：如何理解盒子模型？

A：大家可以想一想，在现实生活中，如果我们拿一个盒子来装东西，那么盒子里面的东西是不是跟这个盒子之间会有空隙呢？站在里面物品的角度，则它们之间的间隙距离是不是就可以构成物品到盒子的外边距。如果站在盒子的角度，则从盒子到物品的距离，是不是可以看出盒子的内边距呢。当然，盒子还是会有宽和高的。外边距的英文就是margin，内边距的英文是padding，宽是width，高是height。下面是盒子模型的2D图：

CSS 1中定义了盒子模型的基本元素，详细属性请看下表：

margin-top	元素顶部外边距
margin-right	元素右侧外边距
margin-bottom	元素底部外边距
margin-left	元素左侧外边距
margin	这是一个复合属性，定义元素各个边的外边距，属性值的顺序是: 上，右，下，左
border-top	元素上边框样式
border-right	元素右边框样式
border-bottom	元素下边框样式
border-left	元素左边框样式
border-width	元素边框宽度
border-top-width	元素上边框宽度
border-right-width	元素右边框宽度
border-bottom-width	元素下边框宽度
border-left-width	元素左边框宽度
border	复合属性，可以同时设置各个边框样式
padding-top	元素上侧内边距
padding-right	元素右侧内边距
padding-bottom	元素下侧内边距
padding-left	元素左侧内边距
padding	复合属性，同时设置各个边框内边距
width	设置元素的宽度
height	设置元素的高度
float	设置元素浮动显示
clear	清除元素的浮动效果
border-color	设置边框颜色
border-style	设置边框样式

CSS 2在以上基础上，又做了一些细化：

border-top-color	元素上边框颜色
border-right-color	元素右边框颜色
border-bottom-color	元素下边框颜色
border-left-color	元素左边框颜色
border-top-style	元素上边框样式
border-right-style	元素右边框样式
border-bottom-style	元素下边框样式
border-left-style	元素左边框样式

在CSS2的基础上，CSS3增加了弹性盒模型布局属性，这为我们开发适合现代移动浏览器提供了便利：

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

下面我将对CSS3中新增的弹性盒模型属性做详细介绍，并通过实际coding来带领大家深刻认识弹性布局的威力。

首先我们先创建一个html页面，代码如下所示：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

我是边栏

</div>

我是中间内容

</div>

我是页面主体

</div>

</body>

</html>

接着我们给页面添加上基本的样式，如下所示：

*{ /*清除所有元素的默认外边距和内边距*/

margin:0;

padding:0;

}

.row{/*设置外围容器样式*/

margin:auto;

border:1px solid black;

width:600px;

height:400px;

margin-top:50px;

}

.sidebar{/*给侧边栏添加样式*/

background-color:#00B366;

}

.middle{/*给中间区域添加样式*/

background-color:#80C8FE;

}

.article{/*给主体内容添加样式*/

background-color:#FEB380;

}

运行页面，查看一下目前样式的应用效果:

首先声明：要想运用CSS3的弹性布局，需要将父容器设置为display:box 或 display:inline-box，下面不在赘述。

box-orient 作用： box-orient属性规定了子元素应该是水平方向还是垂直方向显示。

box-orient 语法： box-orient: horizontal | vertical | inline-axis | block-axis | inherit;

语法解释: horizontal 和 inline-axis 规定了子元素以水平方向显示，两者的显示效果差不多，具体差异不清。vertical 和 block-axis 规定了子元素以垂直方向显示，两者的显示效果差不多，具体差异不清。

注意：由于此属性还处于测试当中，所以为了兼容webkit核心的浏览器，需要加上-webkit-前缀，Mozilla核心的浏览器，需要加上前缀-moz-。

示例：

修改样式表文件，添加如下样式代码：

.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;

}

运行demo页面，效果如下：

通过以上效果图，大家可以发现div已经变成了水平布局，且宽度是正好包裹内容， css2.1如果需要实现此效果，就得通过float:left;来实现了。

我们再次修改代码，实现垂直方向上布局：

.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: vertical ;/*垂直方向显示，兼容webkit和mozilla核心浏览器*/

-moz-box-orient: vertical ;

box-orient: vertical ;

}

运行页面，效果如下图所示:

inline-axis 和 block-axis 运行效果分别与horizontal和vertical一样，这里大家可以自行去测试。

inherit属性值是布局方式继承自父元素，如果父元素是水平的，则它也使用水平布局，这个大家可以自行去测试。

box-align 作用：box-align规定了如何在垂直方向上对齐框内的子元素。

box-align 语法：box-align: start | end | center | baseline | stretch;

start	对于正常方向的框，每个子元素的上边缘沿着框的顶部放置。对于反方向的框，每个子元素的下边缘沿着框的底部放置。
end	对于正常方向的框，每个子元素的下边缘沿着框的底部放置。对于反方向的框，每个子元素的上边缘沿着矿的顶部放置。
center	均等地分割多余的空间，一半位于子元素之上，一半位于子元素之下。
baseline	如果box-orient是inline-axis或horizontal，所有子元素均与其基线对齐。
stretch	拉伸子元素以填充包含块

注意：由于此属性还处于测试当中，所以为了兼容webkit核心的浏览器，需要加上-webkit-前缀，Mozilla核心的浏览器，需要加上前缀-moz-。

示例:

添加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:start; /*正常布局下，吸附在顶端显示，相反布局下，吸附在底部显示*/

-moz-box-align:start;

box-align: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: end ;/*正常布局下，吸附在底部显示，相反布局下，吸附在顶部显示*/

-moz-box-align: end ;

box-align: end ;

}

此时的运行效果如下所示：

center和baseline的功能，大家可以自行测试，这里着重强调一下，如果属性值设为stretch，则它会拉伸填充满父元素，其实也就是未设置box-align时候的样式，所以说如果你要设置stretch，那你直接就别设置box-align属性，因为没意义了。

修改属性值为stretch，代码如下：

.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: stretch ;/*其实此效果就是不设置box-align时候的样式*/

-moz-box-align: stretch ;

box-align: stretch ;

}

效果如下：

好了，由于篇幅有限，这篇就先讲到这里。

欢迎大家加入互联网技术交流群：62329335

个人申明：所分享博文，绝对原创，并力争每一个知识点都通过实战演示来进行验证。

原文：http://itdriver.blog.51cto.com/9109476/1536190

内容总结

以上是互联网集市为您收集整理的CSS3中的弹性流体盒模型技术详解(一)全部内容，希望文章能够帮你解决CSS3中的弹性流体盒模型技术详解(一)所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1280371.html

来源：【匿名】

【上一篇】CSS中伪类及伪元素用法详解【下一篇】php无法调用css怎么办

更多 ►

【CSS3中的弹性流体盒模型技术详解(一)】教程文章相关的互联网学习教程文章

CSS中伪类及伪元素用法详解【图】

原文:CSS中伪类及伪元素用法详解伪类的分类及作用：注：该表引自W3School教程伪元素的分类及作用：接下来让博主通过一些生动的实例（之前的作业或小作品）来说明几种常用伪类的用法和效果，其他的读者可以自己尝试： :active 大致效果为用鼠标点击时，元素增加特效，鼠标松开时，特效消失。多用在按钮的点击上。写法：这里id为box的是一div块，在css中首先设置了他的基本样式，下面为加入:active伪类后需要修改的样式。未点击时：...

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

从这篇文章开始，会利用几个篇幅，我将跟大家分享从CSS1到CSS3都是如何实现页面布局的(当然，所指的范畴是利用CSS技术)。由于盒子模型技术内容比较多，这篇文章我将着重讲解知识点。下一篇文章，我会带领大家开发一个兼容 pc端浏览器和移动端浏览器的弹性布局web界面的实例。希望大家能从中领受到CSS3在布局方面的强大功能。好了，长话短说，现在开始我们的《CSS3中的弹性流体盒模型技术详解》之旅吧！在讲解CSS3中新增的弹性布局...

css块元素和行内元素以及属性详解

div(css layout的主要标签)、dl(定义列表) 、h1~h6(标题)、p(段落)、table(表格) , ul(非排序列表)特点: 会自动占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形的样子内联元素(inline element) a(超链接)、span(常用内联容器，定义文本内区块)、i(斜体)、img、em(强调)、label特点: 和其他元素都在一行上、元素的高度、宽度、行高及顶部和底部边距不可设置、元素的宽度就是它包含的文字或图片的宽度...

[转]CSS3盒模型display:box详解【代码】

时间：2014-02-25来源：网络作者：未知编辑：RGBdisplay:box;box-flex是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(-moz-)、opera(-o-)、chrome/safari（-webkit-)。一、box-flex属性box-flex主要让子容器针对父容器的...

CSS基础（七）：z-index详解【代码】【图】

概念z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。层级关系的比较1. 对于同级元素，默认(或position:static)情况下文档流后面的元素会覆盖前面的。2. 对于同级元素，position不为static且z-index存在的情况下z-index大的元素会覆盖z-index小的元素，即z-index越大优先级越高。3. IE6/7下position不为static，且z-index不存在时z-index为0，除此之外的浏览器z-index为auto。4. z-i...

CSS Sprites详解

CSS Sprites技术不新鲜，早在2005年 CSS Zengarden 的园主 Dave Shea 就在 ALA 发表对该技术的详细阐述。原先只在CSS玩家之间作为一种制作方法流传，后来出来个 14 Rules for Faster-Loading Web Sites , 技术人员之间竞相传阅，其中第一条规则Make Fewer HTTP Requests就提到CSS Sprites。于是这个小妖精就火了起来，甚至出现了在线生成工具，势不可挡也。近来国内很多blog都提到CSS Sprites，最著名的例子莫过于 http://www.go...

css权重问题例子详解【代码】

首先，id选择器权重级别最高，class选择器其次，html选择器最后。例子：<div ><div ><div ><span>嘿嘿嘿</span></div></div> </div> 选中span标签当选中span标签，也可能权重相同，也可能不同，得分下面2种情况。1.权重相同，谁在后面谁决定。（下面例子嘿嘿嘿的字体颜色为黄色）<style>div.t2 span { color:red;}div.t1 span {color:yellow;} </style> 2.权重不同，权重大的决定。（下面例子嘿嘿嘿的字体颜色为黄色）<style>/...

IE浏览器专有css属性之zoom详解

zoom:1;一般是拿来解决IE6的子元素浮动时候父元素不随着自动扩大的问题，功能相当于overflow:auto，同样也可以用height:1%来代替zoom:1。所以一般要在浮动元素的父元素加上overflow:auto；zoom:1; 。这样，子元素浮动，父元素再也不会不自动跟子元素扩大了。Zoom的使用方法：复制代码代码如下:zoom :? normal | numbernormal :　默认值。使用对象的实际尺寸number :　百分数 | 无符号浮点实数。浮点实数值为1.0或百分数为100%时相...

CSS3 Filter详解（改变模糊度亮度透明度等方法）【代码】【图】

CSS3 Filter（滤镜）属性提供了提供模糊和改变元素颜色的功能。CSS3 Fitler 常用于调整图像的渲染、背景或边框显示效果。-webkit-filter是css3的一个属性，Webkit率先支持了这几个功能，感觉效果很不错。下面咱们就学习一下filter这个属性吧。现在规范中支持的效果有：grayscale 灰度值为0-1之间的小数 sepia 褐色　　　　　　值为0-1之间的小数saturate 饱和度　　　　值为numhue-rotate 色相旋转　　值为angl...

css中伪类/伪元素详解

一、伪类和伪元素伪类和伪元素都是用来修饰不在文档树中的部分，区别在于，伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的(如:hover/:active)。而伪元素则用于创建一些不在文档树中的元素，并为其添加样式(如:before/:after)。二、常用伪类伪类用法兼容:link未访问的链接主流浏览器都支持:visited已访问的链接主流浏览器都支持:hover鼠标划过链接主流浏览器都支持:active 已选中...

详解DIV+CSS布局的好处和意义

业界越来越关注DIV+CSS的标准化设计，大到各大门户网站，小到不计其数的个人网站，在Div+CSS标准化的影响下，网页设计人员已经把这一要求作为行业标准。那么什么是Div+CSS标准？Div+CSS的标准化设计到底有什么好处？ Div 全称 division 意为“区分”使用 DIV 的方法跟使用其他 tag 的方法一样。如果单独使用 DIV 而不加任何 CSS, 那么它在网页中的效果和使用 <P></P> 是一样的。 DIV本身就是容器性质的,你不但可以内嵌table还可以...

Qt绘图之QGraphicsScene QGraphicsView QGraphicsItem详解【图】

Graphics View提供了一个界面，它既可以管理大数量的定制2D graphical items，又可与它们交互，有一个view widget可以把这些项绘制出来，并支持旋转与缩放。这个柜架也包含一个事件传播结构，对于在scene中的这些items,它具有双精度的交互能力。Items能处理键盘事件，鼠标的按，移动、释放、双击事件，也可以跟踪鼠标移动。Graphics View使用BSP树来提供对item的快速查找，使用这种技术，它可以实时地绘制大规模场景，甚至以百万it...

CSS系列 (03)：盒模型详解【代码】

盒模型CSS盒模型分成W3C标准盒模型和IE模型W3C标准盒模型(默认)：box-sizing: content-boxpadding和border都会撑开盒子，改变盒子的宽度高度总宽度：width + 左右border宽度 + 左右padding宽度 + 左右margin宽度内盒宽度：width + 左右border宽度 + 左右padding宽度IE盒模型：box-sizing: border-boxpadding和border都不会撑开盒子，不会改变盒子的宽度，盒子的内容会相应缩小总宽度：width + 左右margin宽度内盒宽度： width盒子模...

CSS3动画效果回调处理详解

我们在做js动画的时候，很多时候都需要做回调处理，如在一个动画完成后触发一个事件、一个动画完成后执行另外一个动画等等，但在使用CSS3动画时能不能捕获到运动的状态做回调处理呢？CSS3动画也是可以做回调处理的，这里分为两个属性，一个是transition[w3c文档]，另外一个是animation[w3c文档]。1、transition对于transition，可以监听transitionend事件，当动画完成时触发，可以这样使用：复制代码代码如下:<!DOCTYPE html>...

css中“box-sizing”详解【代码】【图】

今天翻到w3c上关于box-sizing这个属性值，发现上面的概念异常难懂，最后查找资料对其进行总结，总结如下定义：box-sizing:允许您以特定的方式定义匹配某个区域的特定元素(W3C上的原话 )语法：box-sizing:content-box|border-boxcontent-box:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。border-box:为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的...

CSS - 技术教程分类

CSS 教程 CSS 简介 CSS 语法 CSS Id 和 Class选择器 CSS 创建 CSS Backgrounds(背景) CSS Text(文本) CSS Fonts(字体) CSS 链接(link) CSS 列表 CSS Table(表格) CSS 盒子模型 CSS Border(边框) CSS 轮廓（outline）属性 CSS margin(外边距) CSS padding（填充） CSS 尺寸 (Dimension) CSS Position(定位) CSS Overflow CSS Float（浮动） CSS 对齐 CSS 伪类 CSS 伪元素 CSS 导航栏 CSS 下拉菜单 CSS 提示工具 CSS 图像透明/不透明 CSS 图像拼合技术 CSS 媒体类型 CSS 属性选择器 CSS 表单 CSS 计数器 CSS 网页布局 CSS 总结 CSS 实例 Viewport 媒体查询图片视频(Video) 框架 CSS 参考手册 CSS 选择器 CSS Web安全字体 CSS 动画 CSS 单位 CSS 颜色 CSS 颜色值 css 全部

CSS - 最热教程

设置DIV的背景色有哪几种方法 js批量设置元素样式和封装似于jquery的...HTML5实战与剖析之CSS选择器——getEle...css如何设置文本元素内的空白填充？如何压缩css文件 cssright属性怎么用 cssanimation-timing-function属性怎么...jquery设置内联样式css()jQuery+HTML5+CSS3制作支持响应式布局时...jquery实现动态改变css样式的方法分析

首页 / CSS / CSS3中的弹性流体盒模型技术详解(一)

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

内容导读

内容图文

内容总结

内容备注

内容手机端

【CSS3中的弹性流体盒模型技术详解(一)】教程文章相关的互联网学习教程文章

CSS - 技术教程分类

CSS - 最新教程

CSS - 最热教程