基于CSS 盒模型的浮动布局

郭琳

（四川职业技术学院计算机科学系,四川 遂宁 629000）

基于CSS 盒模型的浮动布局

郭琳

（四川职业技术学院计算机科学系,四川 遂宁 629000）

在web程序的前端实现过程中，如何进行web页面布局是至关重要的．常用的网页布局技术有框架布局，表格布局，div布局．在这三种实现技术中，目前主要采用的是使用盒模型和css以及f loat浮动布局技术，来实现网页的布局．本文主要阐述如何运用盒模型，结合css样式表实现网页布局．

盒模型；div；CSS:f loat浮动布局.

1 盒模型

1.1 盒模型的概念

盒模型是we b页面排版布局的主流技术，对盒模型的理解主要是对co n te n t,b order,p a dd in g和m a rg in这四个概念的理解． 下图描述出来了盒模型概念．

其中：co n te n t是盒子里放的内容．

p a dd in g是盒子中内容和盒子边框的距离，又称填充距离．

b order是盒子的边框，这里的边框是具有宽度的．

m a rg in是盒子的边框和其他元素的距离，又称外边距．

注意：盒子的四个边，四个方向的p a dd in g，四个方向的m a rg in都可以单独控制．

1.2 两个盒模型

一个盒子具有上面的这些属性，如何确定一个盒子在网页中总体尺寸，就非常的重要．在盒模型中有W3C标准盒模型和i e盒模型两种.它们对盒模型的各个属性的解释是不同的.下面分别介绍这两个盒模型.

1.2.1 W3C标准盒模型

一个标准的W3C盒子的宽度计算方式是：左外边距+左边框+左填充+w i dth+右填充+右边框+右外边距．其中的宽度是指co n te n t区域的宽．高度的计算原理一样．

1.2.2 I E盒模型

在I E浏览器中，对盒子的宽度的计算是不一样的，I E盒模型的宽度的计算就是：左外边距+ w i dth+右外边距，对高度的计算原理也是一样．因为I E浏览器在解释盒模型的时候，co n te n t的宽度包含了填充和边框．

1.3 实例分析

在不同的盒子模型下对上面这段代码的解释是不一样的．W3C标准盒模型中，宽度的计算是：300+20*2+40*2+2*2=424p x．I E盒模型中，宽度的计算是：300+40*2=380p x．可以看出在不同的盒子模型下，相同的代码，产生的结果是不一样的．

1.4 浏览器兼容问题

我们在选择盒模型时，要选择标准的W3C盒模型．而I E浏览器对盒模型的理解，是没有遵循W3C标准盒模型的．于是，盒模型在使用时，就会存在浏览器的兼容问题．解决的办法是为htm l文档加上doctype声明,把页面设置为标准模式．在文档的最前面加上． 这样I E浏览器就会采用W3C的标准模式来解释盒模型．

2 CSS样式表

C a sc a d in g S ty l e S heet层叠样式表，C SS就是让内容和样式分离开来．H T M L只控制网页的内容（如文字、图片和超链接等），而内容的样式则由C SS来控制（如颜色、位置等）．C ss样式表的种类很多，在盒模型中主要涉及到I d选择器和c la ss选择器．下面对这两类选择器做相应介绍．

2.1 Id选择器

I d选择器，由自己命名，注意不要以数字开头，使用#符号进行标识，在一个网页中只能使用一次．在布局时，需要唯一标识的盒子，就用I d选择器．

2.2 class选择器

C la ss选择器，也是自己命名，使用.符号的形式定义，允许重复使用．因此在we b页面中多个相同样式的盒子在布局的时候，就使用c la ss选择器．

3 Float浮动布局

3.1 float属性

对于一个H T M L网页,b ody元素下的任意元素，根据其前后顺序，组成了一个上下关系，这便是文档流．文档流是浏览器的默认显示规则．而f l o a t浮动属性可以改变页面对象的前后流动顺序，让排版更简单，具有良好的伸缩性．下表是f l o a t属性的取值．

3.2 float属性的实例

定义两个盒子在H T M L代码中：

运行结果：

第二种布局：

运行结果：

通过上面的小实例，总结出通过f l o a t布局，可以在不改变H T M L代码的情况下，调整盒子的显示位置.因此使用f l o a t浮动布局可以随心所欲的在页面中放置盒子．

4 Clear清除浮动

如果因为特殊设计，不希望下面的对象继续浮动，便可以使用c l e a r属性来拒绝某个方向的浮动．也可以是在浮动很多元素之后，突然需要另起一行，也可以使用c l e a r属性来清除浮动．下表是c l e a r属性的取值．

5 布局实例

在下面这个布局实例中，使用i d选择器和c la ss选择器进行布局．主要代码如下：

5.1 Css样式表

5.2 Htm l代码

5.3 布局效果如下图

使用该布局实现的页面效果图如下：

6 结束语

盒模型在we b页的布局中是核心和关键.本文对W3C标准盒模型的布局，做了一个全面的基本介绍.盒模型在we b的前端开发中，是出了名的易学难精，需要对css样式表有深入的学习.在了解原理的基础上，如何运行盒模型布局出有特点的网页，还需要大量经验的积累，本文只起到一个抛砖引玉的作用.

[1]袁磊.网页设计与制作实例教程[M].北京:清华大学出版社，2013．

[2][美]达科特.H tm l&css设计与构建网站[M].北京:清华大学出版社,2012．

[3]何丽.精通d i v+css网页样式与布局[M].北京:清华大学出版社,2014．

On the Floating Layout BasedonCSSBoxModel

G U OL in
（C omputer S c i e n ceDep a r tme n t,S i chu an V oc a t i o nal an d T ech ni c al C o l l ege,S u inin g S i chu an629000）

I n the process o f thewe b f ro n t-e n d i mp l eme n t a t i o n,how to do thewe b p a ge la yout i s esse n t ial.C ommo nl y usedwe b p a ge la yout tech n o l og i es a re f r a mewor k la yout,t abl e la yout an d d i v la yout.I n these three tech n o l og i es,them ain use i s to use the b o x mode l,C SS an d the f l o a t in g la yout tech n o l ogy to a ch i e v e the la yout o f the p a ge.T h i s thes i s e lab or a tes how to use the b o x mode l an d combin ew i th C SS sheets to a ch i e v e the la yout o f thep a ge.

B o x M ode l;D i s;C SS;F l o a t in g L a yout

TP393

B

1672-2094（2017）02-0162-04

责任编辑：张隆辉

2017-01-03

郭 琳（1978-），女，四川遂宁人，四川职业技术学院讲师.研究方向：J a v a W e b软件开发.