前端的一些知识点(会持续更新)

1. text-align: left;        换行时是内容是从左往右排列

2.float: left;        位置在左

3. position: relative;        以这个容器为主体

4.position: absolute;        以有position: relative的容器为主体进行调整

5.margin: 10px 2px 3px 4px;        (上右下左)容器外面一层,用于调整位置

6.padding: 1px;        容器内的一层

7.border: 1px solid #fff        容器边框 1px是边框线大小 solid表示实线 #fff表示颜色

8.box-sizing: border-box;        修改为容器内部        添加后border的1px会在容器大小(width,height)中减去

9.  border-radius: 2px;        边框直角变圆角的程度

10.line-height: 22px;        每行的高度

11.background: linear-gradient(to bottom, #fdfdfd, #e9e9e9);        背景颜色渐变 to bottom表示由上到下

12.font-size: 14px;        字体大小

13.z-index:  1;        默认数值为0   大于0可以在其他图层上下显示

14. text-align: center;        文本居中

15.box-shadow: -10px 0px 10px red, /*左边阴影*/          0px -10px 10px black, /*上边阴影*/

                           10px 0px 10px green, /*右边阴影*/       0px 10px 10px blue;" /*下边阴影*/

16.如何在v-for中使用js中的数据

<div class="swiper-slide" v-for="item in imgs" :key="item.index">

            <div   class="bgimg"  :style="{ backgroundImage: 'url(' + item.pic + ')' }">

              <img :src="item.pic" />

              <img src="@/assets/img/首页图库/download.jpg" class="download" />

            </div>

</div>

17.-webkit-box-reflect        倒影

-webkit-box-reflect: below 1px -webkit-linear-gradient(transparent,transparent 80%,rgba(255, 255, 255, 0.3)); 效果如下

background        背景,可以用来制作透明框       如: background: rgba(48, 45, 45, 0.5);