常用 Props（下）

🙆🏻 你一定會用到的CSS屬性 - 排版實用篇

width & height

寬度與高度絕對是你一定會使用到的屬性，能使用的屬性值單位，較常見的有：px、％、em、rem、vw、vh，大部分可分為「相對單位」與「絕對單位」。

100%與100vw的差別？

寬100%的範圍：我們設定一個物件 width: 100%; 的時候，該物件寬度將會是父層內容的可運用空間。 而vw代表的是viewport width，100vw為整個可視螢幕的寬度。

background

設定網頁中元素的背景，background的值有多種css屬性所組成，完整的寫完可以高達8個值。

background: gray url("test.png") scroll no-repeat 50% 50% / 50% 50%;

值的順序如下，值的順序寫錯可能整段都會失效，需特別注意，如果記不起來順序，把每一個分開寫也是可以的。

1. background-color

2. background-image

3. background-attachment

4. background-repeat

5. background-poition

6. background-size

範例
background: gray url("test.png") scroll no-repeat 50% 50% / 50% 50%;
你可以寫成👇🏻這樣
background-color: gray;
background-image: url("test.png");
background-attachment: scroll;
background-repeat: no-repeat;
background-poition: 50% 50%
background-size:5 0% 50%;

border

透過border設定邊框的樣式，可以一次設定上下左右四個邊框，也能分別設定，border通常會同時包含邊框的粗細、邊框的顏色、邊框的樣式。

border-width: 1px;
border-color: white;
border-style: none;

border-radius

添加圓角的效果，跟border一樣，border-radius其實是一個縮寫，集合了左上、右上、右下、左下，可以為四個邊圓角設定不同數值，設定方向順序為 border-radius: 左上 右上 右下 左下

/* 設定一個值 */
border-radius: 四角;

/* 設定兩個值  */
border-radius: [左上 右下] [右上 左下];

/* 設定三個值 */
border-radius: 左上 [右上 左下] 右下;

/* 設定四個值 */
border-radius: 左上 右上 右下 左下;

margin & padding

padding: 內距，調整border內到內文之間的距離。

margin: 外距，調整border外的與其他元素的距離。

圖片來源：W3Schools

/* 設定一個值 */
margin: 四邊外距;
padding: 四邊內距;

/* 設定兩個值  */
margin: 上下外距 左右外距;
padding: 上下內距 左右內距;

/* 設定三個值 */
margin: 上 左右 下;
padding: 上 左右 下;

/* 設定四個值 */
margin: 上 右 下 左;
padding: 上 右 下 左;

margin能設置負值，padding不能設置負值

💻 效率提升小技巧 codepan快捷鍵

	Windows	Mac
新增<標籤>	標籤名 ＋ tab鍵	標籤名 ＋ tab鍵
存檔	Ctrl + S	Command + S
往後 縮排	Ctrl + } 或 tab	Command + } 或 tab
往前 縮排	Ctrl + } 或 tab	Command + } 或 tab
新增＆解除註解	Ctrl + /	Command + /
重複選取相同的單字	Ctrl + D	Command + D
刪除 行	Ctrl + X	Command + X

小結

作業

使用 上述所學的常用屬性在codepen上試著做出一張自己的名片

參考來源

• https://www.w3schools.com/css/