新聞中心
你對CSS布局浮動(float)和定位(position)屬性的區(qū)別是否熟悉,這里向大家簡單介紹一下,postion:relative是子塊級元素面向父級元素的相對定位,定位關鍵字使用left/right/top/bottom,而float:right/left是子塊級元素流集合面向父級元素的定位,定位的關鍵詞使用margin/padding。

創(chuàng)新互聯(lián)公司成都網(wǎng)站建設按需定制,是成都網(wǎng)站營銷公司,為護欄打樁機提供網(wǎng)站建設服務,有成熟的網(wǎng)站定制合作流程,提供網(wǎng)站定制設計服務:原型圖制作、網(wǎng)站創(chuàng)意設計、前端HTML5制作、后臺程序開發(fā)等。成都網(wǎng)站營銷推廣熱線:13518219792
CSS布局浮動(float)和定位(position)屬性的區(qū)別和應用
postion:relative是子塊級元素面向父級元素的相對定位,定位關鍵字使用left/right/top/bottom。兄弟塊元素之間相對進行定位,但是position移動后,原位置依然保留。而且隨后的兄弟塊元素定位基于被移走前的位置。
float:right/left是子塊級元素流集合面向父級元素的定位,定位的關鍵詞使用margin/padding。兄弟塊元素之間進行相對的定位均基于移動后的新位置進行重新渲染,可以重疊,原位置被清空。
二者之中最大的差別就是位置保留。
人們也就利用這種差異,可以做出CSS代碼的滑動門菜單。
hover時取當前元素為保留位置,定義一個relative時,沒有hover時使用float清空保留位置。
比較示例中的3個樣式表,就可以發(fā)現(xiàn):
- *{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;}
li1 li2 li3
網(wǎng)頁名稱:CSS布局浮動(float)和定位(position)屬性的區(qū)別
轉載源于:http://www.dlmjj.cn/article/dhdgsch.html


咨詢
建站咨詢
