Web全栈开发案例教程课件 第2章2.5 浮动和定位

2.2.5浮动盒子的浮动在标准流中，块级元素的盒子都是上下排列，行内元素的盒子都是左右排列，限制太大。所有盒子浮动

效果：相邻块级元素的盒子左右排列一个盒子浮动

浮动盒子被后面未浮动盒子中的内容所环绕，做出图文混排的效果左浮动一个盒子浮动和多个盒子浮动默认样式浮动样式HTML代码顺序：<div>左列</div><div>右列</div><p>……</p>浮动效果展示结论：通过CSS浮动布局，可以在不改变HTML代码的同时，调整盒子的显示位置。两个盒子的故事误差原因：左列进行浮动后，脱离了默认文档流，所以只剩右列的盒子。解决方法：同一层盒子的一起加浮动属性。我也浮动左浮动总结：一个盒子浮动后的特点（1）浮动后的盒子将以行内块元素显示，但宽度不会自动伸展。（2）浮动的盒子将脱离标准流，即不再占据浏览器原来分配给它的位置。（3）未浮动的盒子将占据浮动盒子的位置，同时未浮动盒子内的内容会环绕浮动后的盒子。2.多个盒子浮动的特点多个盒子都浮动后，就产生了块级元素水平排列的效果①多个浮动元素不会相互覆盖，一个浮动元素的外边界（margin）碰到另一个浮动元素的外边界后便停止运动。②若包含的容器太窄，无法容纳水平排列的多个浮动元素，那么最后的浮动盒子会向下移动。但如果浮动元素的高度不同，那当它们向下移动时可能会被卡住2.2.5浮动的应用举例1图文混排及首字下沉效果【例2-9】盒子浮动示例对img元素添加浮动属性，实现图文混排，对三个li元素添加浮动属性，实现左右排列2菜单的竖横转换方法一：设置所有a元素（导航项）浮动

#nava{

float:left;…}方法二：将所有a元素的display属性设置为inline-block

#nava{display:inline-block;…}

5.1.2清除浮动元素的影响clear:left|right|both|none表示左边、右边或两边不允许有浮动的元素。Box-3浮动且清除浮动Box-3清除浮动5.1.3清除浮动影响的方法1.清除来自子元素的浮动如果一个父元素内所有的子元素都浮动，一定要记得对这个父元素作清除浮动处理。方法：在所有子元素后添加一个清除浮动的元素清除浮动前清除浮动后5.1.3清除浮动影响的方法方法：在所有子元素最后添加一个清除浮动的元素。

<brclass="cls">在父元素内部的末尾添加一个伪元素.father:after{content:'';display:table;clear:both;}5.1.3清除浮动影响的方法如果一个元素前面的兄弟元素浮动，则可以对紧邻该浮动元素的后一个元素作清除浮动处理。或者增加一个元素专用于清除浮动

<divclass="son1">Box-1</div><div>Box-2</div> <brclass="cls"style="clear:both"> 5.1.3清除浮动影响的方法2.来自兄弟元素的浮动清除浮动前

清除浮动后<divclass="son1">Box-1<br/>Box-1</div><divclass="son2">Box-2</div><brclass="cls"style="clear:both"> <!--增加清除浮动的元素--><divclass="box3">Box-3</div><divclass="box4">Box-4</div>5.2.3新闻栏目框内容区域文本溢出的解决办法.list_oneli{ text-overflow:ellipsis; /*文本溢出则裁切*/ white-space:

nowrap; /*强制不换行*/overflow:

hidden; /*溢出内容隐藏*/}微博对话框一列固定，一列变宽的浮动实现浮动设置margin-left2.2.5定位属性position2.2.5定位属性position的取值定位属性将使元素进入一种特殊的布局模式

