微信小程式 學習筆記5 UI布局

2022-01-19 17:28:32 字數 1027 閱讀 4263

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是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

樣式選擇器:

(屬性選擇器)

(偽類選擇器)動態偽類選擇器(: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)

微信小程式ui 布局

tip rpx根據機型不同的解析度自己調整符合解析度的值,動態 容器 1.flex direction 元素排列方式 container 2.flex wrap 排列不下換行 nowrap預設不換行 wrap換行 wrap reverse翻轉,第一行在下面 3.flex flow 前倆的簡寫 fle...

微信小程式布局學習筆記

flex容器屬性功能值 flex direction 決定元素的排列方向 row row reverse column column reverse flex wrap 決定元素換行方式 nowrap wrap wrap reverse justify content 決定元素在主軸上的對齊方式 f...

微信小程式 布局

傳送門 傳送門 語法 margin auto length 引數 margin 10px 11px 9px 8px 按順序分別代表物件與父容器的上 右 下 左的距離值為10px,11px,9px,8px。auto 值被設定為相對邊的值 length 由浮點數字和單位識別符號組成的長度值 百分數。百分...