css3手機開發

2021-08-14 00:04:51 字數 1638 閱讀 3477

1 .justify-content: center 縱向方向居中

2. text-align: center  垂直方向居中

align-item: center  水平居中

2.1 display:table;多行或者單行垂直居中

3.vertical-align:top 頂部對齊 在需要對齊的元素中新增

4.display:inline-block 行內併排 兩個併排的元素都需要加該樣式 span也需要加該屬性 才佔位

5.font-size 刪除行內的空白樣式 在父元素加  子元素需要加字型大小 否則繼承父的屬性

6. white-space:nowrap;overflow:hidden;text-overflow:ellipsis 超出部分以...顯示

7.clearfix:

display:inline-block

&:after//after 後面不管有沒有內容必須加這句content:"."

ie8以上用的是after 以下用的是zoom 是偽元素 在頁面中是選不中的 是佔據位置的 被元素包裹的 但是可以新增css

display:block

content:"."

height:0

line-height:0

clear:both

visibility:hidden

8.display:flex; flex:1; 在vue中喲乙個postcss工具會將**分解 不需要寫多個**處理相容性 

8.1 flex:0 0 80% 表示寬度80px 意思為 等分 縮放情況 佔位空間 在安卓手機上需要加上width:80px;否則會有相容問題

8.2 display:table-cell  乙個格仔

8.3 在flex布局裡面 vertical-align

:middle 垂直居中

9.backdrop-filter:blur(10px) 在ios系統中背景模糊 

10.overflow:hidden 與overflow:auto不同 前者無滾動條  後者有滾動條

11.border-1px 實現 在style中寫border-1px(rgba(11,25,24,0.1)) 在加上class命名border-1px即可

12.圖示的適配

12.1 base64

把轉為64的編碼 ,有2 8 進製 被第二種替換了 幾乎不用了

12.2 iconfont 支援ie4以上 相容好 一般為單色 多色的為svg製作的

12.2.1  **iconfont

.cn13 transorm的使用

13.1 transorm

-style:preserve-3d轉換3d環境

13.2 transform:translatez(1px/-1px) 立體翻動效果 正面和反面

13.3 transform:rotatey(180deg) 反轉180度

13.4動畫過程中先做位移translate

y/x/z在做其他的 否則會出現問題

14 background

14.1 background:nrl() center center  /  cover no-repeat如果只是顯示區域性 需要加上   /  cover 則全部顯示

15

HTML5 CSS3手機自適應

一.允許網頁寬度自動調整 自適應網頁設計 到底是怎麼做到的?其實並不難。首先,在網頁 的頭部,加入一行viewport元標籤。meta name viewport content width device width,initial scale 1 viewport是網頁預設的寬度和高度,上面這行 ...

HTML5手機APP開發入 3

按照angularjs mvc框架進行 重構,新建乙個dataservice服務類使用sqlite外掛程式實現儲存對通訊錄的本地儲存。涉及的知識點 angular2 injectable的使用熟成的模組依賴注入 引用類庫 引用sqlite外掛程式和 storage,sqlstorage模組 新建乙個...

5320手機格機

注 此方法僅供給實在沒辦法才想要格機的朋友門。畢竟沒什麼大問題請不要格機。a小子 很多人都不明白什麼是格機.今天就發一下.請看.首先說明一下,與電腦的操作步驟不同,手機在格式化的同時會自動生成作業系統,無需也無法干預安裝。生成作業系統就是提取固化在手機上的只能通過刷機公升級的作業系統,也就是說,格機...