position:relative|absolute|fixed|static主要取值有3个：相对定位（relative）绝对定位（absolute）固定定位（fixed）偏移属性偏移属性是指top、left、bottom、right四个属性，它们的取值为像素或百分比#mydiv{ position:absolute; left:50%；

top:30px; }偏移属性仅对设置了定位属性的元素有效5.3.2相对定位的特点相对定位举例#Box2{ position:relative; left:15px; top:20px; }Box1Box3Box2top:20pxleft:15px相对定位使用相对定位的元素的会以标准流的定位方式为基础，然后使盒子相对于它原来的位置偏移指定的距离。相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。对元素设置：position:relative;，那么它将保持在原来的位置上不动。再设置top、left等属性值则元素将“相对于”它原来的位置发生偏移。相对定位的特点元素原来占据的位置仍然会保留，也就是说相对定位的元素未脱离标准流；因为是使用了定位属性的元素，所以可能和其他元素发生重叠。5.3.3相对定位的应用举例1鼠标滑过时向左下偏移的链接a:hover{ color:#f00; position:relative; right:2px;top:3px; }想一想还有其他方法也能实现这个效果吗 在hover伪类中改变元素的padding-top，或使用CSS3中变形效果中的translate属性值。2利用相对定位制作简单的阴影效果原理是在img元素外套一个外围容器，将外围容器的背景设置为灰色，作为img元素的阴影，同时不设置填充边界等值使外围容器和图片一样大，这时图像就正好把外围容器的背景完全覆盖。再设置图像相对于原来的位置往左上方偏移几个像素，这样图像的右下方就露出了阴影盒子右边和下边部分的背景，看起来就是img元素的阴影了

相对定位制作简单的阴影效果img{

padding:6px; border:1pxsolid#465B68;

background-color:#fff;

position:relative; left:-5px; top:-5px; }div.shadow{ background-color:#ccc; float:left; }<divclass="shadow"><imgsrc="works.jpg"width="150"height="140"/></div>3网页布局的相对定位水平居中法设置wrap的左边框移动到浏览器的正中央，这是通过left:50%实现的，这样就找到了浏览器的中线，再使用负边界法将盒子的一半宽度从中线位置拉回到左边。

想一想：如果把#container选择器中（left:50%;margin-left:-380px;）改为（right:50%;margin-right:-380px;），还能实现居中吗？拉回一半宽度网页#wrap{position:relative;width:760px;left:50%;margin-left:-380px;}思考相对定位和浮动有哪些异同：元素宽度都会自动收缩元素在标准流中的位置会保留相对定位可在原位置上发生偏移，浮动不可以能否同时设置元素浮动和相对定位？可以5.4绝对定位1.绝对定位－不设置包含框em{ background-color:#0099FF;

position:absolute; left:60px；

top:30px; }2.绝对定位－设置包含框包含框：是指距离绝对定位元素最近的且设置了定位属性的父级元素的盒子。如果它所有的父级元素都没设置定位属性，那么包含框就是浏览器窗口对em元素的父级元素p设置定位属性，使p元素成为em元素的包含框，这时，em元素就不再以浏览器窗口为基准进行定位了，而是以它的包含框p元素的盒子为基准进行定位，

绝对定位－设置包含框p{ background-color:#dbfdba; padding:25px;

position:relative; border:2pxsolid#6c4788;}em{ background-color:#0099FF;

position:absolute;

left:60px; top:40px;}

