CSS 樣式介紹（四）

定位屬性

• 元素的定位屬性主要包括定位模式和邊偏移兩個部分的組合。
• 邊偏移定位：top 頂部偏移量，定義元素相對於其父元素上邊線的距離，還有bottom,left,right。

定位模式（定位的分類）,在css中，postion屬性用於定義元素的定位模式，包括static自動定位(默認模式,對於偏移量無效的,一般用它來清除定位)、relative 相對定位，相對於原文檔流(原自己位置)的位置進行定位、absolute 絕對定位，相對於上一個已經定位的父元素進行定位（如果父元素(祖宗元素)沒有定位，會以瀏覽器爲準進行定位）、fixed 固定定位，相對於瀏覽器窗口進行定位，不佔位置，完全脫離標準。

注意：定位模式轉換：跟浮動一樣，元素添加了 絕對定位和固定定位之後，元素模式也會發生轉換，都轉換爲
行內塊模式,因此比如 行內元素
如果添加了絕對定位或者固定定位後，可以不用轉換模式，直接給高度和寬度就可以了。

1. 定位屬性的使用

• 記住口訣：子絕父相，子元素是絕對定位，父元素是相對定位，要不然父元素高度會爲0。

div:nth-child(1) {
    background-color: purple;
    left: 20px; /*邊偏移*/
    top: 30px; /*邊偏移*/
    position: relative; /**相對定位, 不脫離標準流，佔有原來的位置*/
    z-index: 1; /**想要調整重疊定位元素的堆疊順序，可以對定位元素應用z-index屬性去完成,值越大元素越居上。默認都是0 (如果取值相同,後面添加的會覆蓋到前面的上面)*/
}


div:nth-child(2) {
    width: 100px;
    height: 100px;
    top: 100px; /*上邊偏移100px*/
    left: 100px; /*左邊偏移100px*/

    /*定位模式 絕對定位: 脫離標準流，它不佔有原來位置,如果是絕對定位，原來的位置會被空出來**/
    position: absolute; 
    /*margin: 0 auto; 加了絕對定位的盒子 margin的auto就無效*/
    /*所以絕對定位盒子水平/垂直居中，需要1.首先left: 50% 父盒子的一般大小。2.然後走自己外邊距負的一半值就可以了 比如用marigin-left*/
    background-color: pink;
    z-index: -1;
}

2. 隱藏元素屬性的使用

div:first-child {
    display: none; /**隱藏元素 不是刪除，看不見而已，
    一直存在頁面中,特點：隱藏後，不保留原來位置。用得比visibility更多*/
    visibility: hidden;  /**隱藏元素 不是刪除，看不見而已，
    一直存在頁面中,特點：隱藏後，保留原來位置*/
    visibility: visible; /*顯示元素*/ 
}

3.overflow 屬性

div:nth-child(4) {
    overflow: visible; /*默認的 超出顯示*/
    overflow: auto; /*自動 超出顯示滾動條，不超出不顯示*/
    overflow: scroll; /*顯示滾動條*/
    overflow: hidden; /*溢出隱藏：超出的部分隱藏條*/
}

4.屬性擴展

div {
    width: 100px;
    height: 100px;
    background-color: purple;
    cursor: default;/*鼠標經過鼠標的形狀 小白*/
    cursor: pointer;/* 小手*/
    cursor: move;/* 移動*/
    cursor: text; /*文本*/
    margin-left: auto;
    margin-right: auto; /*左右自動auto 盒子可以居中對齊，等同於margin: 0 auto*/
    word-break: break-all; /*允許單詞拆開顯示*/
    word-break: keep-all;  /* 不允許單詞拆開顯示 保持單詞完整性*/
    white-space: normal; 
    white-space: nowrap; /* 強制單詞在一行顯示*/
    text-overflow: clip;  /* 強制裁剪，必須喝overfolw 搭配使用*/
    text-overflow: ellipsis; /**多餘的用省略號顯示，必須和overfolw 搭配使用**/
    overflow: hidden;
}

input {
    /*outline: 1px solid red;  很少用到*/
    outline: 0; /**取消外部輪廓線,平時用這個*/
    border: 1px solid blue;
}

textarea {
    resize: none; /*防止文本域拖拽*/
    outline: none; /*取消輪廓線*/
    width: 200px; 
    height: 100px;
    /*vertical-align: middle 中線對齊，bottom 底線對齊,baseline 基線對齊,top 頂線對齊*/
    vertical-align: middle; /*vertical-align 對於塊級元素 無效,針對於行內元素或者行內塊元素，特別是行內塊元素，通常用來控制圖片和表單與文字的對齊*/
}

img {/* 行內塊元素*/
    /*vertical-align: baseline; 默認的是基線對齊*/
    vertical-align: middle;
    vertical-align: top; /*解決圖片底測有縫隙的問題. 低版本*/
}