css學習筆記（一）

position定位

CSS position屬性用於指定一個元素在文檔中的定位方式。top，right，bottom 和 left 屬性則決定了該元素的最終位置。

定位類型

• 定位元素（positioned element）是其計算後位置屬性爲 relative, absolute, fixed 或 sticky 的一個元素。
• 相對定位元素（relatively positioned element）是計算後位置屬性爲 relative 的元素。
• 絕對定位元素（absolutely positioned element）是計算後位置屬性爲 absolute 或 fixed 的元素。
• 粘性定位元素（stickily positioned element）是計算後位置屬性爲 sticky 的元素。

大多數狀況下，height和width 被設定爲auto的絕對定位元素，按其內容大小調整尺寸。可是，被絕對定位的元素能夠經過指定top和bottom ，保留height未指定（即auto），來填充可用的垂直空間。它們一樣能夠經過指定left 和 right並將width 指定爲auto來填充可用的水平空間。

除了剛剛描述的狀況（絕對定位元素填充可用空間）：

• 若是top和bottom都被指定（技術上，而不是auto），top 勝出。
• 若是指定了left 和right兩側，則在direction爲ltr（英語，水平日語等）時left 贏，而且在direction爲rtl時right贏（阿拉伯文，希伯來文等）。

語法

position 屬性被指定爲從下面的值列表中選擇的單個關鍵字。

取值

static
該關鍵字指定元素使用正常的佈局行爲，即元素在文檔常規流中當前的佈局位置。此時 top, right, bottom, left 和 z-index 屬性無效。

relative
該關鍵字下，元素先放置在未添加定位時的位置，再在不改變頁面佈局的前提下調整元素位置（所以會在此元素未添加定位時所在位置留下空白）。position:relative 對 table-*-group, table-row, table-column, table-cell, table-caption 元素無效。

absolute
不爲元素預留空間，經過指定元素相對於最近的非 static 定位祖先元素的偏移，來肯定元素位置。絕對定位的元素能夠設置外邊距（margins），且不會與其餘邊距合併。

fixed
不爲元素預留空間，而是經過指定元素相對於屏幕視口（viewport）的位置來指定元素位置。元素的位置在屏幕滾動時不會改變。打印時，元素會出如今的每頁的固定位置。fixed 屬性會建立新的層疊上下文。當元素祖先的 transform 屬性非 none 時，容器由視口改成該祖先。

實例

• position: fixed;相對於屏幕定位

.topNavBar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}/*相對於屏幕左上角固定

• 絕對定位，在子元素寫position: absolute;在父元素寫position: relative;

.userCard .welcome {
    display: inline-block;
    position: relative;
}

.userCard .welcome .triangle {
    display: block;
    position: absolute;
    top: 100%;
    left: 4px;
}/*緊貼父元素下方，在父元素從左往右4px邊距

簡單的幾種居中

這只是暫時用到的居中方法，在後面會專門更新一篇居中

• 讓 .xxx 子代中的內聯元素居中

.xxx {text-align: center;}

• div子標籤水平居中

div{
  margin-left:auto;
  margin-right:auto;
}

• div高度爲30px，div標籤內大小爲14px字垂直居中

div{
  font-size: 14px; 
  line-height: 30px;
}

或

div{
  font-size: 14px; 
  line-height: 24px; 
  padding: 3px 0;
}

行高等於高度，或者行高加上padding等於高度，就可使div內文字垂直居中，可是僅限於在font-size比較小的時候能夠用line-height來控制內聯元素所佔的高度，太大就會容易出bug，若是須要一個特定的高度，能夠在那基礎上添加padding來增長。

元素的高度

文檔流

文檔內元素流動的方向叫作文檔流。

內聯元素從左往右流動，若是寬度不夠就會另起一行，漢字的話一句話有可能會從中間，可是若是是英文，css若是沒有聲明 word-break: break-all; 英文是不會換行的。

塊級元素是從上往下流動，每一個塊佔一行。

塊級元素高度

一個元素的高寬度是由其內容決定的，不到萬不得已的時候通常不要設置寬高，塊級元素高度是由其內部文檔流高度總和決定的，並不必定是等於，只是決定，例如設置字體是100px，可是它的元素高度卻不是100px。

內聯元素的高度

給內聯元素設置寬高是無效的，設置 margin-top margin-bottom 也是無效的，內聯元素的高度也是由文檔流內部元素決定，居中對齊是由基線對齊的，並且因爲瀏覽器會給不一樣字體一個建議的行高，這個內聯元素的行高就是綜合建議行高和其餘相關設計來決定的。

零散知識點

• 背景圖片居中：background-position: center center;
• 背景圖片按比例縮放：background-size: cover;
• 設置寬度能夠設置最大寬度，這樣若是屏幕變小就能夠自適應。
• 設置display:inline block;後，外邊距margin不會合並。

• 想要並排，先在子元素float:left;而後在全部子元素的父元素上設置clearfix，後加上僞類。

  .clearfix::after {
    content: '';
    display: block;
    clear: both;
  }

• 作半透層背景：background-color: rgba(0,0,0,0.8);/不要顏色（黑色），半透層背景/