css样式

字体不能缩小

	font-size: 28px;
	display: inline-block;
 	transform: scale(0.7)

按钮显示在底部

1.使用相对定位和绝对定位

   position: fixed;
   bottom: 0px;
   padding: 38px 32px;

2，使用flex弹性布局，将footer的margin-top设置为auto
注意：在浏览器中，100vh的高度包括了底部的工具栏，而我们真实需要的高度其实是浏览器的可视高度也就是100%；
在使用100vh的时候，手机浏览器底部的操作栏可能会遮挡底部按钮；
所以这时页面的高度应该使用100%

<template>
  <div class="container">
    <header style="background: #f9cc9d">Header</header>
    <main style="background: #c3d08b">Content</main>
    <footer style="background: #2b93f5">Footer</footer>
  </div>
</template>
<script>
export default {};
</script>
<style scoped lang="scss">
// 第二种方式
.container {
  display: flex;
  flex-direction: column; // 设置成上下排列方式
  height: 100vh;
  background: #f1f3f4;
  header,  main,  footer {
    height: 80px;
    line-height: 80px;
    width: 100%;
  }
  // 使用
  footer {
    margin-top: auto;
    height: 60px;
    line-height: 60px;
  }
}
</style>

我在项目中遇到的
在最外层设置
height: 100vh;
display: flex;
flex-direction: column;

在内容设置flex: 1

按钮模块就会放置在底部

在这里插入图片描述

3.通过css内置函数calc()动态计算内容的高度

min-height: calc(100vh - 130px); 130 其实就是 header和footer的高度；

<template>
  <div class="container">
    <header style="background: #f9cc9d">Header</header>
    <main style="background: #c3d08b">Content</main>
    <footer style="background: #2b93f5">Footer</footer>
  </div>
</template>

<script>
export default {};
</script>
<style scoped lang="scss">
// 第三种方式
.container {
  height: 100vh;
  background: #f1f3f4;
  header {
    height: 80px;
    line-height: 80px;
    width: 100%;
  }
  footer{
    height: 50;
    line-height: 50px;
  }
  // 内容区 130 其实就是 header和footer的高度
  main{
    min-height: calc(100vh - 130px);
  }
}
</style>

使用样式函数，进行动态的渲染

获取动态的值，并且命明一定要’–’

在需求动态样式的地方，赋值

<template>
  <div class="box" :style="styleVar">
  </div>
</template>
<script>
export default {
  props: {
    height: {
      type: Number,
      default: 54,
    },
  },
  computed: {
    styleVar() {
      return {
        '--box-height': this.height + 'px'
      }
    }
  },
}
</script>
<style scoped>
.box {
  height: var(--box-height);
}
</style>

:style的对象写法

:style="{top: getWeekDataLocation(item, 'top'), left: getWeekDataLocation(item, 'left', index), height: getWeekDataLocation(item, 'height'), width: getWeekDataLocation(item, 'width')}"

超过一行换行，但是存数字和英文失效

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

加入这句代码就可以

word-break:break-all

字体大小无法修改

.aa{
     font-size: 10px;
     display: inline-block;
     transform: scale(0.7);
}