美文网首页
ReactNative-CSS布局(二)

ReactNative-CSS布局(二)

作者: 攻克乃还_ | 来源:发表于2017-08-20 10:53 被阅读4次

1.组件边框

borderBottomWidth
borderLeftWidth
borderRightWidth
borderTopWidth
borderWidth
border<Bottom|Left|Right|Top>Color
borderColor

2.组件大小

width
width

3.组件外边距

  • 第一个组件参照父控件,其他组件参照上一个组件
  • marginRight和width冲突
    margin
    marginBottom
    marginHorizontal
    marginLeft
    marginRight
    marginTop
    marginVertical

4.组件内边距

  • 自己的子控件相对于自己的位置
    padding
    paddingBottom
    paddingHorizontal
    paddingLeft
    paddingRight
    paddingTop
    paddingVertical

5.绝对定位与相对定位

  • 绝对定位:参照父控件定位
  • 相对定位:参照自己的原始位置定位
    left number 左边缘
    right number 右边缘
    top number 顶部边缘
    bottom number 底部边缘
    position: absolute/relative

相关文章

  • ReactNative-CSS布局(二)

    1.组件边框 2.组件大小 3.组件外边距 第一个组件参照父控件,其他组件参照上一个组件 marginRight和...

  • 自学H5Day4

    一、div布局 二、table布局

  • 2019-08-25

    布局 说法一 浮动布局 绝对定位布局 Flex布局 Table-cell表格布局 网格布局 说法二 静态布局 流式...

  • Day04

    Day04 布局一 布局二 布局三 布局四 java代码一 java代码二 java代码三 main代码 移除fr...

  • CSS3开发常用核心技能

    基础网页布局 布局分类 一列布局 两列布局 三列布局 多列布局 一列布局: 二列布局: 三列布局: ⚠️ midd...

  • display:table-cell

    一、垂直居中 二、左右布局 三、三列布局 四、等高布局

  • Flutter 布局

    Flutter 布局详解 Flutter 布局(一)- Container详解 Flutter 布局(二)- Pa...

  • CSS布局

    布局方式 一列布局 效果: 二列布局 效果: 三列布局 效果: 混合布局 效果: 布局分析 1、标准流 常见块级元...

  • Android布局优化(五)绘制优化—避免过度绘制

    Android布局优化(一)LayoutInflate — 从布局加载原理说起 Android布局优化(二)优雅获...

  • 布局管理器

    2019年12月15日 一.Box布局管理器 二.StaticBox布局 三.Grid布局 四.FlexGrid布局

网友评论

      本文标题:ReactNative-CSS布局(二)

      本文链接:https://www.haomeiwen.com/subject/ydqfdxtx.html