微信小程式 布局

2022-03-10 02:47:40 字數 645 閱讀 3718

傳送門

傳送門

語法:margin : auto | length

引數:margin:10px 11px 9px 8px; ,按順序分別代表物件與父容器的上、右、下、左的距離值為10px,11px,9px,8px。

auto :  值被設定為相對邊的值

length :  由浮點數字和單位識別符號組成的長度值 | 百分數。百分數是基於父物件的高度。對於內聯物件來說,左右外延邊距可以是負數值。

先看margin,margin有4個值:margin:10px 11px 9px 8px; ,按順序分別代表物件與父容器的上、右、下、左的距離值為10px,11px,9px,8px。

如果只寫兩個值:margin:10px 5px; ,表示物件與父容器的上下距離值都是10px,與左右的距離值都是5px。

那麼這時候我們來看margin:0 auto; ,這個就表示上下的距離值是0,而左右就是自動適應,也就是我們常說的自動居中。

而你所說的margin:auto; , 就表示上下左右都自動適應。

微信小程式布局display flex布局介紹

display flex是將物件作為彈性伸縮盒顯示。伸縮盒最新版本 css3 在web網頁中必須要考慮相容性,因為瀏覽器不同,瀏覽器的支援和實現方式也不同,導致相容起來略顯麻煩 設定乙個容器,其中有多個子容器,比如,這是乙個簡單的例子 style width 400px height 120px b...

微信小程式頁面布局

3.flex布局的主要特徵是能夠調整其子元素在不同的螢幕大小中能夠用最適合的方法填充合適的空間。二,flex布局的特點 1.任意方向的伸縮,向左,向右,向下,向上 2.在樣式層可以調換和重排順序 3.主軸和側軸方便配置 4.子元素的空間拉伸和填充 5.沿著容器對齊23 顯示效果 block改換成di...

微信小程式頁面布局

1.flex布局,是w3c在2009年提出的一種新的方案,可以簡便,完整,響應式的實現各種頁面布局。2.flex布局提供了元素在容器中的對齊,方向以及順序,甚至他們可以是動態的或者不確定的大小的。3.flex布局的主要特徵是能夠調整其子元素在不同的螢幕大小中能夠用最適合的方法填充合適的空間。二,fl...