微信小程式學習筆記 CSS點滴記錄

2021-07-24 19:44:02 字數 1081 閱讀 1928

對元素設定邊框,寫法如下:

border

: 1px solid #0ff;

設定border的順序為border-width、,border-style和border-color,width直接設定寬度,color直接設定顏色,style有多種選擇,如solid(實線)、dashed(虛線)等。直接設定border是對元素四邊全部設定,也可以用border-top、border-left等設定單獨某一邊。

如果內容溢位顯示區域的話,相應的設定,寫法如下:

overflow: hidden;  全域性設定

overflow-x: scroll; 左/右邊緣進行裁剪

overflow-y: visible; 上/下邊緣的裁剪

overflow-wrap: normal; 內容超過指定容器的邊界時是否斷行

overflow有hidden、scroll、visible、auto等屬性,預設是visible。

overflow-wrap有normal和break-word兩種,normal為允許內容頂開或溢位指定的容器邊界,break-word為內容將在邊界內換行。如果需要,單詞內部允許斷行

讓所有彈性盒模型物件的子元素都有相同的長度,忽略它們內部的內容。其實我感覺和安卓的weight有點像,下面舉個簡單的例子,就是左中右三個布局橫向展示,左右自適應寬度,中間區域擴充父類。**如下:

style="display:flex; flex-direction:row; margin-top:50px;height:30px">

style="background-color:#f0f;width:50px">

view>

style="background-color:#f00;flex:1">

view>

style="background-color:#ff0;width:40px">

view>

view>

執行結果如下:可以看到中間紅色設定flex:1之後會自適應擴充父類。

微信小程式學習筆記

1 background image 只能用網 絡url 或者base64 本地圖 片要用image 標籤才行 2 事件綁 定value 是乙個字串,需要在對應的 page 中定義 同名的函式。不然當觸 發事件的時候會 報錯。3 bind事件綁 定不會阻止冒泡事件向上冒泡,catch事件綁 定可以阻...

微信小程式學習筆記

主要用於 編寫和效果預覽,還可以進行 真機除錯 2 雲開發控制台 wxml 對應html,提供很多常用的元件。wxss 對應css,基本沒差別,目前體會最深的是尺寸單位rpx替代畫素單位px,能很方便的適配各種解析度的手機。js 同js。json 同json。pages 乙個頁面對應乙個資料夾,乙個...

微信小程式學習筆記

資料繫結 條件渲染和列表渲染 模板樣式匯入事件是檢視層到邏輯層的通訊方式。事件分為冒泡事件和非冒泡事件 冒泡事件 當乙個元件上的事件被觸發後,該事件會向父節點傳遞。非冒泡事件 當乙個元件上的事件被觸發後,該事件不會向父節點傳遞。json wxml js page.js page bindminus ...