亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索

首頁(yè) 文章專題 AI工具學(xué)習(xí) 編程手冊(cè) 下載最近更新

文章 web3.0 后端開發(fā) web前端數(shù)據(jù)庫(kù) 開發(fā)工具 php框架常見問題科技 Java 系統(tǒng)教程電腦教程硬件教程手機(jī)教程軟件教程游戲教程自媒體新聞

專題后端開發(fā) web前端數(shù)據(jù)庫(kù) 開發(fā)工具 php框架科技 Java 系統(tǒng)教程電腦教程硬件教程手機(jī)教程軟件教程游戲教程新聞

AI工具 AI 聊天問答 Agent智能體 AI 文本寫作 AI 繪畫作圖 AI 設(shè)計(jì)工具 AI 視頻創(chuàng)作 AI 音頻制作 AI 辦公學(xué)習(xí) AI 編程開發(fā) Prompt指令

學(xué)習(xí) 大前端后端開發(fā) 數(shù)據(jù)庫(kù) 移動(dòng)端運(yùn)維開發(fā) UI設(shè)計(jì) 計(jì)算機(jī)基礎(chǔ)

編程手冊(cè) 大前端 JavaScript 后端開發(fā) 數(shù)據(jù)庫(kù) 移動(dòng)端運(yùn)維開發(fā) UI設(shè)計(jì) 計(jì)算機(jī)基礎(chǔ) XML Web Services

下載 js特效網(wǎng)站源碼工具下載類庫(kù)下載網(wǎng)站素材學(xué)習(xí)資源插件擴(kuò)展手機(jī)/移動(dòng)開發(fā) 手機(jī)游戲

em,rem,px的應(yīng)用場(chǎng)景，區(qū)別與聯(lián)系。vh,vw的使用

區(qū)別：px是固定像素，em是相對(duì)的長(zhǎng)度單位相對(duì)于父元素，rem則相對(duì)于根元素<br/>
聯(lián)系：相對(duì)的長(zhǎng)度單位em 和 rem的出現(xiàn)一定有px的出現(xiàn)，他們之間存在相對(duì)的依賴關(guān)系

px我在寫border的時(shí)候會(huì)用的比較多
```
border:1px solide #eee;
```
用rem的好處：當(dāng)用rem做響應(yīng)式時(shí)，直接在媒體查詢中改變html的font-size的大小，那么用rem作為單位的元素大小都會(huì)相應(yīng)的改變，很方便。

實(shí)例演示通過(guò)vh與vw實(shí)現(xiàn)瀏覽器自適應(yīng)三行單列布局 [vh,vw的使用]

vh,vw是一種相對(duì)于視口的長(zhǎng)度單位，平時(shí)也會(huì)偶爾用到，還是很方便的，另外vmin,vmax這兩種就沒那么常用了

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="test.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </body>
</html>

:root {
  height: 100vh;
  background-color: #eee;
}
.box:nth-child(1) {
  height: 33vh;
  background-color: red;
}
.box:nth-child(2) {
  height: 33vh;
  background-color: green;
}
.box:nth-child(3) {
  height: 33vh;
  background-color: blue;
}