常用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%;
}

移动端开发一定要加上

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

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);
}


#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%);
}

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

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

 

 

 

 

 

点赞

Leave a Reply

Your email address will not be published. Required fields are marked *