zoukankan      html  css  js  c++  java
  • Figma 学习笔记 – Constraints 约束

    用途

    Constraints 用于 responsive design, 子元素和父元素建立约束关系后, 当父元素 dimension 变换的时候, 子元素会做出相应的变化 (移动位置或 resize dimension)

    例子

    约束有份左右和上下, 概念是一样的,只是方向不同而已, 所以这里我指说其中一边.

    默认的约束时 Left, Top

    Left

    当约束 Left 时, 意味着子元素的 Left 始终保持和父元素的距离. 

    所以当拉动父元素左边时, 子元素也一起移动了. 

    而当拉动父元素右边时, 子元素则没有任何反应 (因为右边没有被约束)

    Right

    和 Left 相反, 右边被固定了

    Left and Right

    当 2 边都被约束以后, 子元素的 width 就会被强行改变, 以确保左右始终和父元素保持固定的距离

    Center

    center 约束的是中心点, 所以当拉动父元素左边或右边时, 子元素都会移动, 因为它要确保中心点失踪一致.

    Scale

    Scale 和 Left and Right 的区别

    上方是 left and right, 下方是 scale

    虽然 2 方的子元素都被 resize 了, 但是结果还是差很多的, 

    left and right 的关键是约束左右的距离 

    而 scale 是和父元素对等比例一起长大.

  • 相关阅读:
    Properties类
    缓冲流
    Mybatis
    分页查询
    QueryRunner和JDBC连接池
    JSP
    Session
    Cookie
    http协议和eclipes绑定tomcat
    servlet
  • 原文地址:https://www.cnblogs.com/keatkeat/p/15369439.html
Copyright © 2011-2022 走看看