資訊專欄INFORMATION COLUMN
摘要：先簡單的看一下示例圖相對(duì)布局。這個(gè)是相對(duì)于父容器進(jìn)行據(jù)對(duì)布局。絕對(duì)布局是脫離文檔流的，不過奇怪的是依舊在文檔層次結(jié)構(gòu)里面，這個(gè)和的也很大不一樣。
position布局
position:enum("absolute","relative")。先簡單的看一下示例圖
position:"relative"
相對(duì)布局。這個(gè)和html的position有很大的不同，他的相對(duì)布局不是相對(duì)于父容器，而是相對(duì)于兄弟節(jié)點(diǎn)。
position:"absolute"
絕對(duì)布局。這個(gè)是相對(duì)于父容器進(jìn)行據(jù)對(duì)布局。絕對(duì)布局是脫離文檔流的，不過奇怪的是依舊在文檔層次結(jié)構(gòu)里面，這個(gè)和html的position也很大不一樣。另外還有一個(gè)和html不一樣的是，html中position:absolute要求父容器的position必須是absolute或者relative，如果第一層父容器position不是absolute或者relative，在html會(huì)依次向上遞歸查詢直到找到為止，然后居于找到的父容器絕對(duì)定位。
position 示例代碼
/**
* Created by GXZ on 16/6/27.
*/
import React,{Component} from "react";
import {
Text,
View,
ScrollView
} from "react-native";
export default class PositionExample extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
FlexBox布局
position=relative,top:20
position=absolute,top:20
);
}
}
const styles = {
container: {
height: 180,
backgroundColor: "#CCCCCC",
marginBottom: 10,
},
box1: {
width: 50,
height: 50,
backgroundColor: "#FF0000"
},
box2: {
width: 50,
height: 50,
backgroundColor: "#00FF00"
},
box3: {
width: 50,
height: 50,
backgroundColor: "#0000FF"
}
};
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/84165.html
摘要：布局直接閱讀大神文章阮一峰寫的布局。有幾個(gè)注意的點(diǎn)，我在剛剛開始中總結(jié)的容器屬性，，布局方式主軸對(duì)齊方式交叉軸對(duì)齊方式這里需要特別注意的就是主軸和交叉軸。特別注意的作用對(duì)象是主軸在中設(shè)置是水平方向上占滿整個(gè)容器。 FlexBox布局 直接閱讀大神文章：阮一峰寫的FlexBox布局。在react-native中原理是一樣的，只不過可能有寫屬性在react-native中簡化了。有幾個(gè)注意...
摘要：一般地，居中絕對(duì)定位元素，再負(fù)值或者通過也可達(dá)到效果。今天發(fā)現(xiàn)另一個(gè)技巧，利用，取值，再即可實(shí)現(xiàn)居中。原因注子元素大的話，上下可居中，左右失效。 一般地，居中絕對(duì)定位元素，left:50%;top:50%;再margin負(fù)值或者通過transform也可達(dá)到效果。今天發(fā)現(xiàn)另一個(gè)技巧，利用，top,left,right,bottom取值0，再magin:auto,即可實(shí)現(xiàn)居中。原因： F...
摘要：一般地，居中絕對(duì)定位元素，再負(fù)值或者通過也可達(dá)到效果。今天發(fā)現(xiàn)另一個(gè)技巧，利用，取值，再即可實(shí)現(xiàn)居中。原因注子元素大的話，上下可居中，左右失效。 一般地，居中絕對(duì)定位元素，left:50%;top:50%;再margin負(fù)值或者通過transform也可達(dá)到效果。今天發(fā)現(xiàn)另一個(gè)技巧，利用，top,left,right,bottom取值0，再magin:auto,即可實(shí)現(xiàn)居中。原因： F...
閱讀 1819·2021-11-24 09:39
閱讀 2297·2021-09-30 09:47
閱讀 4166·2021-09-22 15:57
閱讀 1886·2019-08-29 18:36
閱讀 3586·2019-08-29 12:21
閱讀 598·2019-08-29 12:17
閱讀 1273·2019-08-29 11:25
閱讀 732·2019-08-28 18:26
