zoukankan      html  css  js  c++  java
  • H5--第五课

    一、盒子阴影:box-shadow属性

             box-shadow:x偏移 y偏移 模糊距离 阴影大小 颜色 内阴影或外阴影;

    二、弹性盒模型:flex属性

             给父级diaplay:flex;子元素给flex:属性;flex有3个值;

    取值:

    none:
    none关键字的计算值为: 0 0 auto
    <' flex-grow '>:
    用来指定扩展比率,即剩余空间是正值时此「flex子项」相对于「flex容器」里其他「flex子项」能分配到空间比例。
    在「flex」属性中该值如果被省略则默认为「1」
    <' flex-shrink '>:
    用来指定收缩比率,即剩余空间是负值时此「flex子项」相对于「flex容器」里其他「flex子项」能收缩的空间比例。
    在收缩的时候收缩比率会以伸缩基准值加权
    在「flex」属性中该值如果被省略则默认为「1」
    <' flex-basis '>:
    用来指定伸缩基准值,即在根据伸缩比率计算出剩余空间的分布之前,「flex子项」长度的起始数值。
    在「flex」属性中该值如果被省略则默认为「0%」
    在「flex」属性中该值如果被指定为「auto」,则伸缩基准值的计算值是自身的 <' width '> 设置,如果自身的宽度没有定义,则长度取决于内容。

    说明:

    复合属性。设置或检索弹性盒模型对象的子元素如何分配空间。
    • 如果缩写「flex: 1」, 则其计算值为「1 1 0%」
    • 如果缩写「flex: auto」, 则其计算值为「1 1 auto」
    • 如果「flex: none」, 则其计算值为「0 0 auto」
    • 如果「flex: 0 auto」或者「flex: initial」, 则其计算值为「0 1 auto」,即「flex」初始值
    • 示例:如下情况每个元素的计算宽是多少
  • 相关阅读:
    build-your-own-react 注释版
    react hooks 理念之代数效应
    用Robot Framework+python来测试基于socket通讯的C/S系统(网络游戏)
    使用svndumpfilter exclude来清理svn库的废弃文件实现差别备份
    使用SonarQube+Eclipse来分析python代码
    是该写点什么了
    EventLoop
    Promise 学习
    ES6 模块化导入导出
    Vue实现对象列表根据某一字段排序
  • 原文地址:https://www.cnblogs.com/kaerbnvbgfq/p/6194360.html
Copyright © 2011-2022 走看看