1. calc, support, media各自的含義及用法？
@support主要是用于檢測瀏覽器是否支持CSS的某個屬性，其實就是條件判斷，如果支持某個屬性，你可以寫一套樣式，如果不支持某 個屬性，你也可以提供另外一套樣式作為替補。

calc() 函數用于動態計算長度值。 calc()函數支持 “+”, “-”, “*”, “/” 運算；

@media 查詢，你可以針對不同的媒體類型定義不同的樣式。

2. css水平、垂直居中的寫法，請至少寫出4種？
水平居中

行內元素: text-align: center
塊級元素: margin: 0 auto
position:absolute +left:50%+ transform:translateX(-50%)
display:flex + justify-content: center
垂直居中

設置line-height 等于height
position：absolute +top:50%+ transform:translateY(-50%)
display:flex + align-items: center
display:table+display:table-cell + vertical-align: middle;

3.畫一條0.5px的直線？

height: 1px; transform: scale(0.5);

4.標簽的用法
label標簽主要是方便鼠標點擊使用，擴大可點擊的范圍，增強用戶操作體驗

4.瀏覽器渲染頁面的過程

解析HTML，生成DOM樹，解析CSS，生成CSSOM樹

將DOM樹結合CSSOM樹結合，生成渲染樹（Render Tree）

Layout（回流）:根據生成的渲染樹，計算它們在設備視口（viewport）內的確切位置和大小，這個階段是回流

Painting（重繪）: 根據渲染以及回流得到的幾何信息，得到節點的絕對像素

Display：將像素發送給GPU， 展示到頁面上

5.關于移動端適配接觸的一些方案

（1）媒體查詢+rem針對不同屏幕設計不同的樣式 當重置瀏覽器屏幕大小的時候 根據屏幕寬度和大小重新設計樣式

下面的代碼是這種方案必須添加的內容：

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

為的就是讓布局視口等于真實視口

（2）淘寶flexible.js方案 它同樣也是rem適配的，將設備分成十個部分，

引入flexible.js 這一步其實非常簡單，只要把flexible.js的內容復制出來，在本地新建一個flexible.js的文件
接著在html頁面里面，盡可能早的引入這個js文件（為了讓適配的效果更快）
上面方案1 的代碼就不需要了，我們只需要交給flexible.js自己去處理
（3）vh vw方案
這種方案目前兼容性不是很好

總結

以上是生活随笔為你收集整理的关于css的基础知识点的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。