微信小程序-學習筆記5-UI佈局

flex佈局基礎、相對定位和絕對定位小程序

 

flex容器屬性:微信小程序

flex-direction決定元素的排列方向;flex-wrap決定元素如何換行;微信

flex-flow是 flex-direction和flex-wrap的簡寫,如flex-flow:row wrap;微信開發

justify-content元素在主軸上的對齊方式;align-items元素在交叉軸的對齊方式;工具

 

flex元素屬性:佈局

flex-grow當有多餘空間時,元素的放大比例;flex-shrink當空間不足時,元素的縮小比例;學習

flex-basis元素在主軸上佔據的空間;flex

flex是grow、shrink、basis的簡寫;視頻

order定義元素的排列順序;align-self定義元素自身的對齊方式;開發

 

rpx是動態的單位,會根據不一樣的手機進行調整

 

flex:0 1 50px;是flex-grow、flex-shrink、flex-basis的簡寫

 

樣式的屬性:尺寸、背景、邊框、邊距、文本、其餘(列表、內容、表格)

min-width、min-height、max-width、max-height

border-radius、border-width、border-style、outset

 

 

樣式選擇器:

(基本選擇器)類選擇器(.name{})、id選擇器(#name{})、元素選擇器(name{})、通配符選擇器(*{},微信開發者工具不支持)、包含選擇器(p c{})、子元素選擇器(p>c{})、鄰近兄弟元素選擇器(c+c{})、通用兄弟元素選擇器(c~c{})

 

(屬性選擇器)

(僞類選擇器)動態僞類選擇器(:link, :visited, :hover, :active, :focus)、狀態僞類選擇器(:enabled, :disabled, :checked)、選擇僞類選擇器(:first-child, :last-child, :nth-child(), :nth-last-child(), :nth-of-type(), :nth-last-of-type(), :first-of-type, :last-of-type, :only-child, :only-of-type)、空內容僞類選擇器(:empty)、否認僞類選擇器(:not)、僞元素(::first-line, ::first-letter, ::before, ::after, ::selection)

 

ps:來源於微信小程序開發文檔及極客學院視頻學習

相關文章
相關標籤/搜索