小程序 背景图片样式 阴影 子元素上下左右居中 上下居中 左右居中_小程序卡片阴影一般值是多少

小程序 css3 常用的一些样式；

一、 背景颜色半透明

• 1. 透明背景颜色样式

  •  background:rgba(0,0,0,0.5);
    1

• 2. 背景图片样式

  • background-image: url(../img/1.png) ; 
    background-size:480rpx  146rpx;  
    background-repeat: no-repeat;
    background-position:46% 10%;
    1
    2
    3
    4

• 3. 从左上角开始（到右下角）的线性渐变。起点是红色，慢慢过渡到蓝色

  •  background: linear-gradient(to bottom right, red , green , blue);
    1

• 4 . 从左到右的线性渐变，带有透明度

  •  background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
    1

二、 阴影

• 1.文字阴影

  • box-shadow: 0px 2px 5px 5px #c3c3c3;
    text-shadow: 5px 5px 5px #FF0000; 
    1
    2

• 2.元素边框阴影

  • (1).黑色阴影

    • -webkit-box-shadow:  0px 3px 5px 5px rgba(0, 0, 0, 0.15);
      -moz-box-shadow:  0px 3px 5px 5px rgba(0, 0, 0, 0.15);
      box-shadow: 0px 3px 5px 5px rgba(0, 0, 0, 0.15);
      1
      2
      3

  • (2).白色阴影：

    • -webkit-box-shadow:  0px 3px 5px 5px rgba(245, 241, 241, 0.5);
      -moz-box-shadow:  0px 3px 5px 5px rgba(247, 243, 243, 0.5);
      box-shadow: 0px 3px 5px 5px rgba(250, 249, 249, 0.5);  
      1
      2
      3

三 、 文本段落样式

• 1.超过一行后面显示省略号

  • overflow: hidden;
    text-overflow: ellipsis; 
    -webkit-line-clamp: 2; // （行数）
    -webkit-box-orient: vertical;
    1
    2
    3
    4

• 2.首行缩进

  •   text-indent: 24px;    
    1

• 3.文字之间的间距

  •   letter-spacing: 8px;
    1

• 4.鼠标变为可点击的标志图标

  •   cursor: pointer;
    1

• 5.强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行

  •   white-space:nowra;
    1

• 6. 使用您需要的字体

  • 	@font-face
    	{
    		font-family: myFirstFont;
    		src: url('Sansation_Light.ttf');
    	}
    1
    2
    3
    4
    5

• 7. 删除线

  • text-decoration:none; 
    text-decoration:underline;  下划线样式
    text-decoration:line-through;  删除线样式-贯穿线样式
    text-decoration:overline;      上划线样式
    1
    2
    3
    4

四、 弹性盒

弹性盒的设置，是给父元素设置的

• 1. 子元素一行显示，两端对齐

  • display: flex;
    justify-content: space-between;
    1
    2

• 2. 子元素一行显示，平均对齐

  •  display: flex;
     justify-content: space-around;);
    1
    2

• 3 . 子元素左右居中

  • display: flex;
    justify-content: center;;
    1
    2

• 4. 子元素上下居中

  •   align-items: center;
    1

• 5. 子元素上下左右居中

  •  display: flex;
      align-items: center;
      justify-content: center;
    1
    2
    3

.box{
  height: 300rpx;
  background: #CECECE;
  display: flex;
  justify-content: center;
  align-items: center;
   /* 方向为列  */
  flex-direction: column;
}
/*只是为了区分一下、*/
.box view{
  background: #fff;
  margin: 4rpx;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<view class="box">
  <view>德萨范德萨</view>
  <view>德萨范德萨</view>
  <view>德萨范德萨</view>
  <view>德萨范德萨</view>
</view>
1
2
3
4
5
6

改变一下子元素的排列方向

.box{
  height: 300rpx;
  background: #CECECE;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 方向为行 */
  flex-direction: row;
}
.box view{
  background: #fff;
  margin: 4rpx;
}
1
2
3
4
5
6
7
8
9
10
11
12
13

图片的一个盒子里面，上下左右居中
图片大小只和外层的盒子大小有关，不会改变图片的比例，高度宽度自适应

五、图片上下左右居中，自适应盒子的大小

.postcent{
    width: 100%;
    padding-top: 100%;
    text-align: center; 
    position: relative;
    display: block;
    overflow: hidden; 
}
.postcent img {
    padding: 10px;
    transition: all 0.5s;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: auto;
    max-height: 100%!important;
    max-width: 100%;
    margin: auto!important;
    vertical-align: middle;
    box-sizing: border-box;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<div  class="col-xs-6  col-sm-4 col-md-3">
	<a href="anlidetail.html">
        <div class="anlilistimg">
            <section class="postcent">
            	  <img src="img/index/st1.png" alt="">
            </section>
            <div class="anlitip"> 江湾城-地暖案例</div>
        </div>
    </a>
</div> 
1
2
3
4
5
6
7
8
9
10

现AB两个div设置display：inline-block，出现上下错位问题，当AB里面内容为空时，错位问题消失
看了网上资料以及通过实践分析，总结如下

1.同一行的行内元素对齐方式默认是底部对齐，即vertical-align：baseline
2.对于内容为空的inline-block元素而言，该元素的基线就是它的margin底边缘，否则就是元素的内部最后一行内联元素的基线

解决方式：

1.float方式（考虑脱离流后后面元素不易控制，故不首选）
2.改变vertical-align属性。设置所有内联元素 vertical-align: top/middle/bottom; 属性，改变默认设置

在我自己的项目中将每一项排列的节点加这个，vertical-align: bottom; 就好了