APP下载

DIV+CSS盒子模型、浮动与定位探究

2022-03-10陈书理张书贵

开封大学学报 2022年3期
关键词:边框浮动盒子

陈书理,张书贵

(开封大学 信息工程学院,河南 开封 475004)

0 引言

作为浏览者,我们上网时看到的是网页上的文字、图片、视频等网页元素。那么,这些网页元素是如何有组织地排列在一起,构成一个完整页面的呢?网页开发人员可以回答这一问题。网页开发师不仅要完善网页功能,还要给浏览者一个好的使用体验。在网页开发过程中,需要用到Div+Css盒子模型、浮动和定位技术。下面来具体介绍。

1 盒子模型

Html页面上的元素都可以看成是由框组成的,这些框通过浮动或者定位机制排列在一起,构成我们看到的网页界面,而框就是盒子模型。现实生活中,我们接收到的快递、装电脑的箱子、手机盒子,还有挂在墙上的画框等,都可以看作盒子模型,它们都是用来封装物品的。而网页设计中的盒子模型是用来封装周围的Html元素的,它包括外边距(Margin)、边框(Border)、内边距(Padding)、内容(Content)四部分[1]。盒子模型的结构如图1所示。

图1 盒子模型的结构

1.1 外边距(Margin)

一幅画与另一幅画之间的距离,即一个盒子与另一个盒子之间的距离就是外边距。

1.2 边框(Border)

网页中,用于分离和隔开不同元素的线(有粗细之分)就是边框。

1.3 内边距(Padding)

元素和边框之间的距离就是内边距。元素距离边框的远近可以被控制。

1.4 内容(Content)

盒子里装的东西就是内容,它是网页中最主要的部分。网页中的主要元素,如文字、图像、动画、音视频、表单等,都需要不断输出。

在你设计网页元素所存在的空间的过程中,当你指定一个CSS元素的宽度和高度属性时,要知道,你只是设置了内容区域的宽度和高度,你还必须添加内边距、边框和外边距,这样才能呈现一个有着完整大小的元素。实际宽度=左右外边距+左右边框+左右内边距+内容宽度。实际高度=上下外边距+上下边框+上下内边距+内容高度[2]。

依据上面盒子模型的实际宽度和实际高度来设置,其产生的效果如图2所示。此盒子里放置2个元素,设置盒子的宽度为800px,高度为220px;边框的宽度为1px,颜色为橙色,实线;内边距为1px。

图2 盒子模型效果举例

2 浮动

网页中的元素,按照上面介绍的盒子模型的原理,被封装在了盒子里。在默认情况下,网页中的元素是按照从上到下的顺序罗列的,也就是我们在通常意义上所说的以流文档的形式来显现。这种显示方式既单调又混乱,既不利于网页的后期维护,也不符合浏览者的浏览习惯。为了使网页的排版更加合理,使网页更加清晰,我们要让网页上的元素浮动起来。设置了浮动属性的元素会脱离标准文档流的控制,移动到其父元素中指定的位置[3]。所谓元素的浮动,就是指这样一个过程。需要注意的是,只有左右浮动,没有上下浮动。在这里,以开封大学软件学院网站的导航栏为例,说明浮动的意义,进一步阐明浮动的概念。

图3为没有设置浮动状态的效果,网页元素以无序列表的形式显示出来。

图3 没有设置元素浮动的效果

图4为使用代码:float:left,设置元素浮动状态。网页元素由文档流状态过渡到浮动状态,同时也实现了网页中横向导航栏的设计和制作。图5为设置元素浮动后的效果。

图4 设置元素浮动代码

图5 设置网页元素浮动的效果

设置了网页元素浮动之后,由于浮动元素不再占用原文档的位置,所以它会对相邻的固定元素产生影响。为了避免浮动对其他元素产生影响,我们要设置命令来清除浮动。清除浮动的方式通常有三种:

1)使用clear来清除浮动

选择器{clear:left\right\both;}可以实现:不允许左侧有浮动\不允许右侧有浮动\同时清除左右两侧浮动。

2)使用overflow属性清除浮动

对某元素应用overflow:hidden;样式来设置,也可以消除浮动对该元素的影响。

3)使用after伪元素清除浮动

该方法只适用于IE8.0及以上版本的浏览器和其他非IE浏览器。

3 定位

上边谈到,在网页设计中,可以把网页元素封装在盒子里,并且运用浮动来控制网页元素的显示。这样做,虽然显得灵活一些,但是无法对元素的位置进行精确的控制,无法对元素进行定位。若不能精确定位,就无法如愿制作出一个网页来。在css3中,可以通过定位属性来实现对元素的精准定位,让元素准确地显示在需要显示的页面位置。元素的定位主要涉及定位模式和边偏移[4]。

3.1 定位模式

选择器{position:static\relative\absolute\fixed}可以实现:静态定位、相对定位、绝对定位、固定定位。

3.1.1 静态定位

网页结构默认的文档流的方式就是静态定位方式。如果没有指定元素的定位方式,就按照静态定位的方式来显示。

3.1.2 相对定位

相对定位是指相对于元素在标准文档流中的位置进行定位。虽然元素有了新的定位,但是其在原来文档流中的位置还保留。也就是说,相对定位占2个位置,原来的位置保留,又去开拓新的位置。

3.1.3 绝对定位

绝对定位是指相对于最近的有定位属性的父元素进行定位。如果向上的父元素都没有定位,那么就相对于body元素,以它为标准来进行定位。采用绝对定位的元素完全脱离文档流,不再占用原来的位置。

3.2 边偏移

定位模式仅仅用于表明元素以哪种方式定位,并不能确定元素的具体位置。在css3中,可以通过边偏移属性top、bottom、left、right来精确定义、定位,确定元素的位置。下面仍然以开封大学软件学院的网站为例,来阐释定位的概念,展示其应用。运用定位知识制作出的网页,其效果和代码如图6所示。

图6 定位机制及代码

4 结语

由以上具体案例可见,盒子模型在Div+Css网页布局结构中起着举足轻重的作用,它可以承装网页上面显示的任何元素。浮动可以创造出不同于原始文档流的显示方式。打破原始状态,让网页元素浮动起来,这样可以更好地实现定位,发挥定位的作用。定位是指让装在盒子里的网页元素准确地显示在需要显示的位置。Div+Css盒子模型、浮动和定位三者共同发挥作用,可以实现网页元素的合理组织和网页的合理布局。

猜你喜欢

边框浮动盒子
电连接器柔性浮动工装在机械寿命中的运用
有趣的盒子
论资本账户有限开放与人民币汇率浮动管理
一种用于剪板机送料的液压浮动夹钳
用Lightroom添加宝丽来边框
给照片制作专业级的边框
带有浮动机构的曲轴孔镗刀应用研究
寻找神秘盒子
外出玩
摆脱边框的束缚优派