1樓:匿名使用者
postion:relative是子塊級元素面向父級元素的相對定位,定位關鍵字使用left/right/top/bottom。兄弟塊元素之間相對進行定位,但是position移動後,原位置依然保留。
而且隨後的兄弟塊元素定位基於被移走前的位置。float:right/left是子塊級元素流集合面向父級元素的定位,定位的關鍵詞使用margin/padding。
兄弟塊元素之間進行相對的定位均基於移動後的新位置進行重新渲染,可以重疊,原位置被清空。二者之中最大的差別就是位置保留。人們也就利用這種差異,可以做出css**的滑動門選單。
hover時取當前元素為保留位置,定義乙個relative時,沒有hover時使用float清空保留位置。比較示例中的3個樣式表,就可以發現:
li1li2li3
網頁佈局基礎(float and position)--問答
2樓:張三**
在包裹層設定margin屬性為auto時,不能同時設定float and position,否則auto失效。
定寬+margin:auto = 自動居中。
當div設定float:left時div盒子會向左貼近容器(或者父級盒子)同級別的div若沒有設定float則被擠開。呵呵。
第一種。 clear:poth;(left and righ)
第二種。 widh:100%(或者固定寬度); overflow:hidden
注:對於文字清除float可以加入br元素,此方法不建議使用。
我學到的東西
當設計頁面佈局是,發現改變乙個元素,頁面亂了,瞬間「頭大」。這是不要急,找到改變了什麼造成何種結果,一一解決!!!本節真是受益匪淺啊!)
給其乙個偏移量,red的盒子移動,寬度不變,把網頁撐開了也說明其還在標準文件流中。
對於相對定位元素,這些屬性的設定讓元素從預設位置移動。例如,top設定乙個值「20px」在乙個相對定位的元素上,這個元素會在原來位置向下移動「20px」。反之,「top」設定乙個「-20px」,這個元素會在原來的位置向上移動「20px」。
對於絕對定位和固定定位鮮紅,這些屬性指定了臘族元素與父元素邊緣之間的距離,例如,絕對定位的元素設定乙個「top」值為「20px」,將使絕對定位元素相對於其設定了相對定位的祖先元素頂部邊緣向下移動「20px」,反之,如果設定乙個「top」值為「20px」,將使絕對定位元素相對於其設定了相對定位的祖先元素頂部邊緣向上移動「20px」。(絕對定位的參考點是其祖先元素設定了「relative」穗團或者「absolute」值)。
why一般會把父包含塊設定position:relative。因為relative還在標準文件流中,相對穩定。
若設定absolute也可但此時本身已經脫離標準文件流。
當把乙個塊級元素設定position:absolute,並且沒有設定寬度時,此時元素的寬度會根據內容進行調節。
在css 中,用 float 和 position 的區別是什麼
3樓:書香學程式設計
vue實踐-css樣式position/display/float屬性對比使用。
css浮動佈局
4樓:黑科技
說浮動佈局,就得先知道文件流,文件流有正常文件流脫離文件流
例如01:結果:
分析:對div01設定了左浮動,使div01脫離了文件流,div01是在div02的上中陵蔽面一層,實際的div02還是佔據了一整汪咐行,div02的文字部分看著像被擠出來了,其實這就是文字環繞的實現(文字是英文時有點問題)。
例如02:只設定後面兩個div左浮動。
結果:賣州。
例如03:全部設定左浮動,會從左到右依次排列。(right的相反)注意這裡出現了父元素高度塌陷,height為0
2.浮動帶來的影響。
此外,浮動可以用來實現兩列布局或多列布局。
例如:結果:
css中float屬性和浮動有什麼區別
5樓:掃黃突擊辦
首先你要搞清楚行內元素和塊級元素的區別!以及相對定位和絕對定位的區別!絕對定位是基於相對定位的!但是浮動則是脫離了原來的文件流雲擠壓正常文件流的位置!
6樓:網友
看下面圖的解釋吧。
**如下。dfsssssssss
7樓:書香學程式設計
vue實踐-css樣式position/display/float屬性對比使用。
在css 佈局中,用 float 和 position 的區別是什麼
8樓:北漂碼農
兩者是有絕對的區別的,float是時元素浮動,而position是用來給乙個元素定位的。
1、float的定義和常見用法:
float屬性定義元素在哪個方向浮動。以往這個屬性總應用於影象,使文字圍繞在影象周圍,不過在 css 中,任何元素都可以浮動。浮動元素會生成乙個塊級框,而不論它本身是何種元素。、例項如下:
float屬相使得塊級元素的div可以在同一行並排,效果如下:
2、position定義和用法:
這個屬性定義建立元素佈局所用的定位機制。任何元素都可以定位,不過絕對或固定元素會生成乙個塊級框,而不論該元素本身是什麼型別。相對定位元素會相對於它在正常流中的預設位置偏移。
其屬相值有:
絕對定位的例項:
在css 佈局中用float 好還是用position 好分別有什麼優勢
9樓:因愛被叛無妻
要看情況。浮動和定位以後,元素就都沒有高度了 浮動的可以用clear:both 來清除浮動 定位的只能固定父元素高度。
所以,如果高度固定的,裡面的元素可以用position定位,好處是想定在什麼位置都可以 甚至是超出父級元素的範圍。而且不會影響其他的元素。
如果高度不固定。分左右排版或者左中右排版的,可以用float 然後用清除浮動來確定高度。
10樓:育知同創教育
float和position這兩者並沒有孰好孰不好的問題,兩者按需使用,各得所需的效果。
float從字面上的意思就是浮動,這種在印刷排版之類中可能解釋的更加貼切。float能讓元素從文件流中抽出,它並不佔文件流的空間,典型的就是**混排中文字環繞**的效果了。並且float這也是目前使用最多的網頁佈局方式。
不過需要注意的是清除浮動是可能需要注意的地方。並且如果要考慮到古老的ie6之類的還會有一些bug諸如雙邊距等等問題。
而position顧名思義就是定位。有以下這幾種屬性:static(預設),relative(相對定位),absolute(絕對定位)和fixed(固定定位)。
其中static和relative會佔據文件流空間,他們並不是脫離文件的。absolute和fixed是脫離文件流的,不會佔據文件流空間。
11樓:書香學程式設計
vue實踐-css樣式position/display/float屬性對比使用。
CSS佈局如何實現多行文字在固定高度容器內垂直居中
你具體看下這裡面的,我給你貼出來padding上下多少畫素,你設定的高度就響應的相減 現在我們要使這段文字垂直居中顯示!div 1 將多行文字放入 塊中2 為這個塊增加一個class類,test 注意 這個100px是容器高度的一半,修改下。3 固定在容器內垂直居中 其中line height行高可...
華為css和istack的區別,華為css叢集最少連線多少線纜
樓上的回答是什麼鬼 css叢集的連線方式 1 叢集卡連線 2 出廠定義的業務口連線 將lpu上的業務口配置為叢集物理成員埠後加入邏輯叢集埠,然後通過sfp 光模組和光纖或sfp 叢集線纜將叢集物理埠按照一定規則 交叉 連線起來,一個叢集埠中最多可以有32個物理叢集埠,在業務口的連線方式中又可以按照組...
CSS清除浮動問題,css如何清除浮動?
嗨哥們你可以這樣 在head上加,讓ie8執行ie7的標準 我暈,我試了一下,是有效的,因為就算我不寫上面那段,ie8也是有效地。你所指的margin 它本來就是想達到跟清除浮動一樣的效果 父div隨著浮動的子div擴充套件,包容子div。這 可用。只是它用了hack zoom 1 ie專有屬性 相...