86-24 =64？？？

Answer 1

Seagull8796540 2021-01-23 12:19:12

@Samrtiboy你这个解释没错，我假设这位同学问的问题是怎么计算 header-input 的高度

header 的line-height是 .86rem，header-input 的line-heigh 是 .62rem,margin-top:  .12rem, 那这样自然地可算出来margin-bottom:   .12rem, 也就是说  .62rem + .12rem + .12rem = 0.86rem

代码应该这么写：

<style lang="stylus" scoped>
  .header
    display: flex
    background: #00bcd4
    line-height: .86rem
    color: #ffffff
    .header-left
      width: .64rem
    .header-input
      flex: 1
      background: #fff
      height: .62rem
      line-height: .62rem
      margin-top: .12rem
      margin-left: .2rem
      border-radius: .1rem
      color: #ccc
    .header-right
      width: 1.24rem
      text-align: center
</style>

如果老师写的那样 header-input 的 line-height: .64rem 的话 输入框的上下（margin）距离不一致， 如果我错了， 请你们原谅。

Answer 2

Samrtiboy 2020-11-08 07:44:05

同学你好，你是疑惑课程中下面样式值吗？

.header-left
    width: .64rem

Dell老师从设计图中剪取的元素宽度为64px，因为设计图是二倍图所以要除以2就等于32px，32px要除以50就等于.64rem，这里之所以要除以50是因为我们使用了rem，1rem就html元素的font-size：50px。

• Dell #1

  正确！

• checklittlelee #2

  他并不是问这个64的背后原理。是Dell老师在14:22秒的时候嘴瓢说86-24=64，所以input里line-height应该是.62rem吧