Qt Qt樣式表總結(四) CSS盒子模型

2021-09-30 15:50:25 字數 1429 閱讀 1600

官網:

【qt】qt樣式表總結(一):選擇器

【qt】qt樣式表總結(二):衝突和命名空間

【qt】qt樣式表總結(三):qobject 屬性

盒子模型

先來張,引自qt官網

使用樣式表時, 每個小部件都被視為具有四個同心矩形的框: 邊距矩形、邊框矩形、填充矩形和內容矩形。

在樣式表css中,每個控制項都可以看成是由四個同心的矩形框組成。

從外到內依次為:margin邊緣、border邊框、padding填充、content內容;

預設情況下,margin邊緣、border邊框、padding填充的值為零,即這四個框剛好重合。

margin

margin邊緣指邊框到其他控制項的一片留白,可以設定邊緣寬度(margin),也可以單獨設定每個邊緣的寬度(margin-top、margin-right、margin-bottom、 margin-left)

border

border,邊框屬性比較多,詳細的內容參見官網,這裡只淡淡常見的屬性設定。

邊框的寬度、樣式和顏色border,如qlineedit ;

同樣可以分別各個的樣式,border-top、border-right、border-bottom、border-left;

單獨設定邊框顏色:border-color ,border-top-color、border-right-color、border-bottom-color、border-left-color;

設定邊框角的半徑:border-radius,border-top-left-radius等

padding

padding是指在內容和邊框中間填充的留白,padding的屬性只有寬度,使用padding,或單獨設定每個填充的邊寬padding-top, padding-right, padding-bottom, and padding-left

注意事項

設定背景影象時,是使用background-image還是border-image?

background-image的缺點是不能縮放影象,可以剪下(background-clip)和重複( background-repeat )內容,這一般不是我們想要的效果。大多數情況下是想實現背景圖縮放成控制項大小,可以使用border-image。如果在兩者同時使用的情況下,border-image將會覆蓋在background-image上

image屬性

image繪製的影象在border-image之上,一般情況下也不能縮放。手冊中說,在iamge中指定 svg屬相,可以達到隨控制項縮放的效果。

使用方法是製作svg格式的qicon,然後載入:image:url(:/images/icon.svg)。

這個沒有親自測試,有用過的大神指點下

CSS樣式表總結

css顯示 css 是 web 標準中的表現標準,專門用來對網頁標籤進行布局和設定樣式的一門語言,目前使用css3,css 又名層疊樣式表.css 的位置 1.內聯樣式 將樣式表寫在標籤的 style 的屬性中 2.內部樣式 將樣式表也在 head 中的 style 中的標籤中,只可用於當前的 ht...

Qt Qt樣式表總結(一) 選擇器

注釋 qss檔案中使用 來注釋 樣式表由樣式規則序列組成。樣式規則由選擇器和宣告組成。選擇器指定受規則影響的部件 宣告指定應在小部件上設定哪些屬性。如 qlabel qlabel為樣式規則中的選擇器,大括號中的 color white 為宣告 這幾話的意思是 將qlabel及其子類中前景色 字型 設...

css 樣式表分類總結

1,外部樣式表 當樣式需要應用於很多頁面時,外部樣式表將是理想的選擇。在使用外部樣式表的情況下,你可以通過改變乙個檔案來改變整個站點的外觀。每個頁面使用 標籤鏈結到樣式表。標籤在 文件的 頭部 1 2 3 head linkrel stylesheet type text css href myst...