大廠面試總結 CSS 篇

時間  2021-06-04
標籤 css html webpack css3 git github web bootstrap 瀏覽器 sass 欄目 快樂工作 简体版
原文   原文鏈接

01 如何實現一個元素的水平垂直居中

<blockquote>
更多描述: 要求對行內元素、塊狀元素及不定寬高的塊狀元素都可適用：css

可打開 codepen 進行調試: https://codepen.io/shanyue/pe...，如下是佈局代碼html

<div class="container">
  <div class="item" style="width: 100px; height: 100px; background: #999;">
    塊狀元素
  </div>
</div>

<div class="container">
  <div class="item">不定高寬的塊狀元素</div>
</div>

<div class="container">
  <span class="item">行內元素</span>
</div>
.container {
   // 把代碼寫在這裏
}

.container {
  height: 20rem;
  background: #ccc;
  margin: 1rem;
}

</blockquote>webpack

在 Issue 或者 個人網站中交流與討論: 01 如何實現一個元素的水平垂直居中

提供一些現代瀏覽器下使用 flex/grid 的方法，不只支持塊狀元素，並且支持行內元素，對固定高寬與不固定高寬皆可以使用。css3

使用 flex，如下是經典的垂直居中。git

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

使用 grid，它是作二維佈局的，可是隻有一個子元素時，一維佈局與二維佈局就同樣了。github

結合 justify-content/justify-items 和 align-content/align-items 就有四種方案web

效果能夠見 codepenbootstrap

.container {
  display: grid;
  justify-content: center;
  align-content: center;
}
.container {
  display: grid;
  justify-content: center;
  align-items: center;
}
.container {
  display: grid;
  justify-items: center;
  align-content: center;
}
.container {
  display: grid;
  justify-items: center;
  align-items: center;
}

三個屬性略顯囉嗦，其實只需兩個屬性便可:瀏覽器

.container {
  display: grid;
  place-items: center;
}
.container {
  display: grid;
  place-content: center;
}

02 css 如何實現左側固定300px，右側自適應的佈局

在 Issue 或者個人網站中交流與討論: 02 css 如何實現左側固定300px，右側自適應的佈局sass

代碼見 左側固定，右側自適應 - Codepen

使用 flex 佈局，左側 300px，右側 flex-grow: 1。pug 代碼及 css 代碼示例以下

.container
  .left
  .main
.container {
  display: flex;
}

.left {
  flex-basis: 300px;
  flex-shrink: 0;
}

.main {
  flex-grow: 1;
}

若是隻使用 Grid 佈局，則代碼會更加簡單，只須要控制容器的 CSS 屬性

.container {
  display: grid;
  grid-template-columns: 300px 1fr;
}

03 有沒有使用過 css variable，它解決了哪些問題

在 Issue 或者 個人網站中交流與討論: 03 有沒有使用過 css variable，它解決了哪些問題

可在運行時動態修改 CSS。與 less/sass 相比，更加靈活，由於它很容易經過 JS 來控制。根據它來作主題切換簡直駕輕就熟。

04 談談你對 styled-component 的見解

在 Issue 或者 個人網站中交流與討論: 04 談談你對 styled-component 的見解

最爲流行的 CSS-in-JS 方案

05 display: inline 的元素設置 margin 和 padding 會生效嗎

在 Issue 或者 個人網站中交流與討論: 05 display: inline 的元素設置 margin 和 padding 會生效嗎

可參考文章 http://maxdesign.com.au/artic...

inline 元素的 margin 與 padding 左右生效，上下生效，準確說在上下方向不會使其它元素受到擠壓，彷彿不生效，以下圖設置 border 會發現它其實生效了

image

代碼爲，可見於 行內元素的padding與margin - codepen

<div class="container">
  我是<span class="item">行內元素</span>白日依山盡，黃河入海流。欲窮千里目，更上一層樓。白日依山盡，黃河入海流。欲窮千里目，更上一層樓。白日依山盡，黃河入海流。欲窮千里目，更上一層樓。白日依山盡，黃河入海流。欲窮千里目，更上一層樓。
</div>

爲 .item 行內元素設置樣式，觀察效果:

.item {
  padding: 1rem;
  border: 1px solid red;
}

.container {
  margin: 3rem;
  background-color: #ccc;
  height: 10rem;
}

