前端學習(22)~css問題講解

  • 2020 年 3 月 18 日
  • 筆記

你是如何理解 HTML 語義化的？

語義化：指對文本內容的結構化（內容語義化），選擇合乎語義的標籤（程式碼語義化）。

舉例：段落用 p，邊欄用 aside，主要內容用 main 標籤。

好處：

便於開發者閱讀和維護    有利於SEO：讓瀏覽器的爬蟲和輔助技術更好的解析，

語義化標籤介紹：

在HTML5出來之前，我們習慣於用div來表示頁面的章節或者不同模組，但是div本身是沒有語義的。但是現在，HTML5中加入了一些語義化標籤，來更清晰的表達文檔結構。

meta viewport 是做什麼用的，怎麼寫？

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

控制頁面在移動端不要縮小顯示。

css reset 和 Normalize.css 有什麼區別

二者都是用來統一瀏覽器的默認樣式：

  • reset：重置。相對「暴力」，不管你有沒有用，統統重置成一樣的效果，且影響的範圍很大，講求跨瀏覽器的一致性。（一刀切）
  • Normalize.css ：標準化。相對「平和」，注重通用的方案，重置掉該重置的樣式，保留有用的 user agent 樣式，同時進行一些 bug 的修復，這點是 reset 所缺乏的。（去偽存真）

選擇器的優先順序如何確定

  • 選擇器越具體，優先順序越高。 #xxx 大於 .yyy
  • 同樣優先順序，寫在後面的覆蓋前面的。
  • color: red !important; 優先順序最高。

BFC 是什麼

overflow:hidden ：取消父子 margin 合併。 （另一種推薦做法：padding-top: 0.1px;）

如何清除浮動

（1）overflow: hidden

（2）.clearfix 清除浮動寫在爸爸身上

    .clearfix::after {          content: '';          display: block;          clear: both;      }        /* 兼容 IE */      .clearfix {          zoom: 1;      }

偽類和偽元素的區別是什麼？

概念上的區別：

  • 偽類表示一種狀態
  • 偽元素是真的有元素。比如 ::after 是真的有元素，可以在頁面上顯示內容。

使用上的區別：

  • 偽類：使用單冒號
  • 偽元素：使用雙冒號

Tags:

VirMach 便宜 VPS