經常使用css樣式

時間 2021-08-14

標籤 css html css3 web 瀏覽器 ide post url spa code 欄目 CSS 简体版

原文原文鏈接

body背景圖片(自適應屏幕大小)

20190122，再次使用以前的發現不行，老是提示invalid property value。後來發現是空格的問題，複製後background這一行每個空格都要從新敲一遍，包括前面的四個空格！！！css

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在父容器中居中

第一種，要寫死高度和寬度html

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

第二種，不須要高度和寬度，可是不兼容IE7一下css3

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

第三種，用css3的transform和position配合web

.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屬性ide

【relative：相對定位】
默認參照父級原始點爲原始點；若是無父級，以文本的上一個元素的底部爲原始點，配合TRBL進行定位；當父級內有padding屬性時，參照父級內容區的原始點進行定位。
（1）不存在TRBL，參照父級左上角；沒有父級，參照瀏覽器左上角；沒有父級元素，可是存在文本，則以文本的底部爲原始點進行定位並將文字斷開。
（2）設定TRBL，而且父級沒有設定position屬性，以父級左上角爲原點進行定位
（3）設定TRBL，而且父級設定position屬性，以父級左上角爲原點進行定位，可是若是父級有padding屬性，那麼之內容區域的左上角爲原點進行定位。post

綜上所述，relative均以父級左上角進行定位，可是受padding的影響。url