1、能力目标：能力目标：(1)能够运用盒子模型和标准流进行页面布局能够运用盒子模型和标准流进行页面布局(2)能够独立使用能够独立使用DIV+CSS进行简单的页面布局设计进行简单的页面布局设计知识目标：知识目标：(1)盒子模型盒子模型(2)标准流标准流(3)使用使用DIV+CSS进行布局网页的方法进行布局网页的方法任务一任务一 认识认识DIVDIV标签标签CSS盒子模型的概念盒子模型的概念任务一任务一 认识认识DIVDIV标签标签CSSCSS盒子模型的边框盒子模型的边框边框（border）在盒子模型中位置，如图8-1，border的属性主要有3个，分别是color（颜色）、width（粗细）和sty
2、le（样式）。具体的属性和属性值可以参考项目七任务3中设置图片边框的内容，效果是一样的。这里举一个简单的例子，代码如下：p border-top-width:5px;/*上边框粗细为5个像素*/border-right-width:10px;/*右边框粗细为10个像素*/border-bottom-width:15px;/*下边框粗细为15个像素*/border-left-width:20px;/*左边框粗细为20个像素*/border-top-style:solid;/*上边框样式为实线*/border-right-style:dotted;/*右边框样式为点画线*/border-botto
3、m-style:dashed;/*下边框样式为虚线*/border-left-style:double;/*左边框样式为双线*/border-top-color:#F00;/*上边框颜色为红色*/border-right-color:#000;/*右边框颜色为黑色*/border-bottom-color:#00F;/*下边框颜色为蓝色*/border-left-color:#FF0;/*左边框颜色为黄色*/任务一任务一 认识认识DIVDIV标签标签CSSCSS盒子模型的盒子模型的内边距内边距内边距（padding）在盒子模型中位置，用于设置内容与边框之间的距离。可以通过padding-lef
4、t，padding-right，padding-top和padding-bottom来分别设置左、右、上、下的内边距。也可以通过padding：1、2、3、4来直接设置四个方向的内边距，顺序按照顺时针方向，依次为上、右、下、左。代码如下：p padding:5px 10px 15px 20px;/*段落标签盒子模型的上内边距为5个像素，右内边距为10个像素，下内边距为15个像素，左内边距为20个像素*/p padding-top:5px;/*上内边距为5个像素*/padding-right:10px;/*右内边距为10个像素*/padding-bottom:15px;/*下内边距为15个像素*
5、/padding-left:20px;/*左内边距为20个像素*/任务一任务一 认识认识DIVDIV标签标签CSSCSS盒子模型的外盒子模型的外边距边距 外边距（margin）在盒子模型中位置，外边距可以设置盒子和盒子直接的距离。使用方法和padding一样。代码如下：p margin:10px 20px 30px 40px;/*段落标签盒子模型的上外边距为10个像素，右外边距为20个像素，下外边距为30个像素，左外边距为40个像素*/p margin-top:10px;/*上外边距为10个像素*/margin-right:20px;/*右外边距为20个像素*/margin-bottom:30
6、px;/*下外边距为30个像素*/margin-left:40px;/*左外边距为40个像素*/任务一任务一 认识认识DIVDIV标签标签标准流的概念标准流的概念所谓标准流，就是指在没有任何外部干涉时，网页中各个元素盒子的排列规则，也就是网页默认的自然的排列布局方式。一个网页中的元素可以分为两类，块级元素和行内元素，也可以理解为两种不同类型的盒子。标准流就是CSS规定的默认的块级元素和行内元素的排列方式。（1）块级元素大部分html标签都属于块级元素，每一个块级元素都占据着一个矩形的区域，并且跟同级的兄弟块依次垂直排列，左右撑满。比如，p标签，h1标签，div标签都是块级元素。块级元素也是本书
7、在网页布局中重点讨论的对象。（2）行内元素网页当中有一小部分元素属于行内元素，比如文字，标签等等。行内元素不占有独立的区域，行内元素不会左右撑满。任务一任务一 认识认识DIVDIV标签标签任务一任务一 认识认识DIVDIV标签标签标签是页面布局中最常用的标签。与之间可以容纳网页当中的任何元素，比如段落、标题、图片、链接等等。div font-family:微软雅黑;font-size:36px;font-weight:bold;color:#F00;text-decoration:underline;border:5px dotted#F00;没有设置浮动时的效果没有设置浮动时的效果任务一任务
8、一 认识认识DIVDIV标签标签设置第设置第1个个div浮动时的效果浮动时的效果任务一任务一 认识认识DIVDIV标签标签 设置前两个设置前两个div浮动时的效果浮动时的效果任务一任务一 认识认识DIVDIV标签标签 设置第设置第3个个div浮动时的效果浮动时的效果任务一任务一 认识认识DIVDIV标签标签 改变浮动方向后的效果改变浮动方向后的效果 任务一任务一 认识认识DIVDIV标签标签 div被挤到下一行时的效果被挤到下一行时的效果任务一任务一 认识认识DIVDIV标签标签 交换交换div位置时的效果位置时的效果 任务一任务一 认识认识DIVDIV标签标签 div被挤到下一行的效果被挤到
9、下一行的效果任务一任务一 认识认识DIVDIV标签标签 设置设置3个个div浮动时的效果浮动时的效果 任务一任务一 认识认识DIVDIV标签标签 div挤倒下一行被卡住时的效果挤倒下一行被卡住时的效果 任务一任务一 认识认识DIVDIV标签标签 设置浮动后文字环绕的效果设置浮动后文字环绕的效果 任务一任务一 认识认识DIVDIV标签标签 清除浮动对左侧影响后的效果清除浮动对左侧影响后的效果任务一任务一 认识认识DIVDIV标签标签 清除浮动对右侧影响后的效果清除浮动对右侧影响后的效果任务一任务一 认识认识DIVDIV标签标签 包含浮动包含浮动div的容器将不会适应高度的容器将不会适应高度 任务
10、一任务一 认识认识DIVDIV标签标签 希望实现的效果希望实现的效果任务一任务一 认识认识DIVDIV标签标签盒子模型的定位盒子模型的定位广义的“定位”：要将某个元素放到某个位置的时候，这个动作可以称为定位操作，可以使用任何CSS规则来实现，这就是泛指的一个网页排版中的定位操作，使用传统的表格排版时，同样存在定位的问题。狭义的“定位”：在CSS中有一个非常重要的属性position，这个单词翻译为中文也是定位的意思。然而要使用CSS进行定位操作并不仅仅通过这个属性来实现，因此不要把二者混淆。static：静态定位，这是默认的属性值，也就是该盒子按照标准流（包括浮动方式）进行布局。relativ
11、e：相对定位，使用相对定位的盒子的位置常以标准流的排版方式为基础，然后使盒子相对于它在原本的标准位置偏移指定的距离。相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。absolute：绝对定位，盒子的位置以它的包含框为基准进行偏移。绝对定位的盒子从标准流中脱离。这意味着它们对其后的兄弟盒子的定位没有影响，其他的盒子就好像这个盒子不存在一样。fixed：称为固定定位，它和绝对定位类似，只是以浏览器窗口为基准进行定位，也就是当拖动浏览器窗口的滚动条时，依然保持对象位置不变。任务一任务一 认识认识DIVDIV标签标签 一个一个div设置为相对定位后的效果设置为相对定位后的效果 任务一任务一 认识认识DIVDIV标签标签 以右侧和下侧为基准设置相对定位以右侧和下侧为基准设置相对定位任务一任务一 认识认识DIVDIV标签标签 设置为相对定位前的效果设置为相对定位前的效果 任务一任务一 认识认识DIVDIV标签标签 两个兄弟两个兄弟div之一设置为相对定位后的效果之一设置为相对定位后的效果 任务一任务一 认识认识DIVDIV标签标签
