经常使用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在父容器中居中

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

    width: 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;

}

CSS定位

【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的影响。

CSS选择器

元素选择器、类选择器、ID选择器、

选择器分组：,分割

属性选择器：[]

组合选择器：元素.类选择器

后代选择器：空格

子元素选择器：>

相邻兄弟选择器：+