常用 Props(下)
🙆🏻 你一定會用到的CSS屬性 - 排版實用篇
width & height
寬度與高度絕對是你一定會使用到的屬性,能使用的屬性值單位,較常見的有:px、%、em、rem、vw、vh,大部分可分為「相對單位」與「絕對單位」。
100%與100vw的差別?
寬100%的範圍:我們設定一個物件 width: 100%;
的時候,該物件寬度將會是父層內容的可運用空間。
而vw代表的是viewport width,100vw為整個可視螢幕的寬度。
background
設定網頁中元素的背景,background的值有多種css屬性所組成,完整的寫完可以高達8個值。
值的順序如下,值的順序寫錯可能整段都會失效,需特別注意,如果記不起來順序,把每一個分開寫也是可以的。
background-color
background-image
background-attachment
background-repeat
background-poition
background-size
border
透過border設定邊框的樣式,可以一次設定上下左右四個邊框,也能分別設定,border通常會同時包含邊框的粗細、邊框的顏色、邊框的樣式。
border-radius
添加圓角的效果,跟border一樣,border-radius其實是一個縮寫,集合了左上、右上、右下、左下,可以為四個邊圓角設定不同數值,設定方向順序為 border-radius: 左上 右上 右下 左下
margin & padding
padding: 內距,調整border內到內文之間的距離。
margin: 外距,調整border外的與其他元素的距離。
margin能設置負值,padding不能設置負值
💻 效率提升小技巧 codepan快捷鍵
Windows | Mac | |
---|---|---|
新增<標籤> | 標籤名 + tab鍵 | 標籤名 + tab鍵 |
存檔 | Ctrl + S | Command + S |
往後 縮排 | Ctrl + } 或 | Command + } 或 |
往前 縮排 | Ctrl + } 或 | Command + } 或 |
新增&解除註解 | Ctrl + / | Command + / |
重複選取相同的單字 | Ctrl + D | Command + D |
刪除 行 | Ctrl + X | Command + X |
小結
作業
使用 上述所學的常用屬性在codepen上試著做出一張自己的名片
參考來源
Last updated