前端面試資料整理【css篇】

donggg發表於2022-04-30
前端面試CSS

選擇器

分類
簡單選擇器：id選擇器、類選擇器、標籤選擇器、
組合選擇器：後代選擇器（空格）、子選擇器（>）、兄弟選擇器 （+）、通用選擇器（~）
偽類（:hover）
偽元素（::before, ::firt-child，::not()）
屬性選擇器

ps. 兄弟選擇器 （+）與通用選擇器（~）： “+”指“自己”相鄰兄弟，“~”會應用所有兄弟

優先順序
!important 最高
內聯 1000分
id選擇器 100 分
類選擇器、屬性選擇器、偽類 10 分
標籤選擇器、組合選擇器、偽元素 1 分
優先順序按照累加計算，數值越高優先順序越高。

<!-- 優先順序 -->
<style>
p {
    color: red;
}
.p {
    color: grey;
}
div > p {
    color: green;
}
</style>
<div>
    <p class="p">1111</p>
</div>
<p class="p">222</p>

<!-- 兄弟選擇器與通用選擇器 -->
<style>
div~p {
    color: red;
}
div+p {
    color: green;
}
</style>
<body>
<div>111</div>
<p>1</p>
<p>2</p>
<p>3</p>
</body>

IFC/BFC

IFC
英文全程 inline formating context， 行內格式上下文。
特點：

  • 自左向右排列
  • 由行高 line-height 決定高度，即通過 inline-level box 計算，但是具有多個 inline-level box 的IFC，排版通過 vertical-align 決定。
  • 當長度過大時，會自動換行，一行是一個 inline-level box（即行級盒模型）。

ps. 換行的相關設定

標明如何斷句：word-break: break-all 直接換行 | break-word 根據單詞，遇到空格換行 | keep-all 不換行 | normal 瀏覽器預設行為
標明是否斷句：word-wrap: break-word | normal
標明空格斷句：white-space: normal 瀏覽器預設行為 | pre-wrap 同 html 編輯換行相同 | nowrap 不換行 | pre-line 剔除空格，保留換行 | pre 同 <pre>

BFC
英文 block formating context，塊級格式上下文。
特點：

  • 一個 BFC 佔一行，垂直方向排列，形成的是 block-level box（即塊級盒模型）
  • BFC 內部隔離
  • 處在同一個BFC下，相互影響，發生 margin 重疊
  • 觸發 BFC 的方式有：浮動、設定 overflow、設定 margin、絕對定位、固定定位、display: flex

盒模型

標準模式：設定了 <!DOCTYPE > ，標識 html 版本
怪異模式：未設定 <!DOCTYPE >

盒模型：content、padding、border、margin 的結構
盒模型計算方式可以通過 css3中 box-sizing: border-box | content-box; 設定計算方式，其中 content-box，是計算 content 來表示長寬，border-box 是將 content + padding + border，一起計算至長寬中，類似於IE6的怪異模式。

其他

margin 雙邊距

主要體現在兩個方面：

  • 父與子邊距重疊，即子無法與父元素拉開邊距
  • 兄弟邊距重疊

父與子清除邊距重疊：

  • 父容器增加非 overflow: visible;，例如 overflow: scroll | hidden;
  • 父容器增加 padding 或 border
  • 父容器浮動
  • 父容器設定 position: absolute;
  • 父容器設定 display: flex

兄弟清除邊距重疊：

  • 設定浮動
  • 父設定 display: flex

原理是，通過宣告成 BFC 按照 BFC 規則佈局。

margin 塌陷

父元素使用了浮動導致。

z-index

border/bacground < z-index<0 < block-level < float < inline-level < z-index:0 < z-index>0

flex

使用flex能做那些佈局？（待補充）

@media

待補充

transform

有那些功能？（待補充）

常見的佈局

垂直居中，水平居中

html

<div class="father">
    <div class="child"></div>
</div>

css

// 絕對定位
.father {
    width: 500px;
    height: 500px;
}
.child {
    width: 50px;
    height: 50px;
}
// 絕對定位
// flex
// transform:
// margin: 0 auto;

左固定，右適應

待補充

相關文章