子绝父相绝对定位－以包含框为基准定位lefttop相对定位的作用设置元素为相对定位的用途：一是让元素相对于原来的位置发生位移，同时不释放它原来占据的位置；二是让元素的子元素以它为定位基准进行定位，同时它的位置保持不变，这时相对定位的元素成为包含框，一般是为了帮助里面的元素进行绝对定位。2.无包含框无偏移的绝对定位特点：将保持在它原来的位置上不动，但不占据原来的位置要使它以原来的位置为基准，进行偏移，可设置margin属性（不能设置偏移属性）。em{ background-color:rgba(0,163,255,.5); position:absolute; left:0; top:0; /*删除偏移属性*/ margin:-6px00-10px; /*添加margin属性*/} 相对定位和绝对定位的比较相对定位relative绝对定位absolute定位基准以它自己原来的位置为基准以距离它最近的设置了定位属性的父级元素为定位基准，若它所有的父元素都没设置定位属性，则以浏览器窗口为定位基准原来的位置还占用着原来的位置，未脱离标准流不占用其原来的位置，已经脱离标准流，其它元素就当它不存在一样5.4.2绝对定位的应用网页中的绝对定位元素举例

1制作缺角的导航条缺角的导航条，是一个利用定位基准和绝对定位技术结合的典型例子缺的这个角是通过一个元素的盒子叠放在导航选项盒子上实现的

首页中心简介常用下载

政策法规第一步：写结构代码用a元素的盒子做导航条，选b标记做三角形，它的内容为空，以便利用它的边框做三角形。<divid="nav4"> <ahref="#"><b></b>首页</a> …… <ahref="#"><b></b>技术支持</a></div>

作为钩子（hook）起到挂CSS效果的作用2制作中英文双语导航条把导航项的中文写在<b>标记中，通过在默认状态下隐藏b元素，就只能看到英文的文字了。当鼠标滑过时，为了让中文遮盖住英文，必须设置b元素为绝对定位，这样b元素的盒子就会覆盖在a元素上<divid="nav4"> <ahref="#"><b>首页</b>Home</a>……<ahref="#"><b>联系我们</b>Contact</a></div>小提示窗口<p>Web前台技术：<ahref="#"class="tip">Ajax<span>Ajax是一种浏览器无刷新就能和web服务器交换数据的技术</span></a>技术和<ahref="#"class="tip">CSS<span>CascadingStyleSheets层叠样式表</span></a>的关系</p>关键代码a.tip{ color:red; text-decoration:none;

position:relative;}a.tip:hoverspan{ display:block; position:absolute;

top:15px; left:-30px; width:100px;background-color:#424242; color:#fff; padding:10px;z-index:9999;}a.tipspan{display:none;}a.tip:hover{cursor:hand;z-index:999;}制作纯CSS的下拉菜单由于下拉菜单在弹出时是浮在网页上的，所以放置下拉菜单的元素必须设置为绝对定位元素，而且下拉菜单位置是依据它的导航项来定位的，所以导航项应该设置为相对定位当鼠标滑到导航项时，显示下拉菜单，当鼠标离开时，设置下拉菜单元素的display属性为none，则隐藏下拉菜单第一步写结构代码下拉菜单采用二级列表结构，第一级放导航项，第二级放下拉菜单项。首先写出它的结构代码<ulid="nav">

<li><ahref="">文章</a>

<ul><li><ahref="">Ajax教程</a></li> <li><ahref="">SAML教程</a></li><li><ahref="">RIA教程</a></li><li><ahref="">Flex教程</a></li>

</ul> </li>……第二步使导航项水平排列设置第一层li为左浮动，这样导航项就会水平排列，同时去除列表的小黑点、填充和边界，再设置导航项li为相对定位，让下拉菜单以它为基准定位。

ul#nav{ padding:0; margin:0; list-style:none;}li{ float:left; width:160px;

position:relative;}

