css學習

一、flex 佈局

.site {
    display: flex;
    flex-direction: column;
}

main {
    flex:1;
    flex-direction: row;
    display: flex;
    flex-wrap:wrap;
    justify-content: flex-start;
    align-content: flex-start;
}

 

二、position:relative 和position:absolute的區別

    position:relative相對定位
    1. 如何定位？
        每一個元素在頁面的普通流中會「佔有」一個位置，這個位置能夠理解爲默認值，而相對定位就是將元素偏離元素的默認位置，但普通流中依然保持着原有的默認位置。（在父級節點的content-box區定位，父級節點有文字的話，元素的默認位置則是緊隨文字）
    2. 不會改變行內元素的display屬性。
    3. 並無脫離普通流，只是視覺上發生的偏移。

    position:absolute絕對定位

     1. 如何定位浮動？

• 設置了TRBL
  相對最近的設定了position:relative/absolute的父（祖先）節點的padding-box的區進行定位（忽略文字），找不到符合條件的父（祖先）節點，則相對瀏覽器窗口進行定位。

• 沒有設置了TRBL
  則默認浮動，默認浮動在父級節點的content-box區。

    2. 無論是塊級元素仍是行內元素，應用了position:absolute以後，display爲block：

• 能夠設置width和height

• 沒有設置的話，width默認爲auto

3. 脫離文檔流，容器（父）元素將得不到脫離普通流的子元素高度