常用css样式

body背景图片(自适应屏幕大小)

20190122，再次使用之前的发现不行，总是提示invalid property value。后来发现是空格的问题，复制后background这一行每一个空格都要重新敲一遍，包括前面的四个空格！！！

html,body { height:100%; overflow:hidden;}   /*body的高度和宽度为屏幕大小*

body{margin:0;padding:0; list-style:none;}   

body{
　　background:url(./image/bd.jpg) no-repeat center fixed;
　　background-size:100% 100%;
}

移动端开发一定要加上

<meta name="viewport" content="width=device-width, initial-scale=1">

 白色透明蒙版,白色透明边框

background: rgba(255,255,255,.2);    border: 1px solid rgba(255,255,255,.3)

背景图片距离右侧10px(登录框密码框右侧的小图标)

background:url(./image/user.png) no-repeat right 10px center;

 将某个div放在底部

#bottom_div{
     position: fixed;
     bottom: 0px;
     width: calc(100% - 30px);
}

<!--为了防止覆盖上一个div的内容,可以将上一个div的padding-bottom的值设为底部div的高度-->
#pdsaomaPackList{
     padding-bottom: 127px;
}

让div在父容器中居中

第一种，要写死高度和宽度

     800px;
    height: 454px;
    position: absolute;     /*父容器的position要为relative*/
    left: 50%;
    top: 50%;
    margin-left: -400px;   /*为div的width的一半*/
    margin-top: -227px;   /*为div的height的一半*/

第二种，不需要高度和宽度，但是不兼容IE7一下

position:absolute;
left:0;
top:0;
right:0;
bottom:0;
margin:auto;

第三种，用css3的transform和position配合

.parent{
    position:relative;
}
.child{
    position:absolute;
    top:50%;
    left:50%;
    border-radius: 5px;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    transform:translate(-50%,-50%);
}

子DIV在父容器中垂直居中

        margin: 0 auto;  /*水平居中*/
        position: relative;
        top: 50%;  /*向下偏移父容器的50%*/
        transform: translateY(-50%);  /*向上偏移自身的50%*/

子元素跟父元素的高度一致

.parent{
            position: relative;
}
.inner-right {
            position: absolute;
            top: 0;
            right: 0;
            height: 100%;
            overflow: auto;

}

 

【absolute：绝对定位】
  默认参照浏览器左上角，配合TOP、RIGHT、BOTTOM、LEFT（以下简称TRBL）进行定位，具有以下属性：
  （1）无TRBL的情况下，参照父级左上角；无父级，参照浏览器左上角；无父级元素，但存在文本，参照最后最后一个文字的右上角为原点但是不断开文字，覆盖与上方。
  （2）如果设定TRBL，并且父级没有position属性（不论是absolute还是relative），都是默认以浏览器左上角开始定位，位置由TRBL决定。
  （3）如果设定TRBL，并且父级有position属性（不论是absolute还是relative），默认以父级左上角为原点开始定位，位置由TRBL决定。
 以上三点我们就可以总结出：若想使用absolute进行定位，那我们就要明确两点：
 第一：设定TRBL

 第二：父级设定position属性

  【relative：相对定位】
  默认参照父级原始点为原始点；如果无父级，以文本的上一个元素的底部为原始点，配合TRBL进行定位；当父级内有padding属性时，参照父级内容区的原始点进行定位。
  （1）不存在TRBL，参照父级左上角；没有父级，参照浏览器左上角；没有父级元素，但是存在文本，则以文本的底部为原始点进行定位并将文字断开。
  （2）设定TRBL，并且父级没有设定position属性，以父级左上角为原点进行定位
  （3）设定TRBL，并且父级设定position属性，以父级左上角为原点进行定位，但是如果父级有padding属性，那么以内容区域的左上角为原点进行定位。

   综上所述，relative均以父级左上角进行定位，但是受padding的影响。