第三步设置下拉菜单liul设置下拉菜单为绝对定位，往导航项下偏移21像素。平时导航项未被访问时应隐藏下拉菜单ul，所以ul默认值是不显示。liul{ display:none; position:absolute; top:21px; }再添加交互，当鼠标滑过时显示下拉菜单ul。li:hoverul{ display:block;}第四步用CSS样式美化下拉菜单ullia{ display:block; font-size:12px;

border:1pxsolid#ccc; padding:3px;

text-decoration:none; color:#777;}ullia:hover{ background-color:#f4f4f4;}下拉菜单制作完成想一想：如果把上述选择器中的position:relative;和position:absolute;都去掉还会有上面的下拉菜单效果吗？会出现什么问题呢？5.制作图像放大效果在电子商务购物网站中，常常会以缩略图的方式展示商品。当浏览者将鼠标滑动到商品缩略图上时，会把缩略图放大显示成商品的大图，通常还会在大图下显示商品的描述信息。分析：商品的缩略图的排列可以使用标准流方式排列，但商品的大图要以缩略图为中心进行放大，所以得以缩略图为定位基准，因此商品的缩略图应设置为相对定位。而商品的大图是浮在网页上，所以是绝对定位元素。在默认情况下，商品的大图是不显示的，当鼠标滑到缩略图上时，就显示商品的大图5.课程展示框思路：用一个div元素表示课程展示框，在该div中插入一个img元素和一个类名为show的元素，用于放置文本。由于show元素要叠放在img元素上方，因此设置show元素绝对定位，把外层的div元素设置为相对定位，作为它的定位基准。当鼠标悬停时，改变show元素的top属性，使它向上伸展

固定定位固定定位固定定位元素不会随着网页的滚动而滚动百度搜索页顶部的搜索栏，返回顶部按钮等。固定定位举例下拉时网页头部转变成固定定位

与定位属性有关的CSS属性z-index属性z-index属性：改变元素的叠放次序z-index值大的元素的盒子会叠放在上面5.4.5overflow属性overflow属性设置元素盒子中的内容如果溢出是否显示

overflow:

visible|hidden|scroll|autovisiblehiddenscrollautooverflow的应用想一想：下面的网页用到了overflow吗用overflow属性清除浮动的影响overflow属性可清除子元素浮动对父元素的影响.father{ background-color:#ffff99; border:1pxsolid#111111;

overflow:auto;

}<divclass="father"> <divclass="son1">Box-1</div></div>4.clip属性img{ clip:rect(20px,auto,auto,20px);

position:absolute;/*clip属性只能用在绝对定位元素上*/}5.4.6vertical-align属性1.问题：怎么实现多行文本垂直居中？

vertical-align:middle表示垂直居中。但是该属性对块级元素无效

div{…display:table-cell;vertical-align:middle; }2.小图标与文本横向对齐

img{vertical-align:-8px;}

3.实现上标或下标文字

sub{vertical-align:sub;font-size:smaller;}

5.5CSS分栏布局CSS网页布局的步骤用CSS对网页进行布局的基本步骤如下：①将页面用div分块（页面标题和栏目标题也可用h1或h2元素）；②通过CSS设置各块的大小（利用width和height属性）和位置（利用padding和margin属性），以及相互关系（是否浮动或定位）③如果该块中有图像，则通过设置该块的背景图像实现，如果还有背景颜色，也通过背景设置④在网页的各大div块中插入作为各个栏目框的小块5.5.1分栏布局的种类网页布局可分为固定宽度布局 可变宽度布局三列固定宽度可变宽度单列变宽等比例单列固定中列固定侧列固定中列变宽侧列变宽5.5.2固定宽度布局5.5.2网页居中的方法text-align法：body{text-align：center；mini-width：990px；}

#wrapper{margin：0auto；text-align：left；width：990px；}marginauto法：#container{margin:0auto;width:980px;}#container{margin:0auto;width:85%;}相对定位法：#container{position:relative;width:980px;

left:50%;margin-left:-490px;}5.5.31-3-1版式网页布局1-3-1版式网页布局有以下四种方法：三列浮动法；margin负值法；绝对定位法；左右列浮动法写总体结构代码<divid="header">header页头</div><divid="container"> <divid="left">left栏</div> <divid="main">main栏</div> <divid="right">right栏</div></div><divid="footer">footer页尾</div>5.5.41-2-1可变宽度布局5.5.41-2-1可变宽度布局1.两列