老师看下我这个margin-top 为什么不起作用
来源：2-5 首页布局收尾
我不是胖球球
2021-11-03 00:22:18
相关截图：
相关代码：
相关代码：App.vue
<template>
<div class="wrapper">
<div class="position">
<span class="iconfont position__icon"></span>
北京理工大学国防科技园2号楼10层
<span class="iconfont position__notice"></span>
</div>
<div class="search">
<span class="iconfont"></span>
<input
type="text"
class="search__text"
placeholder="山姆会员商店优惠商品"
/>
</div>
<div class="banner">
<img
class="banner__img"
src="http://www.dell-lee.com/imgs/vue3/banner.jpg"
alt=""
/>
</div>
<div class="icons">
<div class="icons__item">
<img
src="http://www.dell-lee.com/imgs/vue3/超市.png"
alt=""
class="icons__item__img"
/>
<p class="icons__item__desc">超市便利</p>
</div>
<div class="icons__item">
<img
src="http://www.dell-lee.com/imgs/vue3/超市.png"
alt=""
class="icons__item__img"
/>
<p class="icons__item__desc">超市便利</p>
</div>
<div class="icons__item">
<img
src="http://www.dell-lee.com/imgs/vue3/超市.png"
alt=""
class="icons__item__img"
/>
<p class="icons__item__desc">超市便利</p>
</div>
<div class="icons__item">
<img
src="http://www.dell-lee.com/imgs/vue3/超市.png"
alt=""
class="icons__item__img"
/>
<p class="icons__item__desc">超市便利</p>
</div>
<div class="icons__item">
<img
src="http://www.dell-lee.com/imgs/vue3/超市.png"
alt=""
class="icons__item__img"
/>
<p class="icons__item__desc">超市便利</p>
</div>
<div class="icons__item">
<img
src="http://www.dell-lee.com/imgs/vue3/超市.png"
alt=""
class="icons__item__img"
/>
<p class="icons__item__desc">超市便利</p>
</div>
<div class="icons__item">
<img
src="http://www.dell-lee.com/imgs/vue3/超市.png"
alt=""
class="icons__item__img"
/>
<p class="icons__item__desc">超市便利</p>
</div>
<div class="icons__item">
<img
src="http://www.dell-lee.com/imgs/vue3/超市.png"
alt=""
class="icons__item__img"
/>
<p class="icons__item__desc">超市便利</p>
</div>
<div class="icons__item">
<img
src="http://www.dell-lee.com/imgs/vue3/超市.png"
alt=""
class="icons__item__img"
/>
<p class="icons__item__desc">超市便利</p>
</div>
<div class="icons__item">
<img
src="http://www.dell-lee.com/imgs/vue3/超市.png"
alt=""
class="icons__item__img"
/>
<p class="icons__item__desc">超市便利</p>
</div>
</div>
<div class="gap"></div>
<div class="nearby">
<h3 class="nearby__title">附近店铺</h3>
<div class="nearby__item">
<img
src="http://www.dell-lee.com/imgs/vue3/near.png"
alt=""
class="nearby__item__img"
/>
<div class="nearby__content">
<div class="nearby__content__title">沃尔玛</div>
<div class="nearby__content__tags">
<span class="nearby__content__tag">月售1万+</span>
<span class="nearby__content__tag">月售1万+</span>
<span class="nearby__content__tag">月售1万+</span>
</div>
<div class="nearby__content__highlight">
VIP尊享满89元减4元运费券（每月3张）
</div>
</div>
</div>
<div class="nearby__item">
<img
src="http://www.dell-lee.com/imgs/vue3/near.png"
alt=""
class="nearby__item__img"
/>
<div class="nearby__content">
<div class="nearby__content__title">沃尔玛</div>
<div class="nearby__content__tags">
<span class="nearby__content__tag">月售1万+</span>
<span class="nearby__content__tag">月售1万+</span>
<span class="nearby__content__tag">月售1万+</span>
</div>
<div class="nearby__content__highlight">
VIP尊享满89元减4元运费券（每月3张）
</div>
</div>
</div>
<div class="nearby__item">
<img
src="http://www.dell-lee.com/imgs/vue3/near.png"
alt=""
class="nearby__item__img"
/>
<div class="nearby__content">
<div class="nearby__content__title">沃尔玛</div>
<div class="nearby__content__tags">
<span class="nearby__content__tag">月售1万+</span>
<span class="nearby__content__tag">月售1万+</span>
<span class="nearby__content__tag">月售1万+</span>
</div>
<div class="nearby__content__highlight">
VIP尊享满89元减4元运费券（每月3张）
</div>
</div>
</div>
<div class="nearby__item">
<img
src="http://www.dell-lee.com/imgs/vue3/near.png"
alt=""
class="nearby__item__img"
/>
<div class="nearby__content">
<div class="nearby__content__title">沃尔玛</div>
<div class="nearby__content__tags">
<span class="nearby__content__tag">月售1万+</span>
<span class="nearby__content__tag">月售1万+</span>
<span class="nearby__content__tag">月售1万+</span>
</div>
<div class="nearby__content__highlight">
VIP尊享满89元减4元运费券（每月3张）
</div>
</div>
</div>
<div class="nearby__item">
<img
src="http://www.dell-lee.com/imgs/vue3/near.png"
alt=""
class="nearby__item__img"
/>
<div class="nearby__content">
<div class="nearby__content__title">沃尔玛</div>
<div class="nearby__content__tags">
<span class="nearby__content__tag">月售1万+</span>
<span class="nearby__content__tag">月售1万+</span>
<span class="nearby__content__tag">月售1万+</span>
</div>
<div class="nearby__content__highlight">
VIP尊享满89元减4元运费券（每月3张）
</div>
</div>
</div>
<div class="nearby__item">
<img
src="http://www.dell-lee.com/imgs/vue3/near.png"
alt=""
class="nearby__item__img"
/>
<div class="nearby__content">
<div class="nearby__content__title">沃尔玛</div>
<div class="nearby__content__tags">
<span class="nearby__content__tag">月售1万+</span>
<span class="nearby__content__tag">月售1万+</span>
<span class="nearby__content__tag">月售1万+</span>
</div>
<div class="nearby__content__highlight">
VIP尊享满89元减4元运费券（每月3张）
</div>
</div>
</div>
</div>
</div>
<div class="docker">
<div class="docker__item docker__item--active">
<div class="iconfont"></div>
<div class="docker__title">首页</div>
</div>
<div class="docker__item">
<div class="iconfont"></div>
<div class="docker__title">购物车</div>
</div>
<div class="docker__item">
<div class="iconfont"></div>
<div class="docker__title">订单</div>
</div>
<div class="docker__item">
<div class="iconfont"></div>
<div class="docker__title">我的</div>
</div>
</div>
</template>
<style lang="scss">
// scss区域引入另外一个scss的变量文件（一些通用的css）
@import "./style/viriables.scss";
// 将文字不换行显示……封装成一个mixin，引入mixins.scss文件
@import "./style/mixins.scss";
.wrapper {
// 纵向滚动
overflow-y: auto;
position: absolute;
left: 0;
top: 0;
bottom: 50px;
right: 0;
// 下padding是为了滚动的时候底部留白比较好看
padding: 0 .19rem .2rem .19rem;
}
.position {
position: relative;
padding: 16px 24px 16px 0;
line-height: 22px;
font-size: 16px;
@include ellipsis;
.position__icon {
position: relative;
font-size: 20px;
top: 1px;
}
.position__notice {
position: absolute;
right: 0;
font-size: 20px;
top: 17px;
}
color: $content-fontcolor;
}
.search {
margin-bottom: 12px;
line-height: 32px;
background: $content-bgclor;
border-radius: 16px;
color: $color;
.iconfont {
position: relative;
font-size: 18px;
display: inline-block;
top: 2px;
padding: 0 10px 0 16px;
}
.search__text {
display: inline-block;
font-size: 14px;
// 去除input默认边框和选中时的边框
border: none;
outline: none;
// input标签有默认color和background，无法继承父元素样式，需单独设置字体&背景颜色。
background: $content-bgclor;
color: $color;
}
}
.banner {
height: 0;
overflow: hidden;
padding-bottom: 25.4%;
&__img {
width: 100%;
}
}
.icons {
display: flex;
flex-wrap: wrap;
margin-top: 0.16rem;
&__item {
width: 20%;
&__img {
display: block;
width: 0.4rem;
height: 0.4rem;
margin: 0 auto;
}
&__desc {
margin: 0.06rem 0 0.16rem 0;
text-align: center;
color: $content-fontcolor;
}
}
}
.gap {
// gap留白边，因为wrapper的左右padding是19px，需往外撑这19px
margin: 0 -0.19rem;
height: 0.1rem;
background: $content-bgclor;
}
.nearby {
&__title {
margin: .16rem 0 .02rem 0;
font-size: .18rem;
font-weight: normal;
color: $content-fontcolor;
}
&__item {
display: flex;
padding-top: .12rem;
&__img {
margin-right: .16rem;
width: .56rem;
height: .56rem;
}
}
&__content {
flex: 1;
padding-bottom: .12rem;
border-bottom: 1px solid #f1f1f1;
&__title {
line-height: .22rem;
font-size: .16rem;
color: $content-fontcolor;
}
&__tags {
display: block;
margin-top: .08rem;
line-height: .18rem;
font-size: .13rem;
color: $content-fontcolor;
}
&__tag {
margin-right: .16rem;
}
&__highlight {
margin-top: .08rem 0 0 0;
color: #E93B3B;
line-height: .18rem;
font-size: .13rem;
}
}
}
.docker {
position: absolute;
display: flex;
box-sizing: border-box;
padding: 0 18px;
left: 0;
bottom: 0;
height: 49px;
width: 100%;
border-top: 1px solid #f1f1f1;
color: $content-fontcolor;
&__item {
flex: 1;
text-align: center;
.iconfont {
font-size: 18px;
margin: 7px 0 2px 0;
}
&--active {
color: #1fa4fc;
}
}
&__title {
// Chrome浏览器解析字体最小为.12rem，需修改为.1rem，太小了所以显示的是最小.12rem。
font-size: 20px;
transform: scale(0.5, 0.5);
transform-origin: center top;
}
}
</style>写回答
1回答
-
同学你好，原因如下：
margin-top属性值设置有误，margin-top用于设置上外边距，只需设置一个值即可，即margin-top:0.08rem。而同学的代码 margin-top: .08rem 0 0 0; 设置了三个值，所以属性设置不生效。
祝学习愉快！
0
相似问题