《项目六 div+css布局网页》由会员分享，可在线阅读，更多相关《项目六 div+css布局网页（38页珍藏版）》请在金锄头文库上搜索。
1、掌握盒模型 了解元素类型 掌握DIV及其常用属性 能够分析并使用DIV+CSS布局网页所有页面中的元素都可以看成是一个盒子，占据着一定的页面空间。一 般来说这些被占据的空间往往都要比单纯的内容要大，因为盒子可以有边框 ，盒子内外都可以有边距，可以通过调整盒子的边框和边距等参数，来调节 盒子的位置。一个盒子模型由content（内容）、border（边框）、padding（ 填充也叫内边距）和margin（外边距）这4个部分组成。如图所示。6.1 任务1： 认识盒模型6.1.1 盒模型概述内边距（padding ）外边距（margin） 边框（border）Padding与margin都有上、右
2、、下、左四个值。 当这些属性被赋值后，会影响盒子的宽度与高度。 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（下边框）+m
3、argin-bottom（下外边距） 【实例】 盒模型宽高计算 div margin: 30px; padding: 20px; height: 100px; width: 100px; border: solid 20px #CCFFFF ; 6.1 任务1： 认识盒模型DIV的宽度 = 30px+20px+20px+100px+20px+20px+30px=240px DIV的高度 = 30px+20px+20px+100px+20px+20px+30px=240px6.1 任务1： 认识盒模型6.1.2 元素类型HTML中的元素默认分为两种：块元素（block element）与行内元素
4、（inline element）。 1、块元素 块元素是独立的，显示时独占一行。 常见的块元素有： p、div、ul、li、h1、dt. 2、行内元素 行内元素都会在一行内显示。 常见的行内元素有：a、img、span、strong.【实例】元素类型.block background-color: #6CF; .inline background-color: #F9F; 6.1 任务1： 认识盒模型块元素 块元素在显示时会独占一行，常见的块元 素有p、ul、li. 行内元素 行内元素在一行内显示，常见的行内元素 有strong、a、span.在浏览器中预览效果如图所示。3、块元素与行内元素转
5、换块元素与行内元素可以通过 “区块”分类中display属性 的block（块）与inline（行内） 进行互相转换。6.1 任务1： 认识盒模型（division）是一个区块容器标记，它可称作为“DIV block”，或“DIV element”或“CSS-layer”，或干脆叫“layer”。与之间可以放 置任何内容，包括其他的DIV标签。也就是说DIV是一个没有特性的容器 而已。 DIV块作为一个独立的对象，在CSS样式控制下有着灵活的表现形式，形成 另外一种组织布局形式DIV+CSS。6.2 任务2： 认识DIV标签6.2.1 插入DIV标签）创建一个HTML文档。 ）执行【插入】【布
6、局对象】【DIV标签】命令或点击“插入”面板 “布局”“ DIV标签”，打开“插入DIV标签”对话框，如图6-5所示。在这里 必须设定一个类或ID，以便于应用CSS样式。 图 插入DIV标签对话框3）在ID处输入“top”，点击“确定”按钮，在Dreamweaver设计窗口出现如图所 示DIV块。表明插入了一个id名为top的DIV标签。6.2.2 设置DIV属性DIV是容器，是块元素，也是一个盒子，主要的属性就是盒模型的一些基本属 性，包括边框、内边距、外边距以及DIV容器的位置。 创建一个ID为top的CSS规则，打开“#top的CSS规则定义”对话框，DIV标签的 常见属性主要是在“方框
7、”、“边框”与“定位”分类里设定的。6.2 任务2： 认识DIV标签方框分类属性 点击“方框”分类，如图所示。1）width：设置DIV的宽度。 2）height：设置DIV的高度。 在此处width与height分别设为200，点击“确定”按钮，设计视图中的DIV。 3）padding：设置DIV的内边距，也就是内容到边框的距离。 4）margin：设置DIV的外边距，也就是边框到父容器或与其他容器之间的距 离。 设置所有padding为20，所有margin为20，点击“确定”按钮后效果如图所示。6.2 任务2： 认识DIV标签5）float：浮动，定义元素浮动到左侧或右侧 。以往这个属性
8、总应用于图像，使文本围 绕在图像周围。 HTML中元素在浏览器中显示是按照流方式 显示，行内元素从左到右，块元素从上到 下。 在 CSS 中，任何元素都可以浮动。浮动元 素会生成一个块级元素，而不论它本身是 何种元素。元素对象设置了float属性之后 ，它将脱离文档流的显示方式，不再独自 占据一行，可以向左或向右移动，直到它 的外边缘碰到包含它的边框或另一个浮动 块的边框为止，后面的元素会围绕它显示 。 float属性有四个可用的值：left 和right 分别 浮动元素到各自的方向，none (默认) 使 元素不浮动，inherit 将会从父级元素获取 float值。6.2 任务2： 认识D
9、IV标签【实例】float属性div height: 100px; width: 100px; margin-top: 15px; border: 1px dashed #33F; 此处显示id “div1“的内容 此处显示id “div2“的内容 此处显示 id “div3“的内容正常DIV显示6.2 任务2： 认识DIV标签给DIV设置float属性，让div1右浮动，div2左浮动，在style内添加如下代码 ： #div2 float: left; #div1 float: right; 添加后预览效果如图所示。6.2 任务2： 认识DIV标签6）clear：清除浮动。其值有left、
10、right、both、none。 如上例，要想让div3不受div2浮动的影响，恢复其原始文档流位置显示，则在 style中插入CSS规则：#div3clear：left；即可。预览效果如图所示。2、边框分类属性 点击“边框”分类，如右图所示。6.2 任务2： 认识DIV标签style：边框的样式。 width：边框的粗细。 color：边框的颜色。 边框的三个属性可简写为：border：width style color。 例如：border：2px solid red； 3、定位分类属性 点击“定位”分类，如图所示。6.2 任务2： 认识DIV标签1）position：定位，它有四个属性值
11、：static（静态）、relative（相对定位 ）、absolute（绝对定位）、fixed（固定）。 Static：默认值，无定位，元素按正常文档流显示。 Relative：定位为relative的元素脱离正常的文档流，但其在文档流中的 位置依然存在，所占用的空间依然保留，通过placement中的left，right ，top，bottom属性来设置相对于其在正常文档流位置所偏移的距离。 相对定位对象可层叠，层叠顺序可通过z-index属性控制。 【实例】relative相对定位#parent height: 200px; width: 200px; border :solid 2px
12、; .sub height: 80px; width: 100px; border :solid 1px; #sub1 position:relative; left:30px; top:30px; background-color:#C9F; 6.2 任务2： 认识DIV标签Relative相对 static静态 absolute: 将被赋予此定位方法的对象从文档流中拖出，与relative的区别是其 在正常文档流中的位置不再存在。使用left，right，top，bottom属性相对于其 最接近的一个具有定位设置的父级对象进行绝对定位，如果对象的父级没有设 置定位属性，则依据body对象左
13、上角作为参考进行定位。绝对定位对象同样 可通过z-index进行层次分级。6.2 任务2： 认识DIV标签【实例】绝对定位（父级没有设置定位属性） 接上例，改变#sub1的定位为absolute，修改内容如下： absolute绝对 #sub1 position:absolute; left:30px; top:30px; background-color:#C9F 保存预览效果如右图所示。6.2 任务2： 认识DIV标签【实例】绝对定位（父级设置定位属性） 接上例，改变#parent的定位为relation，修改CSS规则如下： #parent height: 200px; width: 2
14、00px; border :solid 2px;margin:20px 0px 0px 20px; position:relative; #sub1 position:absolute; left:30px; top:30px; background-color:#C9F 保存预览效果如右图所示。6.2 任务2： 认识DIV标签 fixed：特殊的absolute，总是以body为定位对象，按照浏览器窗口进行定位 2）width与height，与方框里的一样，用于设置元素的宽高的。 3）visibility：元素可见性。是指当块内元素中的内容超出边界后的显示设置。属 性值有：inherit、v
15、isible、hidden。Inherit：从父元素继承visibility的值。Visible：默认值，元素可见。Hidden：元素不可见。 4）z-Index：设置元素堆叠顺序，该属性设置一个定位元素沿 z 轴的位置，z 轴 定义为垂直延伸到显示区的轴。数字越大处于越上层，可以为正也可以为负 5）overflow：溢出。当元素超过区块的容纳范围时会产生溢出。其属性值有 visible、hidden、scroll、auto。Visible：默认值，超出部分显示。Hidden：超出部分隐藏。Scroll：产生滚动条，不管是否溢出都产生。Auto：自动，超出时产生滚动条，不超出时不产生滚动条。6
16、.2 任务2： 认识DIV标签6）clip：裁剪绝对定位元素。这个属性用于定义一个剪裁矩形。对于一个绝对 定义元素，在这个矩形内的内容才可见。出了这个剪裁区域的内容会根据 overflow 的值来处理。剪裁区域可能比元素的内容区大，也可能比内容区 小。【实例】使用DIV+CSS制作一个如下所示的网页布局效果，网页居中显示。 Container （宽800） Head （800*180）nav（800*55 ）Left（300*450）Right（ 493*450）footer（800*60 ）结构代码如下所示：6.2 任务2： 认识DIV标签CSS控制代码如下： #container width: 800px; margin-right: auto; margin-left: auto; div border: 1px solid #CCC; #nav height: 55px;
