1. 程式人生 > >小程式開發中CSS錯誤集合,一直會更新

小程式開發中CSS錯誤集合,一直會更新

1.在flex佈局中,如果子元素也加上display:flex的css樣式,會導致子元素中的文字不能居中

 <view class="board">
    <view class="item">
    <text class="item-text">開發</text>
    </view>
    <view class="item">
    <text class="item-text">開發</text>
    </view>
     <view class="item">
    <text class="item-text">開發</text>
    </view>
    <view class="item">
    <text class="item-text">開發</text>
    </view>
    <view class="item">
    <text class="item-text">開發</text>
    </view>
    <view class="clear"></view>
  </view>


.board{
    display: flex;
    width:750rpx;
    border:1px solid #ddd;
    height:100rpx;
   
}
.item{
    display: flex;
    border:1px solid #ddd;
    width:146rpx;
    height:100rpx;
    text-align:center;
    line-height:100rpx;
    
}


2.為text的類中寫寬高樣式是不起作用的,倒是適合寫一些和text有關的效果,比如color、font-size、font-weight、font-family

.left-text{
    font-size:40rpx;
    color:8d8989;
    font-family:Microsoft Yahei;
}

3.flex佈局中,justify-content 用於設定或檢索彈性盒子元素在主軸(橫軸)方向上的對齊方式。align-items 屬性定義flex子項在flex容器的當前行的側軸(縱軸)方向上的對齊方式。

justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;
align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;


相關推薦

程式開發CSS錯誤集合,一直更新

1.在flex佈局中,如果子元素也加上display:flex的css樣式,會導致子元素中的文字不能居中 <view class="board"> <view class="item"> <text class="item-

值得記錄的(四)- 程式開發遇到的一些要點

最近在做商城小程式的會員中心模組專案。之前除了製作過簡單的翻譯小程式之外幾乎沒有做過小程式開發,開發的過程也是一個學習的過程,記錄一些在開發工程中值得記錄的。 getUserInfo 調整 呼叫前需要 使用者授權 scope.userIn

微信程式開發textarea文字域監聽字數限制與動態計算

微信小程式開發時常會有評論或者備註功能,都會用到文字域字元長度計算以及字元限制的功能,筆者把最簡潔易用的案例分享出來。學習之前先看微信官方API文件 https://mp.weixin.qq.com/debug/wxadoc/dev/component/textarea.html

微信程式開發— 圖片顯示錯誤:VM24966:2

VM24966:2 Failed to load image http://1042065718.debug.open.weixin.qq.com/pages/detail/detail/detail : the server responded with a status of 404

微信程式開發的二三事之網易雲信IMSDK DEMO

本文由作者鄒永勝授權網易雲社群釋出。 簡介 為了更好的展示我們即時通訊SDK強悍的能力,網易雲信IM SDK微信小程式DEMO的開發就提上了日程。用產品的話說就是: 雲信 IM 小程式 SDK 的能力演示 提供開發者小程式開發參考 換句話說就是在微信裡面通過

微信程式,開發幾個重要的知識點(加密解密,轉發,進入場景,session_key)

小程式的授權資訊:https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/authorize.html   小程式的系統引數和進入場景引數等:https://developers.weixin.qq.com/

微信程式開發的注意點

一、<view> 標籤與 <block> 標籤的區別 <view> 是一個元件,會在頁面上做渲染 <block>不是一個元件,它僅僅是一個包裝元素,只接受控制屬性,不會在頁面中做任何渲染 如下栗子,wx:else 是一個

關於微信程式開發的顯示個人資訊以及重置密碼功能

        最近我們學習了微信小程式中的顯示個人資訊以及重置密碼,因為是老師做好的介面,所以我們只需要搭好前臺頁面以及編寫好JS程式碼就可以了。以上是顯示個人資訊的頁面,包含了使用者的學號,姓名,系別,班級(因為是學生評教系統,所以顯示這些內容),可以通過點選重置進入到修

