0
点赞
收藏
分享

微信扫一扫

SQL注入攻击原理 实战

云竹文斋 2023-07-13 阅读 74

文章目录


flexbox

Flexbox翻译为弹性盒子

  • 弹性盒子是一种用于按行按列布局元素的一维布局方法
  • 元素可以膨胀以填充额外得到空间,收缩以适应更小的空间
  • 通常我们使用Flexbox来进行布局的方案称之为flex布局(flex layout)

Flex布局

两个概念

flex container:开启了flex布局的元素

flex item:flex container里面的子元素

image-20230706145606402

当flex container中的子元素变成了flex item时,具备以下特点:

  • flex item的布局将受flex container属性的设置来进行控制和布局
  • flex item不再严格区分块级元素行内级元素
  • flex item默认情况下是包裹内容的,但是可以设置宽度和高度

将元素设置display:flex或者display:inline-flex可以成为flex container

  • flex:flex container以block-level形式存在,相当于是一个块级元素
  • inline-flex:flex container以inline-level形式存在,相当于是一个行内块元素
  • 这两个属性值的差异的影响在设置了属性值的元素上面,它们在子元素上的效果都是一样的
  • 如果一个元素的父元素开启了flex布局;那么其子元素的display属性对自身的影响将会失效,但是对其内容的影响依旧存在的; 举个例子:父元素设置了display: flex,即使子元素设置了display:block或者display:inline的属性,子元素还是会表现的像个行内块元素一样,这就是父元素对其的影响使其display属性对自身的影响失效了;

🌰🌰🌰举例说明:

🔔原始状态

<div class="box">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

image-20230706151501395

🔔设置 display:flex

.box {
    display: flex;
    background-color: pink;
}

image-20230706151701051

🔔设置 display:inline-flex

.box {
    display: inline-flex;
    background-color: pink;
}

image-20230706151738203

Flex布局模型

image-20230706152101992

flex相关的属性

应用在flex container上的CSS属性应用在flex item上的CSS属性
flex-flowflex-grow
flex-directionflex-basis
flex-wrapflex-shrink
justify-contentorder
align-itemsalign-self
align-contentflex

flex-direction

image-20230706155609571

flex-wrap

  • nowrap(默认):单行
  • wrap:多行
  • wrap-reverse:多行(对比 wrap,cross start 与 cross end 相反)

🌰🌰🌰举个栗子:

  • 父盒子宽度为300px,给父盒子设置display:flex
  • 子盒子宽度设置为100px,当添加多个子盒子时

🔔设置flex-wrap:nowrap

image-20230706161222494

🔔设置flex-wrap:wrap

image-20230706161743006

🔔设置flex-wrap:wrap-reverse

image-20230706162206053

flex-flow

  • 顺序任意,并且都可以省略

justify-content

  • flex-start(默认值):与 main start 对齐

  • flex-end:与 main end 对齐

  • center:居中对齐

  • space-between:

    • flex items 之间的距离相等
    • 与 main start、main end两端对齐
  • space-around:

    • flex items 之间的距离相等
    • flex items 与 main start、main end 之间的距离是 flex items 之间距离的一半
  • space-evenly:

    • flex items 之间的距离相等
    • flex items 与 main start、main end 之间的距离 等于 flex items 之间的距离

image-20230706163119983

align-items

  • normal:在弹性布局中,效果和stretch一样
  • stretch:当 flex items 在 cross axis 方向的 size 为 auto 时,会 自动拉伸至填充 flex container
  • flex-start:与 cross start 对齐
  • flex-end:与 cross end 对齐
  • center:居中对齐
  • baseline:与基准线对齐

image-20230706164042346

align-content

  • stretch(默认值):与 align-items 的 stretch 类似

  • flex-start:与 cross start 对齐

  • flex-end:与 cross end 对齐

  • center:居中对齐

  • space-between:

    • flex items 之间的距离相等
    • 与 cross start、cross end两端对齐
  • space-around:

    • flex items 之间的距离相等

    • flex items 与 cross start、cross end 之间的距离是 flex items 之间距离的一半

  • space-evenly:

    • flex items 之间的距离相等
    • flex items 与 cross start、cross end 之间的距离 等于 flex items 之间的距离

