|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
可以用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构架。在平时的练习中我们就遇到过 |
|