资源预览内容
第1页 / 共12页
第2页 / 共12页
第3页 / 共12页
第4页 / 共12页
第5页 / 共12页
第6页 / 共12页
第7页 / 共12页
第8页 / 共12页
第9页 / 共12页
第10页 / 共12页
亲,该文档总共12页,到这儿已超出免费预览范围,如果喜欢就下载吧!
资源描述
CSS之定位总体介绍下:CSS有3中定位机制,普通流【各元素按照HTML文档的顺序依次显示】,浮动,绝对定位。1. 相对定位position = relative.顾名思义:相对与自己定位。相对定位,元素设置left,top,bottom,right会相对与自己原来的位置,移动自己的位置。不管是否移动,它所占据的空间仍然是原来的空间【一定占据了原来的空间】。移动元素可能会覆盖其他的元素。2. 绝对定位 position = absolute.定位相对于它的祖先定位。仔细观察上图,定位是你根据它的祖先,不是它原来的位置。祖先:包含绝对定位元素的最近一层设置position:relative;position:absolute的元素;没有就根据文档定位,完全脱离文档流,不占据一点空间【相对定位是占据空间的】,所以可以设置z-index【这个属性知道用处吧】属性。由于相对定位和绝对定位配合使用,用处太大,写几个例子给你看看。帮助理解的小例子:例子1:/*效果图*/以前是不是想在导航条某个位置显示下时间。Now you can do it !/*/ 2013-07-26 /*/ #nav width: 60%; height: 50px; border: 1px solid red; position: relative; #nav #date height: 20px; border: solid 1px #ccc; position: absolute; right: 3px; bottom: 3px; 例子2:/*效果图*/*/ 用户信息 Username: password: email: the emails format incorrect ! 会不会觉得使用fieldset,legend,label很奇怪,建议在没有很好的方法前,你的所有的表单模仿上面的代码。不想要fileld那个框,可以这么写用户信息,fieldsetborder:none;/*/ form width: 30em; form div position: relative; padding: 0.4em 0; form div label display: block; width: 8em; float: left; form div input width:10em; form div em position: absolute; left: 18em; padding-left: 12px; background: url(imgs/error.png) no-repeat left top; /*/3. 固定定位:绝对定位的一种特殊情况,特点与绝对定位一样,只不过永远显示在视图的固定位置【IE6及以下版本不兼容此属性,问题不大,不常用且不兼容不会产生布局位图】4. 浮动float浮动的框可以自由移动,它的外边缘遇到其包含框或者另一个浮动框边缘。上图框1把框2就给挡住了。Ok.睡了一觉,继续。上面四幅图需要再次强调设置了浮动定位的框,会向左或者右浮动,但是只有遇到包含框,或者另一个浮动框才会停下来。仔细看一下,嗯,l 只有遇到包含框也就说不会超过包含框这对布局很有利,最起码不会乱跑,肯定在包含框内部【对包含框没特许要求,绝对定位有】。l 或者另一个浮动框也就是说,你需要一个浮动框向左浮动停在另一个框旁边时,需要保证停靠框也就浮动的。1) 文字环绕图片/*效果图*/*/*/嗯,看了上面的例子,是不是觉得这例子能拿出手了。嗯,看html代码,很简洁也很明确的划分的新闻的要素,例如需要一个标题,一张图片,一段介绍。2) 好了,学完了浮动地位,相对地位,绝对定位。你已经可以设计任何页面了。假设我需要一个类似这样的页面。【很常见的页面】我会给你剖析上面的页面,不要觉得简单,仔细看。/*/*/看完上面的例子,你可能觉得自己能,但是别这么想,自己试试。你可能会发现什么。下面一节将介绍为什么overflow:hideen会出现这么频繁。3) 浮动带来的问题/*/预期:#one的盒子里面包含一个.c的盒子/*/实际情况,#one的盒子并没有包住,而是感没有东西。嗯因为里面的盒子是浮动的,所以影响了正常布局。/*/解决方案:l Overflow:hidden【父容器添加overflow:hidden,这并不是完美的解决方案,因为overflow主要用于设置当子元素内容超出父元素是显示滚动条还是隐藏。当子元素内容超出父元素范围时设置此元素就会隐藏某些子元素(当然如果你子元素设置了正确尺寸,那就没问题)。】l 在父元素上添加float属性,也会显示正确,但是父元素设置成浮动又可能会带来一些问题,也需要注意。l 添加专门用于清除浮动的元素嗯以上几种方法,除了第二种我觉得可能会引发不可思议的事情,其他的方案都是不错的选择。现在你应该明白,在上面那个主内容分两栏的页面,他们的父div为啥会有overflow这个属性了吧。如果没有的话,父元素觉得他是空的,导航和页脚就碰到一起了,因为他们感觉不要浮动元素【专业话讲:设置了元素浮动他们就脱离了文档流】。总结:l 学完了布局,你现在要能做到布局任何页面,水平放置的盒子肯定是使用了float,具体到小模块,绝对定位与相对定位可以帮你随心所欲的定位。l 一定要知道浮动元素对于父元素的影响,以及如何解决这种影响。l 教程中clear属性貌似是丢了,用于清除浮动,可以查下w3c。l 强调一下,记得试验所有出现的例子,以及在看的过程中出现的想法。2013年7月26日 17:40:36
网站客服QQ:2055934822
金锄头文库版权所有
经营许可证:蜀ICP备13022795号 | 川公网安备 51140202000112号