CSS3实战开发: 弹性盒模型之响应式WEB界面设计博客分类： div+csscss3 csscss3响应式布局盒模型弹性布局

程序员文章站 2024-03-25 18:08:22

...

各位网友大家好，如果你已经阅读过我先前写的关于CSS3弹性盒模型的实例演示，相信你对CSS3弹性盒模型属性知识点应该已经有了一个非常深刻的映像。

从本篇文章开始，我将带领大家，手把手地教大家如何来开发一个适合移动端浏览器的弹性盒模型的响应式页面。同时实战开发中的案例代码可以作为你项目中的精简框架了。

当你学习完成《CSS3实战开发: 弹性盒模型之响应式WEB界面设计》这个系列教程之后，相信你对目前比较流行的前端轻量级框架 Bootstrap等会有一个深刻的认识。

Bootstrap(弹性流体布局式的前端轻量级框架)没听过？那你就out了，国内现在已经有不少互联网网站使用它来布局网页了。

Q：如果你认为我已经能用CSS2进行布局了，我才不稀罕你的响应式WEB界面设计的教程呢？

A：我们都知道，在CSS2.1当中，我们通过div+css进行叶面布局的时候，经常使用的浮动(float) 和绝对定位来做。虽然用浮动，相对定位和绝对定位等也能完成页面布局的设置，

但是它却不够灵活。同时也势必会给页面元素附加很多额外的样式，这个从开发维护角度，从可扩展角度都是不方便的。使用CSS3中新增的盒模型属性可以迎刃而解所有的问题，

代码之简洁，功能之灵巧，扩展之方便都是不言而喻的。下面我将带领大家，一步步的欣赏CSS3的精美。

下面我先来演示一下，我要带领大家开发的页面分别运行在大屏幕和小屏幕下的效果，如下所示：

运行在大屏幕下时

运行在小屏幕下时

CSS3实战开发: 弹性盒模型之响应式WEB界面设计

博客分类： div+csscss3 csscss3响应式布局盒模型弹性布局

通过上面运行的实例效果图，相信大家一定都非常惊喜。下面就让我们开始今天的实战开发之旅吧。

首先我先准备响应式WEB界面设计中要用到的html页面，代码如下(由于是文章不是视频，不太方便将div里如何嵌套每一块区域div一步步列出来，往大家谅解)：

<!DOCTYPE html>

<html>

<head>

<title>CSS3实战开发: 弹性盒模型之响应式WEB界面设计 — 驾驭IT网 www.itdriver.cn</title>

</head>

<body>

<div>

<dl>

<dd>

<ul>

<li><a href=”http://www.itdriver.cn#02″>精通CSS3</a></li>

<li><a href=”http://www.itdriver.cn#03″>CSS3媒体查询演示</a></li>

<li><a href=”http://www.itdriver.cn#04″>CSS3中的弹性流体盒模型技术详解</a></li>

<li><a href=”http://www.itdriver.cn#05″>CSS3新增属性text-overflow 实例开发详解</a></li>

<li><a href=”http://www.itdriver.cn#06″>如何利用CSS3给文本添加样式（实例：燃烧的字体）</a></li>

<li><a href=”http://www.itdriver.cn#07″>CSS3所支持的属性选择器实例演示</a></li>

<li><a href=”http://www.itdriver.cn#08″>:link , :visited , :focus , :hover , :active</a></li>

<li><a href=”http://www.itdriver.cn#09″>CSS选择器优先级实例演示</a></li>

<li><a href=”http://www.itdriver.cn#10″>CSS3 新特性一览</a></li>

<li><a href=”http://www.itdriver.cn#11″>使用CSS3制作照片墙实战教程(1)</a></li>

<li><a href=”http://www.itdriver.cn#12″>使用CSS3制作照片墙实战教程(2)</a></li>

<li><a href=”http://www.itdriver.cn#13″>使用CSS3制作照片墙实战教程(3)</a></li>

<li><a href=”http://www.itdriver.cn#14″>使用CSS3制作照片墙实战教程(4)</a></li>

