项目六 DIV+CSS布局网页
掌握盒模型
了解元素类型
掌握DIV及其常用属性
能够分析并使用DIV+CSS布局网页
所有页面中的元素都可以看成是一个盒子,占据着一定的页面空间。一般来说这些被占据的空间往往都要比单纯的内容要大,因为盒子可以有边框,盒子内外都可以有边距,可以通过调整盒子的边框和边距等参数,来调节盒子的位置。一个盒子模型由content(内容)、border(边框)、padding(填充也叫内边距)和margin(外边距)这4个部分组成。如图所示。
任务1: 认识盒模型
盒模型概述
内边距(padding)
外边距(margin)
边框(border)
Padding与margin都有上、右、下、左四个值。
当这些属性被赋值后,会影响盒子的宽度与高度。
1、盒模型的宽度
盒模型的宽度= margin-left(左外边距)+border-left(左边框)+padding-left(左内边距)+width(内容宽度)+padding-right(右内边距)+border-right(右边框)+margin-right(右外边距)
2、盒模型的高度
盒模型的高度= margin-top(上外边距)+border-top(上边框)+padding-top(上内边距)+height(内容高度)+padding-bottom(下内边距)+border-bottom(下边框)+margin-bottom(下外边距)
【实例】
盒模型宽高计算
<style type="text/css">
div { margin: 30px;
padding: 20px; height: 100px;
width: 100px;
border: solid 20px #CCFFFF ; } </style>
任务1: 认识盒模型
DIV的宽度= 30px+20px+20px+100px+20px+20px+30px=240px
DIV的高度= 30px+20px+20px+100px+20px+20px+30px=240px
任务1: 认识盒模型
元素类型
HTML中的元素默认分为两种:块元素(block element)与行内元素(inline element)。
1、块元素
块元素是独立的,显示时独占一行。
常见的块元素有: p、div、ul、li、h1、dt...
2、行内元素
行内元素都会在一行内显示。
常见的行内元素有:a、img、span、strong...
【实例】元素类型
<style type="text/css">
.block {
background-color: #6CF;
}
.inline {
background-color: #F9F;
}
</style>
任务1: 认识盒模型
<body>
<p class="block">块元素</p>
<p><strong class="inline">块元素在显示时会独占一行</strong>,常见的块元素有p、ul、li...</p> <p class="block">行内元素</p>
<p><a class="inline" href="#">行内元素</a>在一行内显示,常见的行内元素有strong、a、span...</p>
</body>
在浏览器中预览效果如图所示。
3、块元素与行内元素转换
块元素与行内元素可以通过
“区块”分类中display属性
的block(块)与inline(行内)
进行互相转换。
任务1: 认识盒模型
<DIV>(division)是一个区块容器标记,它可称作为“DIV block”,或“DIV element”或“CSS-layer”,或干脆叫“layer”。<DIV>与</DIV>之间可以放置任何内容,包括其他的DIV标签。也就是说DIV是一个没有特性的容器而已。
DIV块作为一个独立的对象,在CSS样式控制下有着灵活的表现形式,形成另外一种组织布局形式DIV+CSS。
任务2: 认识DIV标签
插入DIV标签
1)创建一个HTML文档。
2)执行【插入】|【布局对象】|【DIV标签】命令或点击“插入”面板“布局”“ DIV标签”,打开“插入DIV标签”对话框,如图6-5所示。在这里必须设定一个类或ID,以便于应用CSS样式。
图插入DIV标签对话框
3)在ID处输入“top”,点击“确定”按钮,在Dreamweaver设计窗口出现如图所示DIV块。表明插入了一个id名为top的DIV标签。
设置DIV属性
DIV是容器,是块元素,也是一个盒子,主要的属性就
项目六DIVCSS布局网页 来自淘豆网m.daumloan.com转载请标明出处.
