盒子的浮动与定位.pptxVIP

3142边框 “盒子”与“模型”的概念探究设置内边距长度单位 前课复习：CSS盒子模型567盒子在标准流中的定位原则盒子之间的关系设置外边距 新课内容：盒子的浮动与定位21盒子的定位盒子的浮动 上一章介绍了独立的盒子模型，以及在标准流情况下的盒子的相互关系。 如果仅仅按照标准流的方式进行排版，就只能按照仅有的几种可能性进行排版，限制太大。 CSS的制定者也想到了排版限制的问题，因此又给出了若干不同的手段以实现各种排版需要，从而可以灵活地实现各种形式的排版要求。 本章介绍CSS中float和position这两个重要属性的应用。1 盒子的浮动 在标准流中，一个块级元素在水平方向会自动伸展，直到包含它的元素的边界；而在竖直方向和兄弟元素依次排列，不能并排。 使用“浮动”方式后，块级元素的表现就会有所不同。 CSS中有一个float属性，默认为none，也就是标准流通常的情况。 如果将float属性的值设置为left或right，元素就会向其父元素的左侧或右侧靠紧，同时默认情况下，盒子的宽度不再伸展，而是收缩，根据盒子里面的内容的宽度来确定。1.1 制作基础页面 浮动的性质比较复杂，这里先制作一个基础的页面，代码如下。 后面讲解将基于这个文件进行。!DOCTYPE html PUBliC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head titlefloat属性/title style type=text/css body{ margin:15px; font-family:Arial; font-size:12px; } .father{ background-color:#ffff99; border:1px solid #111111; padding:5px; } .father div{ padding:10px; margin:15px; border:1px dashed #111111; background-color:#90baff; } .father p{ border:1px dashed #111111; background-color:#ff90ba; } .son1{ /* 这里设置son1的浮动方式*/ } .son2{ /* 这里设置son1的浮动方式*/ } .son3{ /* 这里设置son1的浮动方式*/ } /style /head body div class=father div class=son1Box-1/div div class=son2Box-2/div div class=son3Box-3/div p这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字./p /div /body /html 1.2 设置第1个浮动的div 在上面的代码中找到： .son1{ /* 这里设置son1的浮动方式*/ } 将.son1盒子设置为向左浮动，代码为： .son1{ /* 这里设置son1的浮动方式*/ float:left; } 设置第1个div浮动时的效果1.3 设置第2个浮动的div设置前两个div浮动时的效果1.4 设置第3个浮动的div设置第3个div浮动时的效果1.5 改变浮动的方向改变浮动方向后的效果 div被挤到下一行时的效果 1.6 再次改变浮动的方向交换div位置时的效果 div被挤到下一行的效果1.7 全部向左浮动设置3个div浮动时的效果 div挤倒下一行被卡住时的效果1.8 使用clear属性清除浮动的影响设置浮动后文字环绕的效果 清除浮动对左侧影响后的效果 清除浮动对右侧影响后的效果1.9 扩展盒子的高度包含浮动div的容器将不会适应高度 希望实现的效果2 盒子的定位 广义的“定位”：要将某个元素放到某个位置的时候，这个动作可以称为定位操作，可以使用任何CSS规则来实现，这就是泛指的一个网页排版中的定位操作，使用传统的表格排版时，同样存在定位的问题。 狭义的“定位”：在CSS中有一个非常重要的属性position，这个单词翻译为中文也是定位的意思。 然而要使用CSS进行定位操作并不仅仅通过这个属性来实现，因此不要把二者混淆。 首先，对position属性的使用方法做一个概述，后面再具体举例子说明。 position属性可以设置为以下4个属性值之一。1.Static静态定位2.Relative