# [Style] 父層容器下 `overflow: hidden`，造成子層項目的 `outline` 無法完整顯示

###### tags: `前端筆記` `style`

日前在工作上遇到了一個問題，發現當 a 元素 `focus` 後沒辦法顯示完整的外框


打開 dev tool 發現 style 確實下的沒錯（當元素 `focus` 時就新增 `outline-color: White`


那為什麼會出現外框顯示不完全的情況呢？

## `overflow: hidden` 讓父層容器及其子項目都不可以超出父層容器

經過前輩提點後我才發現這個 a 元素的父層容器（`ul`）有使用 `overflow: hidden`，所以 `ul` 及其子層項目都不可以超出父層容器


### 但為什麼只有部分的外框被切掉呢？

更進一步看，就會發現第一個 a 元素竟然只會顯示一半的外框而已


但多虧前輩的提點以及 dev tool 的元素 box model 顯示，可以發現被切開的部分，剛好就是使用 `overflow: hidden` 之父層容器（`ul`）之外

（第一個是顯示一半，但第二個只有左邊被切掉）

前輩告知 `outline` 屬性並不會直接算在 css 的 box model 區塊內，因此我後來又再次依照關鍵字搜 google，發現了這一篇提問（[Which part of the box model does the outline property belong to?](https://stackoverflow.com/questions/44664935/which-part-of-the-box-model-does-the-outline-property-belong-to)）

### `outline` 並不算在 css box model 之內

根據提問的解答，發現 `outline` 並不在 css box model 之內

（box model 是由 content -> padding -> border -> margin 所組成）

而且 `outline` 還有其他規則：

1. Outlines do not take up space.
2. The outline created with the outline properties is drawn "over" a box, i.e., the outline is always on top, and does not influence the position or size of the box, or of any other boxes.
3. Since the outline does not affect formatting (i.e., no space is left for it in the box model), it may well overlap other elements on the page.

> 1. outline 並不會佔任何空間
> 2. outline 會被緊貼在 box model 之外（有用 margin 的話那麼 outline 就會緊貼在 margin 之外），且不會影響 model box 的位置及大小等等（簡單來說 outline 並不會影響 model box）
> 3. 因為 outline 並不影響 model box，所以 outline 是會互相重疊的（如果空間給不夠的話）

（空間不夠讓 outline 重疊了）

### 推 `outline` 的目前元素之容器的空間，讓 `outline` 可以健康長大

因為 `outline` 是下在 `li` 內的 `a` 元素，所以需要先在 `li` 多推空間（用 `margin` 推，所以使用 `overflow: hidden` 的 `ul` 就會有更多位置，讓 `outline` 可以完整顯示）

### 那為什麼 `outline` 會依照 `a` 元素自適應顯示呢？


因為 `a` 元素有使用 `display: inline-block`，所以其 box model 會依照文字的大小建立，`outline` 也會自動緊貼在 box model 之外

## Recap

1. `outline` 不算在 box model 之內且不佔位，因此不會影響 box model 的大小
2. `overflow: hidden` 會讓其元素及子層項目超出目標元素的 box model 隱藏
3. 切版是容器（父層）及項目（子層）之無限的巢狀結構（容器於項目並不是絕對的，而是相對的，端看判別時以什麼為基準）