Dreamweaver CS6之Div+CSS盒模型
本文来自 九州书源 《Dreamweaver CS6网页制作》 清华大学出版社 2015年
摘 要:本文档主要介绍Dreamweaver CS6中Div+CSS盒模型的使用方法。
关键词: Dreamweaver CS6;Div+CSS;盒模型
1 Div+CSS盒模型
在 Div+CSS 布局网页中,盒模型是一个重要的概念,只有掌握了盒模型的布局原理,才能通过
Div+CSS 的布局方法对网页中的每个元素进行快速、准确地定位,并对各元素的各种属性进行设置。
盒模型的原理就是将 Div 元素看作是一个有点空间的盒子,它由 Margina边界)、Border(边框)、
Padding (填充)和 Contenta内容)组成。其中,Margin 位于最外层;Content 位于最里层,是存
放具体内容的空间,不管是哪种组成属性,都是用于控制元素内容的布局及定位。
图 1 Div+CSS 盒模型
2 Margin (边界)
Margin 属性是用于设置元素与元素之间的距离,用户在设置盒子的边界距离时,可以分别对盒子的
上、下、左、右的边距进行设置。其设置方法是:在打开的“CSS 规则定义”对话框中选择“方框”选
项卡,在“Margin”栏中设置 Top、Right、Bottom 和 Left 参数值。如果用户是在代码中直接编辑,
则设置顺序为上右下左aMargin: 25px 13px 10px 13px),单击“确定”按钮完成操作。
图 2 Margin (边界)
如果其参数相同,如都为 10px,则可缩写为 Margin: 10px。
3 Border (边框)
Border 用于设置网页元素的边框,可达到分离元素的目的。而 Border 的属性主要有 color、width
和 style。其设置也是通过在“CSS 规则定义”对话框的“边框”选项卡中进行,下面将分别介绍各属
性的作用。
1 / 2
Dreamweaver CS6 之 Div+CSS 盒模型