css學習筆記（一）

樑廣銘發表於2018-06-11
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);/不要顏色（黑色），半透層背景/

相關文章