# 前端自修:Homework 1 [問答&資源]
>
>
> 1. 請問 CSS 的屬性position有哪幾種值？
> 2. 承上，請問那幾種值有哪些區別？請講出適合應用的地方。
> 3. display的三個值inline, block, inline-block有什麼異同？可以試著舉出幾個例子嗎？
> 4. 有哪些 HTML 元素是 inline, 哪些是 block？
> 5. 當我設定一個元素的width為300px，並且padding設成10px之後，這個元素的寬度應該會是多少？
> 6. 這次實作的畫面當頻道名稱字太多的時候，會超出一格的大小或者會直接被卡掉，有沒有辦法讓字太多的時候在尾巴顯示...？例如原本名稱叫做：「1234567」，顯示的時候變成：「12345...」？

## 一、

[CSS Layout - The position Property
](https://www.w3schools.com/css/css_positioning.asp)以下五種：static, relative, fixed, absolute or sticky.

## 二、
static：預設
relative：相對
fixed：釘在畫面上
absolute：有個祖元素，跟著祖元素或document的絕對位置。
sticky：介於fixed跟relative的。

### 重要性：
要設定position才能使用right, top, left, bottom等。

## 三、

## 四、

## 五、

320px

## 六、

white-space:nowrap
text-overflow: ellipsis;
width:200px

### 詳細用法教學：
[CSS 語法，文字換行，強迫不換行。
](https://www.puritys.me/docs-blog/article-31-CSS-%E8%AA%9E%E6%B3%95%EF%BC%8C%E6%96%87%E5%AD%97%E6%8F%9B%E8%A1%8C%EF%BC%8C%E5%BC%B7%E8%BF%AB%E4%B8%8D%E6%8F%9B%E8%A1%8C%E3%80%82.html)
[[MDN]text-overflow](https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow)

## 課堂上的補充資料：

我直接複製貼上來這邊。

### 學習資源
[html & css is hard, But it doesn’t have to be
](https://internetingishard.com/html-and-css/)[MarkSheet: A free HTML & CSS tutorial](http://marksheet.io/)
[Learn to Code HTML & CSS
](http://learn.shayhowe.com/html-css/)
### 進階閱讀
[A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
[學習 CSS 版面配置: flexbox
](http://zh-tw.learnlayout.com/flexbox.html)[深入解析 CSS Flexbox](http://www.oxxostudio.tw/articles/201501/css-flexbox.html)