--- tags: css,html --- # html/css 快速入門與複習 #### 補充工具 * [ColorZilla chrome 選擇顏色](https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?hl=zh-TW) ### css 調整外觀與class/id demo: [角色卡](https://codepen.io/jane0819tw/pen/WVOjER) * css重點摘要 1. 該物件之內容物由左至右座排列並向上對齊 ```typescript= //預設由左到右排列 display: flex ``` 2. 利用inline-block(包住內容物)與vertical-align達到display: flex的效果 ```typescript= //inline-block運用，配合vertical-align 對其上方 vertical-align: top display: inline-block ``` ```typescript= //位置對齊於預設 vertical-align: initial ``` 3. 背景background調整 ```typescript= //圖片不使用img加在html，改用background-image background-image: url() //將背景置中 background-position: center //左右 上下 background-position: 0% 80% //上下左右盡量撐滿 background-size: cover // no reoeat background background-repeat: no-repeat ``` ### css的內外距 demo: [角色卡介紹](https://codepen.io/jane0819tw/pen/voZeEP?editors=0110) * css重點摘要 1. 針對該物件內容做上下左右排版 ```typescript= //可自由排列 display: flex //左右置中 justify-content: center //上下置中 align-items: center ``` 2. 超出物件範圍的時候，使用overflow蓋住超出部分 ```typescript= //超出這個物件的就隱藏 overflow: hidden ``` 3. 針對物件的內外距使用 ```typescript= //內距 上下 / 左右 padding: 20px 10px //外距 margin-right: 15px ``` 4. 一行字的高度 ```typescript= //一行字高度調整 line-height: 20px ```