本篇文章將給大家總結分享75道前端面試CSS中的高頻考點，幫助同學們力闖秋招，趕快收藏起來學習啦！

前端（vue）入門到精通課程：進入學習
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調試工具：點擊使用

理論篇

1. box-sizing 屬性值有什么作用？

用來控制元素的盒子模型的解析模式，默認為content-box

• context-box：W3C 的標準盒子模型，設置元素的 height/width 屬性指的是 content 部分的高/寬

• border-box：IE 傳統盒子模型。設置元素的 height/width 屬性指的是 border + padding + content部分的高/寬

【學習視頻分享：css視頻教程、web前端】

2. absolute 絕對定位，是相對于誰的定位？

CSS position屬性用于指定一個元素在文檔中的定位方式。

absolute 的元素會被移出正常文檔流，并不為元素預留空間，通過指定元素相對于最近的非 static 定位祖先元素進行定位，確定元素位置。絕對定位的元素可以設置外邊距，且不會與其他邊距合并。

3. 行內元素和塊級元素有什么區別？

行內元素：一個行內元素只占據它對應標簽的邊框所包含的空間。

塊級元素：塊級元素占據其父元素（容器）的整個空間，因此創建了一個“塊”。

區別：

• 是否另起一行：認情況下，行內元素不會以新的一行開始，而塊級元素會新起一行。

• 是否可設置寬高：塊級元素可以設置 width, height屬性，注意：塊級元素即使設置了寬度，仍然是獨占一行的。 而行內元素設置 width, height 無效。

• 是否可設置內外邊距：塊級元素都可，行內元素的水平方向的 padding-left/right, margin-left/right 都產生邊距效果，但是豎直方向的 padding-top/bottom, margin-top/bottom 都不會產生邊距效果。（也就是水平方向有效，豎直方向無效）

• 是否包含對方：塊級元素可以包含行內元素和塊級元素。行內元素不能包含塊級元素

4. 常見的行內元素和塊級元素有哪些？

1、常見的行內元素

<span>、<a>、<lable>、<strong>、<b>、<small>、<abbr>、<button>、<input>、<textarea>、<select>、<img>

2、常見的塊級元素

<div>、<p>、<li>、<h1> ~ <h6>、<form>、<header>、<hr>、<ol>、<ul>、<article>、<aside>、<dd>、<dl>

5. 如何檢測瀏覽器所支持的最小字體大小？

可以使用 JS 設置 DOM 的字體為某一個值，然后再取出來，如果值設置成功，就說明支持。

6. CSS中的 "flex:1;" 是什么意思？

flex 是 flex-grow, flex-shrink 和 flex-basis的簡寫。

除了auto (1 1 auto) 和 none (0 0 auto)這兩個快捷值外，還有以下設置方式：

• 當 flex 取值為一個非負數字，則該數字為 flex-grow 值，flex-shrink 取 1，flex-basis 取 0%，如下是等同的：

  .item {flex: 1;} .item {     flex-grow: 1;     flex-shrink: 1;     flex-basis: 0%; }

  登錄后復制

• 當 flex 取值為 0 時，對應的三個值分別為 0 1 0%

  .item {flex: 0;} .item {     flex-grow: 0;     flex-shrink: 1;     flex-basis: 0%; }

  登錄后復制