学习下CSS结构浮动(float)和定位(position)属性的区分和怎样利用
可以用display:inline的方法让两个子div并排,但是这样的话div的宽度设置将会失效（要把子div撑大只能考里面的元素）。[*]
[*]
明天看到有伴侣留言问浮动和定位有甚么区分，怎样利用？明天找了篇文章，讲的对照普通易懂，供人人参考
postion:relative是子块级元素面向父级元素的绝对定位，定位关头字利用left/right/top/bottom。兄弟块元素之间绝对举行定位，可是position挪动后，原地位仍然保存。并且随后的兄弟块元素定位基于被移走前的地位。
float:right/left是子块级元素流汇合面向父级元素的定位，定位的关头词利用margin/padding。兄弟块元素之间举行绝对的定位均基于挪动后的新地位举行从头衬着，能够堆叠，原地位被清空。
两者当中最年夜的不同就是地位保存。
人们也就使用这类差别，能够做出CSS代码的滑动门菜单。
hover时取以后元素为保存地位，界说一个relative时，没有hover时利用float清空保存地位。
对照示例中的3个款式表，就能够发明：
<!--<style>*{border:1pxsolid#eee;}body{border-color:#09f;}ul{list-style:none;width:800px;height:600px;margin:0auto;padding:10px;}li{float:left;}#li1{width:200px;height:200px;border-color:red;}#li2{width:200px;height:150px;border-color:green;margin-left:-20px;}#li3{width:200px;height:100px;border-color:blue;margin-left:-20px;}</style>--><!--<style>*{border:1pxsolid#eee;}body{border-color:#09f;}ul{list-style:none;width:800px;height:600px;margin:0auto;}li{position:relative;}#li1{width:200px;height:200px;border-color:red;top:10px;}#li2{width:200px;height:150px;border-color:green;top:-192px;left:180px;}#li3{width:200px;height:100px;border-color:blue;top:-344px;left:360px;}</style>--><style>*{border:1pxsolid#eee;}body{border-color:#09f;}#ul{list-style:none;width:800px;height:600px;margin:0auto;padding:20px;}#li1{width:200px;height:200px;border-color:red;position:relative;}#li2{width:200px;height:150px;border-color:green;float:left;margin-left:-20px;margin-top:-202px;}#li3{width:200px;height:100px;border-color:blue;float:left;margin-left:20px;margin-top:-202px;}</style><ulid=#id><liid=li1>li1</li><liid=li2>li2</li><liid=li3>li3</li></ul>
尺度之路www.ckuyun.com提醒：能够先修正部分代码后再运转
方便性：课外，我们了解到现在流行的LBS系统、PJBLOG、php下面的WP、MT，都是采用Div+css构架。在平时的练习中我们就遇到过 在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。 经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅. Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。 还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。 俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。 技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。 这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。
页:
[1]