<li><a href=”http://www.itdriver.cn#15″>使用CSS3制作照片墙实战教程(5)</a></li>

</ul>

</dd>

</dl>

</div>

<div>

<dl>

<dd>

<ul>

<li><a href=”http://www.itdriver.cn#39″>Android</a></li>

</ul>

</dd>

</dl>

<dl>

<dd>

<ul>

<li><a href=”http://www.itdriver.cn#41″>深入实战CSS3</a></li>

</ul>

</dd>

</dl>

</div>

<div>

<dl>

<dt>项目实战教程</dt>

<dd>

<ul>

<li><a href=”http://www.itdriver.cn#16″>HTML5+CSS3实战开发新浪微博系列(10)</a></li>

<li><a href=”http://www.itdriver.cn#17″>HTML5+CSS3实战开发新浪微博系列(9)</a></li>

<li><a href=”http://www.itdriver.cn#18″>HTML5+CSS3实战开发新浪微博系列(8)</a></li>

<li><a href=”http://www.itdriver.cn#19″>HTML5+CSS3实战开发新浪微博系列(7)</a></li>

<li><a href=”http://www.itdriver.cn#20″>HTML5+CSS3实战开发新浪微博系列(6)</a></li>

<li><a href=”http://www.itdriver.cn#21″>HTML5+CSS3实战开发新浪微博系列(5)</a></li>

<li><a href=”http://www.itdriver.cn#22″>HTML5+CSS3实战开发新浪微博系列(4)</a></li>

<li><a href=”http://www.itdriver.cn#23″>HTML5+CSS3实战开发新浪微博系列(3)</a></li>

<li><a href=”http://www.itdriver.cn#24″>HTML5+CSS3实战开发新浪微博系列(2)</a></li>

<li><a href=”http://www.itdriver.cn#25″>HTML5+CSS3实战开发新浪微博系列(1)</a></li>

</ul>

</dd>

</dl>

</div>

<div>

<dl>

<dd>

<ul>

<li><a href=”http://www.itdriver.cn#26″>一周精通DIV+CSS视频教程系列(10)</a></li>

<li><a href=”http://www.itdriver.cn#27″>一周精通DIV+CSS视频教程系列(9)</a></li>

<li><a href=”http://www.itdriver.cn#28″>一周精通DIV+CSS视频教程系列(8)</a></li>

<li><a href=”http://www.itdriver.cn#29″>一周精通DIV+CSS视频教程系列(7)</a></li>

<li><a href=”http://www.itdriver.cn#30″>一周精通DIV+CSS视频教程系列(6)</a></li>

<li><a href=”http://www.itdriver.cn#31″>一周精通DIV+CSS视频教程系列(5)</a></li>

<li><a href=”http://www.itdriver.cn#32″>一周精通DIV+CSS视频教程系列(4)</a></li>

<li><a href=”http://www.itdriver.cn#33″>一周精通DIV+CSS视频教程系列(3)</a></li>

<li><a href=”http://www.itdriver.cn#34″>一周精通DIV+CSS视频教程系列(2)</a></li>

<li><a href=”http://www.itdriver.cn#35″>一周精通DIV+CSS视频教程系列(1)</a></li>

</ul>

</dd>

</dl>

</div>

</body>

</html>

运行html页面，显示效果如下图所示：

接着我们在样式表文件中，清除所有元素的默认外边距(margin)和内边距(padding)，同时清除列表默认样式以及给超链接(a)添加 link 和 hover 样式:

*{margin:0;padding:0;}/*清除所有元素默认的外边距和内边距*/

ul{ list-style-type:none;}/*清除列表样式*/

a{ font-size:0.8em; } /*设置所有链接的字体为父容器的0.8倍*/