微信程式開發的那些事

背景 定義問題 歸結模型 需求分析 軟體開發 背景 最近一段時間,做了一個送禮品的小程式。中間也遇到了一些坑,今天我把它羅列出來,並附上自己的一些看法,作為後續開發的一些參考。 送禮的業務類似於微信紅包,只不過將微信的紅包替換成了實物禮品,並且

微信程式開發遇到的錯誤總結

1.tabBar不能正確顯示 建議先看看官方文件中多tabBar的說明:點選開啟連結 需要注意的是: 寫在pages陣列中的頁面,第一項代表小程式的初始頁面,這個頁面也必須是tabBar的第一項。後面的就無所謂了。tabBar 是一個數組,只能配置最少2個、最多5個 tab

微信程式開發走過的坑(二)

》》》遇到的坑 (3)註冊頁面的實現 需求:使用者點選註冊按鈕,進入註冊頁面,輸入註冊資訊,完成註冊動作。 動畫演示: 程式碼實現: register.wxml <!--註

微信程式開發列表頁載入下一頁以及下拉重新整理 實現方法

 微信小程式開發中列表頁載入下一頁以及下拉重新整理 實現方法,微信列表頁常用功能有下拉重新整理,上劃載入更多,怎麼實現呢? 直接上程式碼吧: 列表頁js global.p = 1 var url = getApp().globalData.API_URL +'/a

程式開發遇到的問題—彙總

小程式面試題1. bindtap和catchtap的區別是什麼?bind事件繫結不會阻止冒泡事件向上冒泡,catch事件繫結可以阻止冒泡事件向上冒泡2. Js陣列轉成換字串,強制轉換成整數及轉換成浮點數的函式分別是什麼?js提供了parseInt()和parseFloat()

程式開發獲取使用者頭像和暱稱

獲取使用者頭像和暱稱: <!--index.wxml--> <view class="container"> <view bindtap="bindViewTa

微信程式開發走過的坑(一)

》》》前言 2016年9月21日晚間,微信公眾平臺開始陸續對外發送小程式內測邀請。此時,便對微信小程式有了關注,打算學習、並開發一款小程式。期間因為有其他專案開發的原因,稍有中斷,然在前些天,終於將小程式的初版釋出,並稽核通過,下面文章中會把我在開發這個圖片類

微信程式開發常見問題的解決

在微信小程式的開發過程中,會遇到各式各樣的問題,本文主要是針對自己開發中遇到的問題,找到解決方案後的記錄總結。 1.控制元件中同時使用wx:if和wx:for導致無效的問題 這個問題是一個朋友問到的,場景是一個類似微信朋友圈的列表資料,通過伺服器的一個引

微信程式開發遇到的問題。總結

開發遇到問題: 1.image設定圖片的時候圖片在開發工具上面顯示,可是執行到手機上面不顯示。仔細檢視是不是先圖片的時候。設定路徑不小心在後面加了空格。 例如: 正確:手機上顯示 <image class="icon_tubiao" src="../../image/

微信程式開發常見問題及解決方法

本文章總結小程式開發中常見的錯誤問題。希望能幫助初學者少走彎路,避免類似的錯誤。 1:出現“指令碼錯誤或者未正確呼叫Page()”的錯誤提示。 解決方法:出現這個錯誤的原因通常是因為index.

程式開發的問題

tabBar配置如下:"tabBar": { "list": [{ "pagePath": "pages/index/index", "text": "品質優惠", "iconPath": "assets/images/鑽石.png", "selecte

微信程式開發的http請求總結

在微信小程式進行網路通訊,只能和指定的域名進行通訊,微信小程式包括四種類型的網路請求。 普通HTTPS請求(wx.request) 上傳檔案(wx.uploadFile) 下載檔案(wx.downloadFile) WebSocket通訊(wx.connectSocket) 這裡以介紹wx.request