image-20230706170028758



flex item 的属性开始啦~~🎉🎉🎉🎉🎉🎉

order

  • 可以设置任意整数(正整数、负整数、0),值越小就越排在前面
  • 默认值是 0

image-20230706170139009

flex items

  • auto(默认值):遵从 flex container 的 align-items 设置

  • stretch、flex-start、flex-end、center、baseline,效果跟 align-items 一致

image-20230706170339284

flex-grow

  • 可以设置任意非负数字(正小数、正整数、0),默认值是 0

  • 当 flex container 在 main axis 方向上有剩余 size 时,flex-grow 属性才会有效

  • 如果所有 flex items 的 flex-grow 总和 sum 超过 1,每个 flex item 扩展的 size 为

    • flex container 的剩余size: (size / sum) * flex-grow
  • flex items 扩展后的最终 size 不能超过 max-width\max-height

image-20230706170556037

解释说明:

  • flex items 扩展后的最终 size 不能超过 max-width\max-height

flex-shrink

  • 可以设置任意非负数字(正小数、正整数、0),默认值是 1

  • 当 flex items 在 main axis 方向上超过了 flex container 的 size,flex-shrink 属性才会有效

  • 如果所有 flex items 的 flex-shrink 总和超过 1,每个 flex item 收缩的 size为:

    • flex items 超出 flex container 的 size * 收缩比例 / 所有 flex items 的收缩比例之和
  • flex items 收缩后的最终 size 不能小于 min-width\min-height

flex-basis

  • auto(默认值)、具体的宽度数值(100px)

  • 决定 flex items 最终 base size 的因素,从优先级高到低

    • max-width\max-height\min-width\min-height

    • flex-basis

    • width\height

    • 内容本身的 size

🌰🌰🌰举个栗子:

  • 直接设置中间盒子的width,若盒子中的内容超出盒子的宽度的话是不会显示的

image-20230706173208700

  • 设置中间盒子的flex-basis,若盒子中的内容超出盒子的宽度的话还是会显示的

image-20230706173354993

flex

  • 单值语法

    • 一个无单位数:它会被当做<flex-grow>的值
    • 一个有效的宽度值:它会被当做<flex-basis>的值
    • 关键字none,auto或initial
  • 双值语法

    • 第一个值必须为一个无单位数,并且它会被当做<flex-grow>的值
    • 第二个值必须为以下之一:
      • 一个无单位数:它会被当做<flex-shrink>的值
      • 一个有效的宽度值:它会被当做<flex-basis>的值
  • 三值语法

    • 第一个值必须为一个无单位数,并且它会被当做<flex-grow>的值
    • 第二个值必须为一个无单位数,并且它会被当做flex-shrink的值
    • 第三个值必须为一个有效的宽度值,并且它会被当做<flex-basis>的值

思考

flex布局中如何解决以下问题:

image-20230706175058069

我们希望6号盒子按顺序排放,即6号盒子的位置在2号盒子的下面

解决方法:

在最后添加列数-2个任意标签,然后将标签宽度设置成盒子的宽度

// html
<div class="box">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
    <div class="item item5">6</div>
    <!-- 添加span标签的个数是列数-2 -->
    <span></span>
    <span></span>
</div>
// css
.box {
    width: 500px;
    background-color: pink;

    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
/* 设置span宽度 */
.box span {
    width: 110px;
}

.item {
    height: 140px;
    width: 110px;

    background-color: palegreen;
}

```
// css
.box {
    width: 500px;
    background-color: pink;

    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
/* 设置span宽度 */
.box span {
    width: 110px;
}

.item {
    height: 140px;
    width: 110px;

    background-color: palegreen;
}
举报

相关推荐

0 条评论