06 html 的默認 display 屬性是多少

在 Issue 或者 個人網站中交流與討論: 06 html 的默認 display 屬性是多少

html 根元素的默認 display 爲 block

07 對一個非定長寬的塊狀元素如何作垂直水平居中

在 Issue 或者個人網站中交流與討論: 07 對一個非定長寬的塊狀元素如何作垂直水平居中

css position

.container {
            position: relative;
        }
        .container .item {
            width: 100px;
            height: 50px;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }

非定寬了，你這個不行呀

08 如何實現左右固定，中間自適應佈局

在 Issue 或者 個人網站中交流與討論: 08 如何實現左右固定，中間自適應佈局

能夠參考 【Q017】css 如何實現左側固定300px，右側自適應的佈局

.container
  .left
  .main
  .right
.container {
  display: flex;
}

.left {
  flex-basis: 300px;
  flex-shrink: 0;
}

.right {
  flex-basis: 300px;
  flex-shrink: 0;
}

.main {
  flex-grow: 1;
}

09 如何實現表格單雙行條紋樣式

在 Issue 或者 個人網站中交流與討論: 09 如何實現表格單雙行條紋樣式

經過 css3 中僞類 :nth-child 來實現。其中 :nth-child(an+b) 匹配下標 { an + b; n = 0, 1, 2, ...} 且結果爲整數的子元素

  • nth-child(2n)/nth-child(even): 雙行樣式
  • nth-child(2n+1)/nth-child(odd): 單行樣式

其中 tr 在表格中表明行，實現表格中單雙行樣式就很簡單了：

tr:nth-child(2n) {
  background-color: red;
}


tr:nth-child(2n+1) {
  background-color: blue;
}

同理：

  1. 如何匹配最前三個子元素: :nth-child(-n+3)
  2. 如何匹配最後三個子元素: :nth-last-child(-n+3)

10 簡述下 css specificity

在 Issue 或者 個人網站中交流與討論: 10 簡述下 css specificity

css specificity 即 css 中關於選擇器的權重，如下三種類型的選擇器依次降低

  1. id 選擇器，如 #app
  2. class、attribute 與 pseudo-classes 選擇器，如 .header、[type="radio"] 與 :hover
  3. type 標籤選擇器和僞元素選擇器，如 h1、p 和 ::before

其中通配符選擇器 *，組合選擇器 + ~ >，否認僞類選擇器 :not() 對優先級無影響

另有內聯樣式 <div class="foo" style="color: red;"></div> 及 !important(最高) 具備更高的權重

:not 的優先級影響 - codepen 能夠看出 :not 對選擇器的優先級無任何影響

CSS Specificity - codepen 能夠看出十幾個 class 選擇器也沒有一個 id 選擇器權重高

11 '+' 與 '~' 選擇器有什麼不一樣

在 Issue 或者 個人網站中交流與討論: 11 '+' 與 '~' 選擇器有什麼不一樣
  • + 選擇器匹配緊鄰的兄弟元素
  • ~ 選擇器匹配隨後的全部兄弟元素

12 position: sticky 如何工做，適用於哪些場景

在 Issue 或者 個人網站中交流與討論: 12 position: sticky 如何工做，適用於哪些場景

position: sticky 可理解爲 relative 與 fixed 的結合體

13 僞類與僞元素有什麼區別

在 Issue 或者 個人網站中交流與討論: 13 僞類與僞元素有什麼區別
  1. 僞類使用單冒號，而僞元素使用雙冒號。如 :hover 是僞類，::before 是僞元素
  2. 僞元素會在文檔流生成一個新的元素，而且可使用 content 屬性設置內容

參考 https://www.w3.org/TR/CSS2/se...

14 css 如何匹配前N個子元素及最後N個子元素

在 Issue 或者 個人網站中交流與討論: 14 css 如何匹配前N個子元素及最後N個子元素

見 【Q307】如何實現表格單雙行條紋樣式

  • 如何匹配最前三個子元素: :nth-child(-n+3)
  • 如何匹配最後三個子元素: :nth-last-child(-n+3)

15 如何使用 CSS 實現網站的暗黑模式 (Dark Mode)

<blockquote>
更多描述: 可參考如下文章:

  1. Dark mode in 5 minutes, with inverted lightness variables
    </blockquote>
