CSS-[未整理的內容]
===
###### tags: `css`
CSScoke
https://www.youtube.com/channel/UCQfjTYYrqxPg5LJmDBUesbQ

---

關於CSS Flex
https://developer.mozilla.org/en-US/docs/Web/CSS/flex

Css Flex學習遊戲
http://www.flexboxdefense.com/
https://flexboxfroggy.com/

white-space:nowrap跟text-overflow:ellipsis塞在flexbox裡會失效的解法
https://stackoverflow.com/questions/39838908/text-overflow-ellipsis-not-working-in-nested-flexbox

---

[TailwindCSS]
Awesome Tailwind CSS
https://github.com/aniftyco/awesome-tailwindcss
TailwindCSS Components
https://tailwindcomponents.com/

---

[格線佈局的基本概念](https://developer.mozilla.org/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)

[僞元素](https://ithelp.ithome.com.tw/articles/10222534)

---
面試題
1.以下div的背景色結果為哪種顏色?

.green{
    background-color: green;
}
.red{
    background-color: red;
}

    <div class="red green"></div>

2.float為什麼造成的文字繞圖?
3.請解釋box model(盒子模型)?
引用來源:[MDN web docs-box model](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model)

4.請解釋absolute跟relative有什麼不同
引用來源:[MDN web docs-position](https://developer.mozilla.org/en-US/docs/Web/CSS/position)

static( ==default== )
position屬性預設的值。根據一般文件元素被定位為正常文檔佈局top、right、bottom、left與z-index在這邊無效。
> The element is positioned according to the normal flow of the document. The top, right, bottom, left, and z-index properties have no effect. This is the default value.

relative相對位置
元素被定位為正常文檔佈局,並且基於top、right、bottom與left位移自己。
物件的位移不會影響到其他元素;從而,在同樣的位置上給予頁面內其他static元素編排空間。
當index-z不是auto時,會建立一個新的脈絡佈局。
這效果在display帶有table-*-group, table-row, table-column, table-cell, and table-caption 是不確定的。

> The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left.

> The offset does not affect the position of any other elements; thus, the space given for the element in the page layout is the same as if position were static.

> This value creates a new stacking context when the value of z-index is not auto. Its effect on table-*-group, table-row, table-column, table-cell, and table-caption elements is undefined.

absolute絕對位置
元件會被移出正常文檔佈局，並不為元件預留空間，通過指定元件相對於最近的非 static 定位父層元件的偏移，來確定元件位置。絕對定位的元件可以設置外邊距（margins），且不會與其他邊距合併。
> The element is removed from the normal document flow, and no space is created for the element in the page layout.

> It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left.

> This value creates a new stacking context when the value of z-index is not auto. The margins of absolutely positioned boxes do not collapse with other margins.

fixed固定位置
元件會被移出正常文檔佈局，並不為元件預留空間，而是通過指定元件相對於可視區（viewport）的位置來指定元件位置。元件的位置在螢幕滾動時不會改變。渲染時，元件會出現在的每頁的固定位置。 fixed 屬性會建立新的層疊上下文。當父層元件的 `transform`, `perspective` 或 `filter` 屬性非 `none` 時，容器由可視區改為該父層元件。
> The element is removed from the normal document flow, and no space is created for the element in the page layout.

> It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none (see the CSS Transforms Spec), in which case that ancestor behaves as the containing block. (Note that there are browser inconsistencies with perspective and filter contributing to containing block formation.)

> Its final position is determined by the values of top, right, bottom, and left.

> This value always creates a new stacking context. In printed documents, the element is placed in the same position on every page.

sticky
元件根據正常文檔佈局進行定位，然後相對它的最近滾動父層元件（nearest scrolling ancestor）和[containing block](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_Block) (nearest block-level ancestor)，包括`table-related`元件，基於top, right, bottom, 和left的值進行偏移。偏移值不會影響任何其他元件的位置。
該值會建利一個新的層疊上下文（stacking context）。
注意，一個sticky元件會“固定”在離它最近的一個擁有“滾動機制”的父層元件上（當該父層元件的overflow 是hidden, scroll, auto, 或overlay時），即便這個父層元件不是最近的真實可滾動父層元件。這有效地抑制了任何“sticky”行為（詳情見[Github issue on W3C CSSWG](https://github.com/w3c/csswg-drafts/issues/865)）。
> The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table-related elements, based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements.

> This value always creates a new stacking context. Note that a sticky element "sticks" to its nearest ancestor that has a "scrolling mechanism" (created when overflow is hidden, scroll, auto, or overlay), even if that ancestor isn't the nearest actually scrolling ancestor. This effectively inhibits any "sticky" behavior (see the GitHub issue on W3C CSSWG).

overflow
role=main

toggle 可自由增加或刪除class

[role=main] {
  /* CSS goes here */
}