2021-05-18

[Lichen5221]

transition

在屬性有變的時候會有漸變的效果。

#box1 {
  width: 200px;
  height: 100px;
  border-radius: 30px;
  text-align: center;
  line-height: 100px;
  transition: all 1s easy-in; // 第一個為針對什麼規則漸變，第二個為漸變的速度，第三個為漸變的模式（可開 devtool 詳查）。
  color: black;
  border: 5px solid orange;
}

#box1:hover {
  background: orange;
  color: white;
  cursor: pointer; // 改變滑鼠的圖案。
}

transition 要放在原來的圖的框框裡，放在更改的框框裡不會有特效出現，可能會有效能問題。

Die Verywandlung transform

#box1 {
  width: 200px;
  height: 100px;
  border-radius: 30px;
  text-align: center;
  line-height: 100px;
  transition: all 1s easy-in;
  color: black;
  background: orange;
  transition: all 0.5s;
  margin: 100px;
}

#box1:hover {
  transform: scale(2); // 還有很多其他功能可開 devtool 詳查。
}

translate 的好處：不會變動其他元素的位置，只會影響到自己，且是按照自己原本的位置偏移，不用算多少位置進行偏移。

position relative 在 設置上下左右時不能用百分比，要用 px 為單位，設定成 absolute 時才可以使用百分比。

利用 transform 置中：

#box1 {
  position: absolute
  width: 200px;
  height: 100px;
  border-radius: 30px;
  text-align: center;
  line-height: 100px;
  transition: all 1s easy-in;
  color: black;
  background: orange;
  top: 50%;
  left: 50%; // 至此都是以圖案的左上角進行拉距，所以會是圖案的左上角在中心點位置。
  transform: translate(-50%, -50%); // 加了這個之後就可以讓圖案置中。
}

[Lichen5221]

CSS Part 3 盒模型 Box Model

什麼是盒模型？

可以把 html 每個元素都看成一個盒子，可以透過 CSS 調整屬性。

如果有 padding & border ，元素本身的寬高都會再加上去，變成不是原先設好的寬高（往外推）。

此時可用 box-sizing 來調整。 content box 即為預設值，也就是往外推。調整成 border-box 就會考慮到 padding & border ，自行調整 content 的寬高。

可以透過 devtool 的盒模型來確認寬高。

了解了才能寫出元素之間互不影響的 CSS 。

display 的三種 block、inline、inline-block

html 檔：

<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>

CSS 檔：

.box {
  background: orange;
  width: 100px;
  height: 100px;
  margin:10 px;
} 

在瀏覽器上呈現三個上下排列的橘色方塊，不會左右排列的原因就是因為預設的 div display 為 block。

div {
  display: block;
}

可從 devtool 查看。

html 檔：

<span class="box">box1</span>
<span class="box">box2</span>
<span class="box">box3</span>

CSS 檔：

.box {
  background: orange;
  width: 100px;
  height: 100px;
  margin:10 px;
} 

瀏覽器上會呈現三個左右排列的橘色方塊，且設定為 inline ，調整寬高或上下邊距都沒用，會根據內容長度大小來調整。調整 margin 只會以方塊為單位左右拉開距離，上下不會變。

如果設定 padding 就會改變，但不會影響其他元素的位置，還是會把高度撐開或變狹小，如果沒有背景就會看不出來。

inline-block 結合兩者優點。變成可以併排又能調整寬高左右。

[Lichen5221]

CSS Part 4 定位 Position

排版的時候很需要。

static & relative

無設置時預設定位方式就是 static 。

html 檔：

<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>

CSS 檔：

body {
  margin: 0 // 把瀏覽器預留的邊距消除。
}
.box {
  background: orange;
  width: 100px;
  height: 100px;
  margin:10 px;
} 

.box:nth-child(2) {
  position: relative; // 相對定位，針對原本的位置調整。
  top: 20px; // 會往下移 20px（頂端多出 20px 的意思），也可向其他方向移，也可以負值。

不會影響到其他元素更動。

absolute & fixed

絕對定位與固定定位。

fixed 針對瀏覽器所看得到的畫面做定位。

CSS 檔：

body {
  margin: 0
}
.box {
  background: orange;
  width: 100px;
  height: 100px;
  margin:10 px;
} 

.box:nth-child(2) {
  position: fixed;
  width: 100px;
  background: red;
  bottom: 100px;
  right: 0px;

不管如何捲動瀏覽器，該圖都會在固定位置。根據 viewport 的位置做定位。

關於 viewport

絕對定位需要一個參考點。

html 檔：

<div class="box">box1</div>
<div class="box">
  <div class="box-inner">
    X
  </div>
</div>
<div class="box">box3</div>

CSS 檔：

body {
  margin: 0
}
.box {
  background: orange;
  width: 100px;
  height: 100px;
  margin:10 px;
  display: block;
  position: relative; // 若要使下面的位置是以 box 為定位的話，需要加上這個，加上這個後就會定位在框框的上右 10px 的位置，不會跑出框框外。
} 

.box-inner {
  position: absolute;
  top: 10px;
  right: 10px;
} // 跑到右上角，相對 body 跑上右 10px 。

往上找找到定位點不是 static 的元素，即為參考點。故 box 需將定位點設為 relative ，box-inner 才會以 box 作為參考點進行絕對位置的定位。

如果還有另一個元素的話，該元素會頂替第一個元素的位置，因為第一個元素已經使用絕對定位移走了。

對 box-inner 使用 relative 定位的話，第一個元素的變動就不會影響第二個元素。使用絕對定位時第二個元素就會替補第一個元素的位置。

z-index

決定圖層順序的 CSS。

z-idex: 數字，數字越大代表順序越前面。

sticky

定位的新屬性，部分瀏覽器不支援（現在不知道有沒有都支援了）。

設定一個邊距，卷軸滾動到該距離時，該元素就會被固定在某處跟著卷軸移動。

（例如一些導覽列往下滑時就會黏在視窗最上方）