在 Issue 或者 個人網站中交流與討論: 15 如何使用 CSS 實現網站的暗黑模式 (Dark Mode) 
@media (prefers-color-scheme: dark) {
    :root{
    }
}

16 介紹隱藏頁面中某個元素的幾種方法

在 Issue 或者 個人網站中交流與討論: 16 介紹隱藏頁面中某個元素的幾種方法

01 display: none

經過 CSS 操控 display，移出文檔流

display: none;

02 opacity: 0

透明度爲0，仍在文檔流中，看成用於其上的事件(如點擊)仍有效

opacity: 0;

03 visibility: hidden

透明度爲0，仍在文檔流中，但做用於其上的事件(如點擊)無效，這也是 visibility:hidden 與 opacity: 0 的區別

visibility: hidden;

04 content-visibility

移出文檔流，可是再次顯示時消耗性能低

content-visibility: hidden;

05 絕對定位於當前頁面的不可見位置

position: absolute;
top: -9000px;
left: -9000px;

06 字體大小設置爲 0

font-size: 0;

17 css 如何實現響應式佈局大屏幕三等分、中屏幕二等分、小屏幕一等分

在 Issue 或者 個人網站中交流與討論: 17 css 如何實現響應式佈局大屏幕三等分、中屏幕二等分、小屏幕一等分

頁面佈局元素以下，item 數量不固定

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

使用 Grid 佈局能夠輕鬆解決這個問題，如若使用其它方案，控制好等分的同時再控制好間距也是一個十分頭疼的問題:

  1. grid-template-columns: 控制等分
  2. gap: 控制間隙

效果可見 codepen

