盒子的浮动与定位

盒子的浮动与定位主讲：毛丽娟盒子的浮动-float属性css1中首先提出浮动的概念。float属性的设置会打破原标准流中盒子的默认布局方式。浮动不完全是定位，也不是标准流。案例1-页面效果制作一个包含4个div块（其中一个父块，三个子块）的基础页面，页面效果如下：案例1-结构代码bodydivclass=fatherdivclass=son1Box-1/divdivclass=son2Box-2/divdivclass=son3Box-3/divp这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字./p/div/body案例1-样式代码body{margin:15px;font-family:Arial;font-size:12px;}.father{background-color:#ffff99;border:1pxsolid#111111;padding:5px;}.fatherdiv{padding:10px;margin:15px;border:1pxdashed#111111;background-color:#90baff;}案例1-样式代码.fatherp{border:1pxdashed#111111;background-color:#ff90ba;}.son1{/*这里设置son1的浮动方式*/}.son2{/*这里设置son1的浮动方式*/}.son3{/*这里设置son1的浮动方式*/}练习1-设置向左浮动的div在案例1的代码中找到.son1{/*这里设置son1的浮动方式*/}将.son1盒子设置为向左浮动，代码为：.son1{float:left;}案例2-观察页面效果box2的左边框与box1的左边框重合设置float属性后，box1脱离标准流。案例2-小结没有设置盒子的浮动属性float，或将float的值设置为none时，盒子的排列情况遵循标准流：块级元素在水平方向自动撑满，竖直方向和兄弟块依次排列。使用“浮动”方式后，块级元素的表现将会有所不同：float值为left或right时，元素会向其父元素的左侧或右侧靠紧，盒子的宽度不再伸展，而是根据盒子的内容宽度进行收缩。练习11.修改案例2，指定3个子div的宽、高皆为1cm。2.分别为3个子div设置不同的浮动属性，观察页面效果。3.体会“标准流”和“非标准流”中盒子定位的不同。练习2修改案例2，得到如下效果：box-3的左边框线在什么位置？这段距离是什么因素造成的？练习2-要点分析box-3的左边框线在什么位置？box-1与box-2之间为什么会有一段距离？box-3的左边框与box-1的左边框重合。box-1与box-2之间的距离是由它们的margin决定的。练习3修改练习2，尝试实现如下效果：这段距离是什么属性造成的？练习3-要点分析在练习2的基础上，将box-3改为向左浮动，即：.son3{/*这里设置son3的浮动方式*/float:left;}float小结标准流布局浮动后的布局分析：在标准流中，即使设置了盒子的较小尺寸，块级元素依然遵循标准流默认的布局规则；当出现浮动元素后，被浮动的框1脱离了标准流，原先在父元素中占据的标准流空间也随之关闭（如果父盒子是未设置高度的，此时会发现父盒子的高度也随之减小）。float小结-浮动元素的叠放次序分析：左图中，浮动后的框1会覆盖标准流中的元素；float小结-行内框与块级框、行框回顾“图文混排”案例，理解为何img元素设置为右浮动后，段落文字就会环绕图片？float小结-行内框与块级框、行框网页上所有元素都会显示成不同的框：块级元素会形成块级框；行内元素会形成行内框；有多行文本的块级元素，每一行内容在水平方向上形成的框，称之为行框。块级框和行内框的范围可以通过设置元素的边框属性来显示，而行框是无法显示的，它只是一个虚拟的矩形框。标准流中行内框的尺寸由内容决定，不受width和height属性的影响。在没有其他因素影响的时候，行内框等于内容区域，而设定行高则可以增加或者减少行内框的高度。回顾“图文混排”案例中的“首字放大下沉”效果，思考为何会出现首字显示不完整？float小结-首字下沉完整显示的解决方案一：设置较大的line-height值；方案二：设置首字所在span元素的padding-top值；练习4-float实现分栏练习4-float实现分栏练习4-要点分析页面结构为3个div；为3个div建立类别选择器，主要样式如下：.class1{float:left;width:30%;}如果不设置盒子的宽度属性，很容易发生某个盒子被挤下去的情况。练习5将box-3改为向右浮动，观察页面效果。练习5-页面效果练习6将练习5浏览页面的窗口慢慢调整变窄，box-2与box-3之间的距离会越来越小，直到二者相接触。如果继续把浏览器窗口变窄，段落文字会被挤到下一行中。练习6-页面效果如果希望box-3被挤到下一行，该如何改？小结在HTML中确定内容的逻辑位置时，可以把内容重要的放在前面，相对次要的放在后面。这样做的好处是，访问网页时，重要的内容先显示出来，此外，搜索引擎是不管css的，只会根据网页内容的价值来确定页面的排名，对于一个HTML文档，越靠前的内容，搜索引擎会赋予越高的权重。练习7将box-2改为向右浮动，box-3改为向左浮动：小结通过使用CSS布局，可以实现在HTML不做任何改动的情况下，调换盒子的显示位置，这样我们就可以在写HTML的时候，通过CSS来确定内容的显示位置。练习8修改练习7代码，使得文字左右两侧同时围绕浮动的盒子。float小结案例3-使用clear属性清除浮动的影响clear属性的值可以是left、right、both或none，它表示行框的哪些边不应该挨着浮动框。案例3-样式代码局部修改练习7样式代码如下：.fatherdiv{padding:10px;margin:5px;border:1pxdashed#111111;background-color:#90baff;}案例3-样式代码.fatherp{border:1pxdashed#111111;background-color:#ff90ba;clear:left;}练习9-clear的属性值如何修改案例3，能达到如右效果？练习10在练习9的基础上，删除段落p的内容，观察页面效果：练习10-小结一个div的范围是由它里面的标准流内容决定的，与里面的浮动内容无关。box-1，box-2，box-3经过float属性的设置，都已经脱离了标准流，因而才会被它们的父div”抛弃“。父div此时的页面范围是由padding和border构成的。案例-两栏布局案例-两栏布局结构代码divclass=newsimgsrc=ba1.jpgwidth=158height=162/p这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字./pdivclass=clear/div/div如果没有这对div标记，父盒子将显示为1条边框线。案例-两栏布局样式代码.news{background-color:gray;border:solid1pxblack;}.newsimg{float:left;}.newsp{float:right;width:70%;margin-left:10px;}.clear{clear:both;}p标记的float属性值也可以改成left；如果没有width属性将会出现p标记内容被img内容挤到下一行。案例-小结练习-float属性的简单应用（使图像浮动于段落右侧）练习-使图像浮动于段落的右侧。向图像添加边框和边界。练习-带标题的图像浮动于段落右侧练习-段落首字母浮动于左侧练习-float简单布局盒子的定位广义的”定位“：要将某个元素放到某个位置的时候，这个动作可以称为定位操作，可以使用任何CSS规则来实现，这就是泛指的一个网页排版中的定位操作，使用传统的表格排版时，同样存在定位的问题。狭义的”定位“：在CSS中有一个非常重要的属性position，也是定位的意思，然而使用CSS定位并不仅仅通过这个属性来实现。CSS的定位属性position属性值概述static：静态定位，默认的属性值。也就是该盒子按照标准流（包括浮动方式）进行布局。relative：相对定位。使用相对定位的盒子的位置常以标准流的排版方式为基础，然后使盒子相对它在原本的标准位置偏移指定的距离。相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。position属性值概述absolute:绝对定位。盒子的位置以它的包含框为基准进行偏移。绝对定位的盒子从标准流中脱离。这意味着它们对其后的兄弟盒子的定位没有影响，其他的盒子就好像这个盒子不存在一样。fixed:固定定位。和绝对定位类似，只是以浏览器窗口为基准进行定位，也就是当拖动浏览器窗口的滚动条时，依然保持对象位置不变。案例3-static定位下面是没有设置任何position属性的页面效果，相当于使用static方式。案例3-样式代码body{margin:20px;font:Arial12px;}#father{background-color:#a0c8ff;border:1pxdashed#000000;padding:15px;}#block1{background-color:#fff0ac;border:1pxdashed#000000;padding:10px;}案例3-结构代码bodydivid=fatherdivid=block1Box-1/div/div/body相对定位relative使用相对定位，除了要将position属性值设置为relative外，还需要指定一定的偏移量。水平方向的偏移量由left和right属性指定。竖直方向的偏移量由top和bottom属性指定。案例4-一个子块的情况修改案例3的样式代码，如下：#block1{background-color:#fff0ac;border:1pxdashed#000000;padding:10px;position:relative;/*relative相对定位*/left:30px;top:30px;}案例4-页面效果练习：将偏移值设为偏右30px，偏下30px，观察页面效果。案例4-小结使用相对定位的盒子，会相对于自身原本的位置，通过偏移指定的距离，到达新的位置。使用相对定位的盒子仍在标准流中，它对父块没有影响。案例5-两个子块的情况修改案例3的结构代码，为父div的内部增加一个子div，修改如下：bodydivid=fatherdivid=block1Box-1/divdivid=block2Box-2/div/div/body案例5-两个子块的情况修改案例3的样式代码，不设置任何子盒子的偏移，修改如下：#block1{}#block2{}案例5-页面效果练习11修改案例5的样式代码，先将box-1盒子的CSS设置如下：#block1{position:relative;bottom:30px;right:30px;}观察页面效果。练习12将子块box-2也进行相应的定位设置，如下：#block2{