float 的加深,文字顯示問題

2021-09-01 09:08:29 字數 1451 閱讀 2202

三、a,b相連的塊級元素,a設定為浮動後,b內文字顯示問題。

我簡單編寫了三個行塊框1,2,3。原本顯示如以下圖一

設定son1為左浮動並且加長son2的寬度,發現son1脫離文字流不佔據空間,並且覆蓋住了son2,而son2中文字被擠出div son2.如以下圖二

div son1設定浮動後就相當於設定了position:absolute,脫離文件流,但是不同的是,它脫離文件流並且向左或右移動,直到它的邊緣碰到包含框的邊緣。絕對定位則是相對於祖先元素中不是position 值為static的元素進行設定top、bottom、right、left。

如果三個son都設定左浮動,那麼son1 向左浮動直到碰到包含框,另外兩個框向左浮動直到碰到前乙個浮動框,如果如果包含框太窄,無法容納水平排列的三個浮動元素,那麼其它浮動塊向下移動,直到有足夠的空間,如果浮動元素的高度不同,那麼當它們向下移動時可能被其它浮動元素「卡住」。如以下圖三

塊級元素會獨佔一行,其寬度自動填滿其父元素寬度行內元素不會獨佔一行,相鄰的行內元素會排列到同一行裡,直到一行排不下,才會換行,其寬度隨元素的內容變化而變化,

一般情況下,塊級元素可以設定width,height屬性,行內元素設定width,height無效(注意,塊級元素設定了width寬度屬性後仍然是獨佔一行的)

塊級元素可以設定margin,padding屬性,行內元素的水平方向的padding-left和padding-right都會產生邊距效果,但是豎直方向上的padding-top和padding-bottom都不會產生邊距效果。

我在son1中設定了寬和高因為span標籤是行內元素所以並沒有起到作用。如以下圖四

當我把son1設定了左浮動後,寬和高起到了作用,span自動轉變為了行內元素。如以下圖五

css float屬性的出現就是解決文字可以包圍問題,所以當文字遇到浮動元素時不會被覆蓋會擠出浮動元素的外邊。在上圖圖五中「son2」文字被擠到下方是因為父元素設定了寬,父元素右側寬度撐不下文案。

文字過長,QLabel顯示不全的問題

問題描述 在使用qt進行介面設計的時候,拖動qlabel控制項到介面上後,由於qlabel的大小此時是固定的,所以在程式中要更改qlabel裡面文字的時候,如果文字比較長,就會發生文字被截斷的問題。分析和解決辦法 其實這個出現這個問題是因為qlabel的大小被固定了,或者是在ui設計的時候只是拖動了...

float帶來的問題

因為浮動定位不屬於正常的頁面流,所以當子元素都是浮動元素時,非浮動的父容器在顯示時不會考慮子元素的位置,這樣子父元素就會出現坍塌的現象。1.新增空元素在父容器末尾新增乙個空元素,並且清除浮動,如 html class layout class content div class content di...

cocos 中文字元顯示問題

在學習使用cocos中,經常會出現中文字元無法顯示問題,在windows上,最簡單的就是把帶有中文字元的頁面儲存為utf 8 編譯一下就可以看到中文字元的亂碼消失了。cocos在安卓平台下需要把unicode 轉換成utf 8編碼,一下提供乙個轉換函式 class tools else if w 0...