微信小程序定位及布局設(shè)計(jì)的知識(shí)點(diǎn)有哪些

這篇文章主要講解了“微信小程序定位及布局設(shè)計(jì)的知識(shí)點(diǎn)有哪些”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“微信小程序定位及布局設(shè)計(jì)的知識(shí)點(diǎn)有哪些”吧！

一：定位(position)

2017的微信公開(kāi)課pro如期進(jìn)行了，小程序?qū)⒂?017年1月9日對(duì)個(gè)人開(kāi)放，公司項(xiàng)目的demo版做了個(gè)大概，過(guò)程中花的時(shí)間最多的還是頁(yè)面布局，所以后面將花一段時(shí)間將css的屬性在小程序里過(guò)一篇，雖然小程序里面對(duì)于css支持，但沒(méi)有說(shuō)明支持到什么地步。今天就先來(lái)說(shuō)說(shuō)定位。

一.定位：position屬性允許你對(duì)元素進(jìn)行定位。

二.定位機(jī)制：有三種：普通流，浮動(dòng)流，絕對(duì)定位。

三.定位屬性值：static，relative，absolute，fixed，inherit，-ms-page，initial，unset(后面3個(gè)屬性是小程序中有的，沒(méi)看懂是什么樣子)

1.static：元素框正常生成，塊級(jí)元素生成一個(gè)矩形框，作為文檔流的一部分，行內(nèi)元素則會(huì)創(chuàng)建一個(gè)或者多個(gè)行框，置于其父元素中。

2.relative：元素框偏移某個(gè)距離。元素扔保持其未定位前的形狀，它原來(lái)所占的空間扔保留。

3.absolute：元素框從文檔流中刪除，并相對(duì)于其包含塊定位，包含快可能是文檔中的另一個(gè)元素或者初始包含塊。元素原先在正常文檔流中所占的空間會(huì)關(guān)閉，就好像元素原來(lái)不存在一樣。元素定位后生成一個(gè)塊級(jí)框，而不論原來(lái)它在正常流中生成何種類(lèi)型的框。

4.fixed：元素框的表現(xiàn)類(lèi)似于將position 設(shè)置為absolute，不過(guò)其包含塊是視窗本身。

5.inherit：繼承父元素的position位置。----任何版本的IE都不支持屬性值：inherit

6.-ms-page:位置取決于absolute的模式。

7.initial：將指定的值表示為屬性的初始值。

8.unset：設(shè)置了“inherit”和“initial”，根據(jù)屬性是否被繼承。

四.top，right，bottom，left：定位元素，定義position不為static的元素。

1.取值：auto/直接數(shù)值/百分比

五.z-index 定義position不為static的元素。設(shè)置元素在當(dāng)前上下文中的層疊級(jí)別。數(shù)值越大顯示在上面，數(shù)值越小，則顯示在下面。

六.clip：剪裁絕對(duì)元素定位。定義一個(gè)剪裁矩形，內(nèi)容多出來(lái)的東西將根據(jù)overflow的值來(lái)處理。注意點(diǎn)：必須將position設(shè)置為absolute或者fixed的時(shí)候此屬性才會(huì)生效

1.取值。shape/auto/inherit。

2.clip這個(gè)屬性即將廢棄，推薦使用 clip-path

二：布局(Layout)

說(shuō)到布局，腦子里第一反應(yīng)出來(lái)的就是LinearLayout,RelativeLayout等等,不過(guò)現(xiàn)在既然是小程序，那當(dāng)然得換換思路了，來(lái)看看css中有哪些布局方式。

一：布局有以下幾種：display，float，clear，visibility，overflow，overflow-x，overflow-y。

1.display：設(shè)置對(duì)象是否顯示。

2.float：指出對(duì)象是否及如何浮動(dòng)。

3.clear：指出了不允許有浮動(dòng)對(duì)象的邊。

4.visibility：是否隱藏，與display隱藏不同，visibility隱藏的時(shí)候保留元素占據(jù)的位置。

5.overflow：設(shè)置對(duì)象處理溢出內(nèi)容的方式。

6.overflow-x：設(shè)置在橫向溢出內(nèi)容的方式。

7.overflow-y：設(shè)置在縱向溢出內(nèi)容的方式。

二：display：根據(jù)“float”和“position” 決定盒子或者箱子的類(lèi)型生成一個(gè)元素。

以上是小程序中display的取值,常用的如下：

1.block：指定對(duì)象為塊元素。

2.flex：將對(duì)象作為彈性伸縮盒顯示。(小程序推薦使用伸縮盒子)

3.inline：指定對(duì)象為內(nèi)聯(lián)元素。

4.inline-block：指定對(duì)象為內(nèi)聯(lián)塊元素。

5.inline-flex：將對(duì)象作為內(nèi)聯(lián)塊級(jí)彈性伸縮盒顯示。

6.inline-table：指定對(duì)象作為內(nèi)聯(lián)元素級(jí)的表格。

7.list-item：指定對(duì)象為列表項(xiàng)目。

8.none：隱藏對(duì)象。不占物理位置。

9.table：指定對(duì)象最為塊元素級(jí)的表格。

三：float：定義了元素在那個(gè)方向浮動(dòng)，浮動(dòng)元素會(huì)生成一個(gè)塊級(jí)框，而不論它本身是何種元素。

1.取值：left，right，none，inherit。

2.float 在絕對(duì)定位中不起作用。大多數(shù)企業(yè)網(wǎng)站布局都是以float來(lái)定位。

四.clear：該屬性指出不允許有浮動(dòng)對(duì)象的邊。

1.取值：left，right，both，none.

2.none:允許兩邊可以浮動(dòng)。 left：不允許左邊有浮動(dòng)對(duì)象。 right：不允許右邊有浮動(dòng)對(duì)像。both：兩邊都不允許浮動(dòng)。

五.visibility：是否顯示對(duì)象;

1.取值：visible，hidden，collapse。

2.visible：設(shè)置可見(jiàn)。hidden：設(shè)置隱藏(隱藏了也占位置)。collapse：隱藏表格的行或者列。

六.overflow：處理溢出內(nèi)容的方式。

1.取值：visible，hidden，scroll，auto。

2.visible:對(duì)溢出內(nèi)容不做處理，內(nèi)容可能會(huì)超出容器。

hidden：隱藏溢出容器的內(nèi)容且不會(huì)出現(xiàn)滾動(dòng)條。

scroll:隱藏溢出容器的內(nèi)容，溢出的內(nèi)容將以卷動(dòng)滾動(dòng)條的方式呈現(xiàn)。

auto:當(dāng)內(nèi)容沒(méi)有溢出容器的時(shí)候不出現(xiàn)滾動(dòng)條，當(dāng)內(nèi)容溢出容器的時(shí)候出現(xiàn)滾動(dòng)條。按需出現(xiàn)。

七：overflow-x：橫向處理溢出內(nèi)容的方式;

1.取值：visible，hidden，scroll，auto。

2.同overflow。

八：overflow-y：縱向處理溢出內(nèi)容的方式;

1.取值：visible，hidden，scroll，auto。

2.同overflow。

感謝各位的閱讀，以上就是“微信小程序定位及布局設(shè)計(jì)的知識(shí)點(diǎn)有哪些”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)微信小程序定位及布局設(shè)計(jì)的知識(shí)點(diǎn)有哪些這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！