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

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

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

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

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

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

Q:如何理解盒子模型

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


clipboard

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>

<meta charset=”utf-8″>

<link rel=”stylesheet” href=”styles.css”>

<title>CSS3弹性布局</title>

</head>

<body>

<div class=”row“>

<div class=”sidebar“>

我是边栏

</div>

<div class=”middle“>

我是中间内容

</div>

<div class=”article“>

我是页面主体

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

}

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

clipboard02

首先声明:要想运用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页面,效果如下:

clipboard03

通过以上效果图,大家可以发现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;

}

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

clipboard04

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;

}

运行效果如下所示:

clipboard05

接着,我们让子元素吸附在底部显示,修改代码如下:

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

}

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

clipboard06

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;

}

效果如下:

clipboard07

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

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

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