a:link{text-decoration:none;color:#00477D;} /*超链接，未点击时的样式*/

a:hover{text-decoration:underline;color:#FE9980;} /*超链接，鼠标划过时的样式*/

再次运行页面，当前的页面效果如下所示：

我们从上面的显示内容知道，太拥挤了，已经分不清每个区域了，我们先着手将每一块都应用上样式。

我们都从最开始的显示效果知道，每一块大概包含以下这些样式：

1. title背景是天蓝色的；

2. 边框颜色和title背景色一致；

3. title文字颜色是白色的；

4. 每一块内容都是圆角的(利用CSS3新增的border-radius属性)；

5. 让每一块内容都有点距离;

6. 每一块区域都有一个淡淡的阴影效果。

好，知道需要给每一块添加这么多样式，开始着手coding吧。

先给页面中每一个 dl 结点添加属性，给 dt 结点添加属性，给 dd 结点添加属性：

<!– 其他代码省略 –>

<dl>

<dd>

<ul>

<li><a href=”http://www.itdriver.cn#39″>Android</a></li>

</ul>

</dd>

</dl>

接着在样式表文件中，定义panel, phead 和 pbody：

.panel{/*给定义了此样式的元素添加边框，同时添加阴影和圆角效果*/

width:100%;

border:1px solid #809FFE;

-webkit-border-radius: 5px; /*CSS3中新增属性，添加圆角效果*/

-moz-border-radius:5px;

border-radius:5px;

margin: 2em 0em; /*是使盒子间外间距*/

box-shadow:4px 4px 10px #C6C6C6; /*给元素添加阴影效果，CSS3新增属性*/

}

.panel .phead{

background-color:#809FFE; /*设置panel头的背景色*/

height:2em; /*同时设置 height 和 line-height 属性，可使盒子内的内容垂直方向上居中显示*/

line-height:2em;

padding-left:0.5em; /*设置盒子内文字显示的样式*/

color:#FFFFFF;

font-weight:bold;

}

.panel .pbody > ul > li{ /*设置panel的内容间的外间距*/

margin:4px 4px;

}

在上面的代码中，我们使用了CSS3新增属性 border-radius(给元素添加圆角效果)，和 box-shadow(给元素添加阴影)，如果你对这两个不清楚的，可以看我写的CSS3新增属性的教程，里面会有详细示例讲解。

现在我们来看一下此时的运行效果(页面太大，只截取了部分)：

接下来，我们就要开始给页面添加CSS3的弹性盒模型属性了。

我在以前写的教程中讲过，如果要给元素添加CSS3的弹性盒模型属性，必须要现将盒子元素（也就是外层的容器）设置为display:box，这个属性的作用就是告诉浏览器我要使用CSS3的弹性盒模型布局页面。

我们先来给想让内容现在一行的块级容器添加属性吧，代码如下:

<div>

.. <!– 代码省略 –>

</div>

接着我们分别设置 container样式和 row样式：

.container{ margin:auto;width:90%;} /*设置显示内容块的占整个显示区域的大小，同时使容器内元素居中显示*/

.row{ /*给应用了此样式的块元素内的块级元素应用弹性盒模型属性*/

display:-webkit-box;

display:-moz-box;

display:box;

}

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

因为我们给box元素应用水平空间上的空间分配，所以默认是使用 box-pack:start属性，我们想让它水平空间上充满真个页面。

给box应用属性 box-pack: justify(首尾元素吸附在水平方向上的两端，中间元素分享剩余的空间)：

.row{ /*给应用了此样式的块元素内的元素应用弹性盒模型属性*/

display:-webkit-box;

display:-moz-box;

display:box;

-webkit-box-pack:justify; /*首尾元素吸附在水平方向上的两端，中间元素分享剩余的空间*/

-moz-box-pack:justify;

box-pack:justify;

}

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

从上面显示的效果我们可以看出，当给某一元素应用了 display:box的时候，其内的块级元素是包裹内容的。但是我们可能希望某些区域占用的空间大一点，某些占用的空间小一点，那CSS3中有没有这样的属性，可以让我们*调节占用的空间呢？

如果你看过去前面讲的《CSS3中的弹性流体盒模型技术详解(一)》的文章，我相信你一定可以想的起来：CSS3中新增属性 box-flex:value。

我们再来回顾一下这个属性的含义：box-flex属性规定了元素是否可以自动伸缩其尺寸，只要对应显示方向上有剩余空间(除了margin之外的剩余空间)，它(们)就会来填充这些空间，所有设置了此属性的元素，按比率分配剩余空间。

好了，既然知道有这么个属性，而且也知道它的作用，那么我们就可以给那些需要调整大小的块元素应用此属性吧。

等等，这里我们是不是遗漏了什么，难道就这么着急应用样式此样式吗？既然它能自动填充所在区域内的剩余空间，那我们是否可以定义一套*分配样式的样式文件呢？

好主意，我们可以假设将页面分成12个栏位，然后通过不同的栏位大小，来分配空间。

在样式表中添加如下样式，分配代表占用的空间（假设页面有12个栏位）：

/*栏位间相隔1em的距离*/

.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12{ margin:1em 1%;}

/*分别定义1-12栏位占用的空间开始…*/

.col-1{ -webkit-box-flex:1.0;-moz-box-flex:1.0;box-flex:1.0;}

.col-2{ -webkit-box-flex:2.0;-moz-box-flex:2.0;box-flex:2.0;}

.col-3{ -webkit-box-flex:3.0;-moz-box-flex:3.0;box-flex:3.0;}

.col-4{ -webkit-box-flex:4.0;-moz-box-flex:4.0;box-flex:4.0;}

.col-5{ -webkit-box-flex:5.0;-moz-box-flex:5.0;box-flex:5.0;}

.col-6{ -webkit-box-flex:6.0;-moz-box-flex:6.0;box-flex:6.0;}

.col-7{ -webkit-box-flex:7.0;-moz-box-flex:7.0;box-flex:7.0;}

.col-8{ -webkit-box-flex:8.0;-moz-box-flex:8.0;box-flex:8.0;}

.col-9{ -webkit-box-flex:9.0;-moz-box-flex:9.0;box-flex:9.0;}

.col-10{ -webkit-box-flex:10.0;-moz-box-flex:10.0;box-flex:10.0;}

.col-11{ -webkit-box-flex:11.0;-moz-box-flex:11.0;box-flex:11.0;}

.col-12{ -webkit-box-flex:12.0;-moz-box-flex:12.0;box-flex:12.0;}

/*分别定义1-12栏位占用的空间结束…*/

样式定义好了，根据样式定义，现在我想让【推荐博文】占用8个栏位，【精彩分类】那一栏占用4个栏位，【项目实战】那一栏占用6个栏位，【视频教程】也占有6个栏位，代码如下：

<body>

<div>

<dl>

<dd>

…

</dd>

</dl>

</div>

<dl>

<dd>

…

</dd>

</dl>

<dl>

<dd>

…

</dd>

</dl>

</div>

<div>

<dl>

<dt>项目实战教程</dt>

<dd>

…

</dd>

</dl>

</div>

<dl>

<dd>

…

</dd>

</dl>

</div>

</body>

好了，我们来运行一下页面：

看这个效果是不是太完美了，我们在最下面再添加一个panel，取名叫【赞助商链接】，放在【项目实战教程】与【视频教程】中间，然后col依次为 4，4，4，页面代码如下：

<div>

<dl>

<dt>项目实战教程</dt>

<dd>

…

</dd>

</dl>

</div>

<dl>

<dt>赞助商链接</dt>

<dd>

<ul>

</ul>

</dd>

</dl>

</div>

<dl>

<dd>

…

</dd>

</dl>

</div>

此时再运行页面，效果如下所示：

通过定义的col样式，显示分栏布局是不是非常方便呢？

好的，现在我们看看小屏幕窗口下的显示效果：

看到小屏幕的效果后，心情真的太糟糕了，内容都挤在一块了，我们希望的效果是像其他手机应用一样，水平方向上应该只有一个栏位，且所有栏位变成垂直方向上按顺序显示。

但是为什么不能自动换行呢？我们回头看看，是不是设置了哪个属性。

在样式表中找了一个遍，压根没设置什么属性，那CSS3中是不是有什么属性可以改变显示的方向呢。

如果你看过我 CSS3 的弹性盒模型教程，相信你对 box-orient属性有映像。

box-orient属性的作用：用来控制盒子内元素的显示方向。

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

如果没有显式的设置box-orient属性值，它默认使用水平方向(horizontal)显示。

根据这些解释，所以当在小屏幕下显示时，应该设置 box-orient:vertical。然而另一个问题来了：我们怎么知道当前页面是在大屏幕还是小屏幕上显示的呢？

这里我要先告诉大家，CSS3给我们提供了媒体查询（Media Query），这里我先直接使用，后面我会写一篇关于CSS3媒体查询详细使用的教程，如果有兴趣可以去阅读一下。

@media screen and (max-width:9999px) { /*如果浏览器窗口宽度小于设置的值，将直接应用此样式*/

.row{

-webkit-box-orient:horizontal;

-moz-box-orient:horizontal;

box-orient:horizontal;

}

@media screen and (max-width:960px) { /*如果浏览器窗口宽度小于设置的值，将直接应用此样式*/

.row{

-webkit-box-orient:vertical;

-moz-box-orient:vertical;

box-orient:vertical;

}

运用了媒体查询之后，我们限定，当浏览器窗口的宽度小于960px的时候，在垂直方向上显示子元素。好了，运行一下修改后的页面吧：

浏览器窗口宽度大于960px时

浏览器窗口宽度小于或等于960px时

已经达到我们想要的结果了。使用媒体查询的时候得注意一下，值小的要放在下面，不然内容会被大的给覆盖掉，大家可以调换 max-width:9999px 和 max-width:960px 这两个样式的顺序。

现在又有一个需求，如果我希望【精彩分类】显示在推荐博文上面怎么做呢？我们发现 CSS3有个新增的属性 box-ordinal-group属性，使用它可以轻易的定义在同一个容器中的元素显示顺序。

我们从页面代码中可以知道，【精彩分类】和【推荐博文】的直接父元素不是同一个，所以从box-ordinal-group的定义中可以知道，直接调换它两的顺序是不行的，但是我们可以调换它们父节点的位置。分别给他们父节点定义 .main-col和.sidebar-col样式，以及给他们应用样式如下：

@media screen and (max-width:960px) { /*如果浏览器窗口宽度小于设置的值，将直接应用此样式*/

.side-col{ /*小屏幕时，sidebar显示在前*/

-webkit-box-ordinal-group:1;

}

.main-col{

-webkit-box-ordinal-group:2;

}

.row{

-webkit-box-orient:vertical;

-moz-box-orient:vertical;

box-orient:vertical;

}

再次运行页面，查看效果，顺序是不是已经调换了：

Q：有人可能会问，那如果我想让【精彩分类】那一块区域显示在【推荐博文】的左侧，怎么实现呢？

A：这个很简单，只要通过 CSS3新增加属性box-direction:reverse就可以轻松实现，这里我就不做演示了，大家可以自己动手实现一下。

Q：大虾，请问我在手机上看，怎么有些标题自动换行了，很影响显示效果，这个怎么处理啊？

A：如果你不想让自己的标题换行，那么你可以在你的标题包含元素上应用CSS样式属性text-overflow:ellipsis 。这两个属性要配合 white-space:no-wrap和overflow:hidden 来使用，具体大家可以参考我的另一篇博文《CSS3属性text-overflow(省略符)实战开发详解》。

相信你通过本次《CSS3响应式WEB界面的设计》实战的学习，你一定对类似bootstrp等前端布局框架有一个更深刻的了解了。

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

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

相关标签： css css3 响应式布局盒模型弹性布局

上一篇： CSS3实战开发:仿天猫首页图片展示动画特效实战开发博客分类： div+csscss3 csscss3transition仿天猫动画特效

下一篇： java开发过程中所有会出现的异常与解决的办法博客分类： Eclipse web异常

CSS3实战开发: 弹性盒模型之响应式WEB界面设计博客分类： div+csscss3 csscss3响应式布局盒模型弹性布局