微信小程式中布局使用的css布局文法

微信小程式的布局是基于css的布局，可以參考一些學習網站上面的css的基礎學習

以下是布局的一些文法規則

class 用  .class{}

id    用  #id{}

類的子元素添加css  （1  .class 子元素名（所有後代）   （2   .class>li{} （直接子後代）

标簽的權值為1，類選擇符的權值為10，ID選擇符的權值最高為100

(1)塊狀元素、内聯元素(又叫行内元素)和内聯塊狀元素

三種不同的類型：塊狀元素、内聯元素(又叫行内元素)和内聯塊狀元素。

(1.1)

常用的塊狀元素有：

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

常用的内聯元素有：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

常用的内聯塊狀元素有：

<img>、<input>

（1.2）塊級元素

display:block;

塊級元素特點：

1、每個塊級元素都從新的一行開始，并且其後的元素也另起一行。（真霸道，一個塊級元素獨占一行）

2、元素的高度、寬度、行高以及頂和底邊距都可設定。

3、元素寬度在不設定的情況下，是它本身父容器的100%（和父元素的寬度一緻），除非設定一個寬度。

（1.3）内聯元素

display:inline;            

内聯元素特點：

1、和其他元素都在一行上；

2、元素的高度、寬度及頂部和底部邊距不可設定；

3、元素的寬度就是它包含的文字或圖檔的寬度，不可改變。

（1.4）内聯塊狀元素

display:inline-block;      

inline-block 元素特點：

1、和其他元素都在一行上；

2、元素的高度、寬度、行高以及頂和底邊距都可設定。

(2)

CSS包含3種基本的布局模型，用英文概括為：Flow、Layer 和 Float

在網頁中，元素有三種布局模型：

1、流動模型（Flow）

2、浮動模型 (Float)

3、層模型（Layer）

(2.1)

流動模型（一） (預設類型)

第一點，塊狀元素都會在所處的包含元素内自上而下按順序垂直延伸分布，因為在預設狀态下，塊狀元素的寬度都為100%。實際上，塊狀元素都會以行的形式占據位置。

第二點，在流動模型下，内聯元素都會在所處的包含元素内從左到右水準分布顯示。（内聯元素可不像塊狀元素這麼霸道獨占一行）

(2.2)

浮動模型

(float:left)

塊狀元素這麼霸道都是獨占一行，如果現在我們想讓兩個塊狀元素并排顯示

(2.3)

層模型

層模型有三種形式：

1、絕對定位(position: absolute)

2、相對定位(position: relative)

3、固定定位(position: fixed)

（2.3.1）

層模型--絕對定位(相對于父類進行布局 類似 framlayout，不過會以直接的外層布局作為相對的位置)

div{position:absolute;left:100px;top:50px;}

如果想為元素設定層模型中的絕對定位，需要設定position:absolute(表示絕對定位)，這條語句的作用将元素從文檔流中拖出來，然後使用left、right、top、bottom屬性相對于其最接近的一個具有定位屬性的父包含塊進行絕對定位。

(2.3.2)

層模型--相對定位 （相當于android中的 leanerlayout)

div{position:relative;left:100px;top:50px;}

如果想為元素設定層模型中的相對定位，需要設定position:relative（表示相對定位），它通過left、right、top、bottom屬性确定元素在正常文檔流中的偏移位置。相對定位完成的過程是首先按static(float)方式生成一個元素(并且元素像層一樣浮動了起來)，然後相對于以前的位置移動.

(2.3.3)

層模型--固定定位(相當于android中的 Framlayout，不一樣的是，他是相對于整個視窗相對的位置，進行布局)

div{position:fixed;left:100px;top:50px;}

fixed：表示固定定位，與absolute定位類型類似，但它的相對移動的坐标是視圖（螢幕内的網頁視窗）本身。由于視圖本身是固定的，它不會随浏覽器視窗的滾動條滾動而變化，除非你在螢幕中移動浏覽器視窗的螢幕位置，或改變浏覽器視窗的顯示大小，是以固定定位的元素會始終位于浏覽器視窗内視圖的某個位置，不會受文檔流動影響，這與background-attachment:fixed;屬性功能相同。

（3）機關

目前比較常用到px（像素）、em、% 百分比，要注意其實這三種機關都是相對機關。

（3.1）px

因為像素指的是顯示器上的小點（CSS規範中假設“90像素=1英寸”）

（3.2）em

就是本元素給定字型的 font-size 值，如果元素的 font-size 為 14px ，那麼 1em = 14px；如果 font-size 為 18px，那麼 1em = 18px。如下代碼：

p{font-size:12px;text-indent:2em;}

（3.3）%

p{font-size:12px;line-height:130%}

設定行高（行間距）為字型的130%（12 * 1.3 = 15.6px）。