网站建设
移动互联网
品牌设计
创新应用
新闻动态
网站百科
简体

CSS布局模型盒

时间:2015-07-27 来源:尚品中国 类型:网站百科
字号:   

CSS布局是一种新兴的布局方式,其又被称作CSS+DIV(事实上应为CSS+XHTML)布局。其最大的优点是用CSS为网站设计的块状对象添加定位属性,将其转换为AP元素后,可以将该对象放置在网页任何地方,并且可以设置这些块状对象的层叠顺序。使用这种方式,可以将网页每个图像、每段文本、每个表格都添加进由CSS定义的块状对象中,以实现灵活的、多样化的布局方式.CSS定义的AP元素还可以与JavaScript等脚本语言结合,制作出各种动态效果。

Css盒模型(Box Model)是用来描述CSS中块状对象的一种模型。通过该模型,可以将CSS的块状对象的各种属性十分贴切、形象地表现出来,以协助网页设计者理解CSS块状布局的原理。盒模型是CSS布局的基础。

1.盒模型的结构

在CSS中,所有的块状对象都被视为一个矩形框。该矩形框的所有与位置相关的属性都被视为盒模型的一部分。盒模型的结构如图4-5所示。

CSS定义的块状对象都包括边界区、边框、填充区和内容4个部分。使用CSS可以定义这些区域的大小,而不影响块状对象的内容。在网页中,标准的CSS块状对象高度计算公式如下所示。

盒模型的结构

而标准的Css块状对象宽度计算公式则如下所示。

Css盒模型
理解了网页的块状对象高度和宽度的计算方法,就可以根据这些方法来定义这些对象在网页中的排列方式。

2.边界

在Css中,边界又被称作外补丁。定义块状对象的边界,需要使用复合属性margin以及其4种子属性,如表4-25所示。

外补丁

使用不带复合属性的margin属性也可以为网页对象设置4边的边界值。其方法是为margin属性设置多个属性值。为margin属性设置两个属性值时,其第I个属性值定义网页对象顶部和底部的边界,而第2个属性值定义网页对象左侧和右侧的边界,其代码如下所示。



为margin属性设置3个属性值时,其第1个属性值定义网页对象顶部的边界,个属性值定义网页对象左侧和右侧的边界,第3个属性值定义网页对象底部的边界,代码如下所示。



为margin属性设置4个属性值时,其4个属性值分别定义网页对象的顶部、右侧、底部和左侧的边界宽度,其代码如下所示。



3.填充

在Css中,填充又被称作内补丁。定义块状对象的填充,需要使用复合属性padding以及其4种子属性,如表4-26所示。

内补丁属性

使用不带复合属性的padding属性也可以为网页对象设置4边不同的填充值。其方法是为padding属性设置多个属性值.为padding属性设置两个属性值时,其第l个属性值定义网页对象顶部和底部的填充,而第2个属性值定义网页对象左侧和右侧的填充,其代码如下所示。



为margin属性设置3个属性值时,其第1个属性值定义网页对象顶部的填充,第2个属性值定义网页对象左侧和右侧的填充,第3个属性值定义网页对象底部的填充,其代码如下所示。



为margin属性设置4个属性值时,其4个属性值分别定义网页对象的顶部、右侧、底部和左侧的填充宽度,其代码如下所示。




扫描左侧二维码添加客户经理微信

010-60259772

请提供您的联系电话,尚品中国项目经理会尽快与您联系。