HarmonyOS Css樣式與普通HTML Css樣式之間存在的區(qū)別
前言
時光荏苒,不知不覺中從事鴻蒙開發(fā)已經大半年了,記得剛入職的時候那時候連DevEco Studio 這個開發(fā)者工具環(huán)境都裝不好,還是同事給裝好的環(huán)境,從零到一是個艱苦的過程,在實踐中不斷成長。下面言歸正傳進入今天的主題。
對于display屬性支持不一樣
鴻蒙css支持的屬性有:
普通css 支持的屬性有:
對于偽類選擇器和偽元素選擇器
- 鴻蒙css 不支持偽類選擇器和偽元素選擇器。
- 普通css 支持偽類選擇器和偽元素選擇器。
寬高方面的支持的值不太一樣
- 鴻蒙對于寬高方面的支持目前支持px 和百分比。
- 普通css支持的有px,em,rem,百分比,vw,vh,vm。
對于margin居中來說不太一樣
對于我們經常寫css來說一個最簡單的劇中方式莫過于margin:0 auto 這個寫法了但是鴻蒙不支持此種寫法。
對于boder屬性的支持不太一樣
在使用border設置屬性的時候HarmonyOS 必須按照指定的順序來寫(即使用簡寫屬性設置所有的邊框屬性,包含邊框的寬度,樣式,顏色屬性,順序設置為border-width、border-style、border-color,不設置時,各屬性值為默認值。)
border-style:
HarmonyOS 支持一下三種:
- dotted:顯示為一系列圓點,圓點半徑為border-width的一半。
- dashed:顯示為一系列短的方形虛線。
- solid:顯示為一條實線。
普通css 支持的屬性有以下幾種:
- dotted - 定義點線邊框。
- dashed - 定義虛線邊框。
- solid - 定義實線邊框。
- double - 定義雙邊框。
- groove - 定義 3D 坡口邊框。效果取決于 border-color 值。
- ridge - 定義 3D 脊線邊框。效果取決于 border-color 值。
- inset - 定義 3D inset 邊框。效果取決于 border-color 值。
- outset - 定義 3D outset 邊框。效果取決于 border-color 值。
- none - 定義無邊框。
- hidden - 定義隱藏邊框。
border-width:
普通css支持可以將寬度設置為特定大小(以 px、pt、cm、em 計),也可以使用以下三個預定義值之一:thin、medium 或 thick ,HarmonyOS 支持px。
border-radius:
- 普通css支持的數(shù)值有三種:px、%、em。
- HarmonyOS css 支持px。
對于background漸變的支持不太一樣
鴻蒙css支持線性漸變/重復線性漸變。
普通css 支持線性漸變(Linear Gradients)和 徑向漸變(Radial Gradients)。
獨屬于HarmonyOS的一些屬性
有一些是鴻蒙css獨有的屬性而普通css 沒有的。
注意事項
目前寫HarmonyOS 代碼布局用的最多的是flex布局,如果你需要換行布局請一定得添加上 flex-direction: column; 這個屬性。
總結
感覺鴻蒙在布局上以及標簽上跟微信小程序有的類似,但又不是完全相同,鴻蒙生態(tài)更強大,不過由于出來的時間不是很久所有很多開發(fā)者還在觀望和學習中,希望以后鴻蒙能越來越強大,更多的開發(fā)者加入這個陣營中。