CSS Note

weight:100%

• 若沒有給預設值，會自動填滿整個瀏覽器的頁面寬

height:100%

• 沒有預設值，沒寫就是null
• height的百分比值需要父元素有一個有效的高度值才能起作用
  -ex.
  ​​height: 100%; margin: 0; padding: 0;
  ​​}
  

box-sizing：border-box

• 讓你不用手動加減就可以涵蓋padding+margin在原本容器尺寸

background-image

• 插入背景圖片

linear-gradient漸層

• background: linear-gradient(方向/角度, 顏色1 位置(％數), 顏色2 位置(％數)....);)
• 要是方向沒寫的話，預設為由上往下，若填寫角度則由左下角為圓心順時針旋轉
• ex.

linear-gradient(blue, yellow 30%, blue 90%)

position 定位

• absolute(絕對定位)

  • 使用absolute屬性定位的元素是以在他所處上層容器的相對位置，若沒有上層容器，則以body(螢幕左上角)位置作為相對位置
  • 上層元素要設定屬性position:relative
  • 當畫面在捲動時，有該屬性的元素還是會隨著頁面捲動。

• fixed(固定定位)

  • 相對於 瀏覽器視窗 來定位，即便頁面捲動，它還是會固定在相同的位置。

• relative(相對定位)

  • 會使其元素「相對地」調整其原本該出現的所在位置，做出調整。
  • 例子，假設設定兩個帶有顏色的容器。
    
  • 若增加relative屬性後且增加距離原本元素top:100px後。
    

• sticky （跟relative 很像）

  • 只要內層元素設定屬性sticky就好，在設定top/left/right/ bottom，就可以表達距離外層元素多少距離，而且長度超過螢幕尺寸（有捲軸的產生)，不論我們怎麼轉他都是黏在那邊
  • 預設滿版，width: 100％
    

font-weight(文字體粗細)

Demo 傳送門

line-height

• text 裡的行高

transition 動畫

• opacity .5s .5s //延長多久 delay多久

常見屬性

• transition-delay
• transition-duration
• transition-property
• transition-timing-function
• 可以跟transform一起搭配

例子

假設html 有一個容器，我們在css設定他碰到時容器會以2秒時間增長程式碼如下。

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}
div:hover {
  width: 300px;
}

transform

• 2D/3d transform
• 常見屬性：
  • translate以原本容器所在處，往X或Y軸移動，
  • scaleX/scaleY()
  • rotate(角度) 讓容器原地旋轉多少角度，若角度值為負數，則逆時間旋轉，要是角度為負責代表逆時鐘旋轉。

transform:translate

z-index層

• 只有在設定position 的元素上會有效
• 設定值越高越前面，值可以為負數
• 檢查

1. 被覆蓋的層(想要置頂的層）的position是否也為relative或者absolute
2. 如果1成立，則判斷是否此層的z-index比誤覆蓋的層的z-index數值大
3. 如果2成立，判斷是否此層的父級元素比誤覆蓋的層的z-index數值大
4. 如果3成立，判斷是否此層的父級元素比誤覆蓋的層的父級層的z-index數值大

overflow

• 元素要是超出某一範圍時該怎麼辦
• 常見的值
  • overflow:auto; //預設會自動使用捲軸
  • overflow:visible;　//顯示的文字或圖片會直接超出範圍，不使用捲軸。
  • overflow:hidden;　//自動隱藏超出的文字或圖片。
  • overflow:scroll;　//自動產生捲軸。
  • overflow:inherit;　//繼承自父元素的可見性。

css 選擇器- 子選擇器(選擇器之間使用>大於符號)

選擇父元素的子元素，但不包括子元素的子元素

 <div class="div1"><p>div1-P1</p><span><p>div1-P2</p></span></div>
 <div class="div2"><p>div2-P1</p><span><p>div2-P2</p></span></div>

.div1 > p {
	color: #F00;
}
.div2 p {
	color: #F00;
}

tags: css