字体不能缩小
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);
}