@media (min-width: 768px) {
  .container {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (min-width: 1024px) {
  .container {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.container {
  display: grid;
}

.conainer {
  gap: 1rem;
}

TailwindCSS 是一款很是方便的 CSS 原子類框架，只須要一行便可搞定

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"></div>

可是這就夠了嗎？

這遠遠不夠，這也足夠複雜！

  1. 須要媒體查詢
  2. 須要人爲設置 breakpoint，設置大小屏幕的邊界

終極解決方案

Grid 佈局能夠自動判斷容器大小，不管大小屏幕自動撐滿並均分，請看如下屬性

.container {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))
}
  1. repeat: 用以 N 整分
  2. auto-fill：表示自動填充
  3. minmx: 即書面意思，最小寬度爲 300px

使用終極解決方案的在線頁面

18 如何自定義滾動條的樣式

在 Issue 或者 個人網站中交流與討論: 18 如何自定義滾動條的樣式

滾動條相關樣式都是僞元素，以 scrollbar 打頭，有如下僞元素，從 -webkit 中可見兼容性通常，不過無所謂，如今 Chrome 瀏覽器佔大頭

  • ::-webkit-scrollbar — 整個滾動條.
  • ::-webkit-scrollbar-button — 滾動條上的按鈕 (上下箭頭).
  • ::-webkit-scrollbar-thumb — 滾動條上的滾動滑塊.
  • ::-webkit-scrollbar-track — 滾動條軌道.
  • ::-webkit-scrollbar-track-piece — 滾動條沒有滑塊的軌道部分.
  • ::-webkit-scrollbar-corner — 當同時有垂直滾動條和水平滾動條時交匯的部分.
  • ::-webkit-resizer — 某些元素的corner部分的部分樣式(例:textarea的可拖動按鈕).

但其實最經常使用的是如下幾個僞元素：滾動條、滑塊、軌道，以下滾動條設置成功

::-webkit-scrollbar {
    width: 6px;
    height: 6px
}

::-webkit-scrollbar-track {
    border-radius: 3px;
    background: rgba(0,0,0);
    box-shadow: inset 0 0 5px rgba(0,0,0,.08)
}

::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: rgba(0,0,1);
    box-shadow: inset 0 0 10px rgba(0,0,0,.2)
}

19 網站設置字體時，如何設置優先使用系統默認字體

在 Issue 或者 個人網站中交流與討論: 19 網站設置字體時，如何設置優先使用系統默認字體 
font-family: system-ui;

system-ui 將會自動選取系統默認字體做爲字體，如 bootstrap 的樣式規則

$font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

20 寫 CSS 時如何避免命名樣式衝突

在 Issue 或者 個人網站中交流與討論: 20 寫 CSS 時如何避免命名樣式衝突

1. BEM 式: .home-page .home-page-btn

.home-page {
  .home-page-btn {}
}

BEM 有一個缺點，就是有些太長，可適當簡化，只包裹該頁面組件的根類名，但有可能增長樣式衝突的風險

.home-page {
  .btn {}
}

2. CSS Scoped

scoped css 會對當前組件(scope)下全部元素生成惟一的屬性或類名，對全部 CSS 規則將攜帶惟一屬性實現做用域的命名保護

// 手動寫
.btn {}

// 編譯後
.btn .jsx-1287234 {}

css scoped demo

3. CSS Module

module css 會對類名進行 hash 化

css modules demo

21 HTML 標籤有哪些行內元素

在 Issue 或者 個人網站中交流與討論: 21 HTML 標籤有哪些行內元素

常見的標籤有如下幾種，可參考 inline element

  • a
  • img
  • picture
  • span
  • input
  • textarea
  • select
  • label

22 CSS如何設置一行超出顯示省略號

在 Issue 或者 個人網站中交流與討論: 22 CSS如何設置一行超出顯示省略號 
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

23 CSS如何設置多行超出顯示省略號

在 Issue 或者 個人網站中交流與討論: 23 CSS如何設置多行超出顯示省略號

使用 -webkit-line-clamp 來設置多行超出顯示省略號

overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;

24 flex 佈局中 order 有何做用

在 Issue 或者 個人網站中交流與討論: 24 flex 佈局中 order 有何做用

order 屬性定義Flex佈局中子元素的排列順序，數值越小，排列越靠前，默認爲0。

25 flex 佈局中 align-content 與 align-items 有何區別

在 Issue 或者個人網站中交流與討論: 25 flex 佈局中 align-content 與 align-items 有何區別

示例代碼見: align-content 與 align-items

  • align-content 做用於縱軸多行元素，一行元素不起做用
  • align-items 做用於縱軸單行元素

下圖，上部分爲 align-content，下部分爲 align-items

image

26 子元素垂直居中，而且長度爲父容器一半的正方形

在 Issue 或者個人網站中交流與討論: 26 子元素垂直居中，而且長度爲父容器一半的正方形

垂直居中長度爲父容器一半的子元素 - Codepen

<div class="container">
  <div class="item"></div>
</div>

之前採用百分比撐高 padding，那這種方案已通過時，會擠壓 Content 內容，沒法在其中填充內容(須要絕對定位)。

可以使用最新的屬性 aspect-ratio，即長寬比

.container {
  display: grid;
  place-items: center;
}

.item {
  width: 50%;
  aspect-ratio: 1/1;
}

27 簡述 css 中 position 的值

在 Issue 或者 個人網站中交流與討論: 27 簡述 css 中 position 的值
  • static: 默認值，無定位，top、right、bottom、left 不起任何做用
  • relative: 相對定位
  • absolute: 絕對定位，脫離文檔流，上下左右以最近的定位父元素爲參照系
  • fixed: 脫離文檔流，上下左右以瀏覽器視口爲參照系
  • sticky: relative 與 fixed 的結合體

28 什麼是 BFC

<blockquote>
更多描述: + 它是如何生成的

  • 它有什麼做用及應用
    </blockquote>
在 Issue 或者 個人網站中交流與討論: 28 什麼是 BFC

塊級格式化上下文，Block Formatting Context

29 CSS 如何實現固定長寬比的元素

在 Issue 或者 個人網站中交流與討論: 29 CSS 如何實現固定長寬比的元素

過去的解決方案是使用 padding。一個元素的 padding 如若設置爲百分比，則表明的是以父元素寬度爲基準，根據這個原理，可設置長寬比。但實際上意義有限，畢竟你把 padding 給佔了，content 無任何區域。

現代化的解決方案是使用長寬比的 CSS 屬性: aspect-ratio

30 rem、em、vw、wh 的值各是什麼意思

在 Issue 或者 個人網站中交流與討論: 30 rem、em、vw、wh 的值各是什麼意思

他們同屬於 CSS Data Type 中的 [length]，見文檔 length - MDN

  • rem: 根據根元素(即 html)的 font-size
  • em: 根據自身元素的 font-size
  • vw: viewport width
  • vh: viewport height

31 normalize.css 與 reset.css 又何區別

在 Issue 或者 個人網站中交流與討論: 31 normalize.css 與 reset.css 又何區別

What is the difference between Normalize.css and Reset CSS?

  • normalize.css: 會保留有用的樣式，好比 h1 的字體大小
  • reset.css: 把全部樣式都重置，好比 h一、h二、h3 的字體大小都進行了重置，保持了無樣式

32 line-height 的值分別取 [2, 2em, 200%] 有什麼區別?

在 Issue 或者個人網站中交流與討論: [32 line-height 的值分別取 [2, 2em, 200%] 有什麼區別?](https://q.shanyue.tech/fe/css...

代碼見: lineHeight - codepen

line-height 是相對於元素自身的字體大小來取值，但同時會被繼承。在實際工做中，取值 2em 或者 200% 有可能遇到未預測的內容。

好比:

  • 父元素: fontSize: 18px; lineHeight: 1.5em(27px，150% 同理); ，它的 lineHeight 計算下來爲 27px，會被子元素繼承
  • 子元素: fontSize: 30px，子元素的 lineHeight 被繼承爲 27px，出現問題

如下爲演示代碼，見: lineHeight - codepen

<div class="box green">
  <h1>lineHeight: 1.5; 這是沒有問題的框框</h1>
  lineHeight: 1.5; 這是沒有問題的框框
  lineHeight: 1.5; 這是沒有問題的框框
</div>

<div class="box red">
 <h1>lineHeight: 1.5em; 這是有問題的框框</h1>
  lineHeight: 1.5em; 這是有問題的框框
  lineHeight: 1.5em; 這是有問題的框框
</div>

<div class="box orange">
 <h1>lineHeight: 150%; 這是有問題的框框</h1>
  lineHeight: 150%; 這是有問題的框框
  lineHeight: 150%; 這是有問題的框框
</div>
.green {
  line-height: 1.5;
  border: solid limegreen;
}

.red {
  line-height: 1.5em;
  border: solid red;
}

.orange {
  line-height: 150%;
  border: solid orange;
}

h1 {
  font-size: 30px;
}

.box {
  width: 18em;
  display: inline-block;
  vertical-align: top;
  font-size: 16px;
}

33 Grid 佈局的優點在哪裏

在 Issue 或者 個人網站中交流與討論: 33 Grid 佈局的優點在哪裏

響應式！

34 如何實現三列均分佈局

<blockquote>
更多描述: 佈局代碼以下所示，可見 三列均分佈局 - codepen

注: 在第一個元素中設置文字，子元素不能因文字過長而擠壓。 
<div class="container">
  <div class="item">白日依山盡，黃河入海流。欲窮千里目，更上一層樓。</div>
  <div class="item"></div>
  <div class="item"></div>
</div>
// 如下爲樣式代碼，非核心功能代碼
* {
  box-sizing: border-box;
}

.container {
  background-color: #eee;
  height: 10rem;
  width: 40rem;
  margin: 1rem;
}

.item {
  border: 1px solid #888;
}

</blockquote>

在 Issue 或者 個人網站中交流與討論: 34 如何實現三列均分佈局

見代碼 三均分佈局 - Codepen

使用 Flex

注意使用 calc(100% / 3) 設置 flex-basis，同時它的缺陷是不可以很好的爲子元素設置左右間隙

.flex-container {
  display: flex;
  flex-wrap: wrap;
  // gap: 1rem;


  .item {
   flex: 0 0 calc(100% / 3);
  }
}
注意: 若是同時給子元素使用 flex-grow: 1 控制均分，當子元素擁有文字等內容時，會受到擠壓，將沒法實現均分佈局。

使用 Grid

使用 Grid 直接操做容器便可，對於子元素之間的間隙也能夠很好地控制，可看出 Grid 更爲簡單，更爲高效，更爲精確

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
}

35 z-index: 999 元素必定會置於 z-index: 0 元素之上嗎

在 Issue 或者 個人網站中交流與討論: 35 z-index: 999 元素必定會置於 z-index: 0 元素之上嗎

代碼見 zindex - codepen

不可，更復雜的示例見 層疊上下文 - MDN

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程