CSS面試題啟蒙
阿新 • • 發佈：2021-11-18
問題目錄
- 盒子模型的寬度如何計算？
- margin縱向重疊的問題
- margin負值的問題
- BFC理解和應用
- float佈局的問題，以及clearfix
- flex佈局的問題
問題列表
盒子模型的寬度如何計算？
<!-- 如下程式碼，請問 div1 的 offsetWidth 是多大？ -->
<style>
#div1 {
width: 100px;
padding: 10px;
border: 1px solid #ccc;
margin: 10px;
}
</style>
<div id="div1">
</div>- 概念：offsetWidth = （內容寬度+內邊距+邊框），無外邊距
- 答案：122px
- 如果新增 box-sizing:border-box; 請問結果？
- 答案：100px
margin縱向重疊的問題
<!-- 如下程式碼：AAA 和 BBB 之間的距離是多少？ -->
<style>
p {
font-size: 16px;
line-height: 1;
margin-top: 10px;
margin-bottom: 15px;
}
</style>
<p>AAA</p>
<p></p>
<p></p>
<p></p>
<p>BBB</p>- 答案：
- 相鄰元素的margin-top和margin-bottom會發生重疊
- 空白內容的<p></p>也會重疊
- 答案：15px，p和p之間互相重疊，得到最後結果；
- 擴散：如果換成H1呢？H1自帶上下距離是0.67em單位，font-soze:2em;
margin負值的問題
- 對 margin 的 top left right bottom 設定負值，有何效果？
- 概念：
- margin-top和margin-left負值，元素會向上、向左移動
- margin-right負值，右側元素左移，自身不受影響
- margin-bottom負值，下方元素上移，自身不受影響
- 理解：
- margin控制的是自身的邊界，為零的時候，邊界就是0，我不多佔也不少佔，當為負值的時候，就允許對方進入到國界內部，有點類似國家邊界被侵入的意思，界碑位置不變，變的是對方的可活動範圍；
- 強國對外活動，弱國對內活動（即：被活動）
BFC理解和應用
- 什麼是BFC？如何應用？
- 概念：
- Block format context，塊級格式化上下文
- 一塊獨立渲染區域，內部元素的渲染不會影響邊界以外的元素
- 形成BFC的常見條件：
- float不是none
- position是absolute或fixed
- overflow不是visible
- display是flex、inline-block等
- 常用需求：BFC清除浮動
- clear:both;專為清除浮動而生
float佈局的問題，以及clearfix
- 如何實現聖盃佈局和雙飛翼佈局
- 聖盃佈局使用padding為主，往中間擠壓
- 雙飛翼佈局使用margin為主，往外排除，類似翅膀展開一樣
- 手寫 clearfix
- 概念：
- 聖盃佈局和雙飛翼佈局的目的：
- 三欄佈局，中間一欄最先載入和渲染（內容最重要）
- 兩側內容固定，中間內容隨著寬度自適應
- 一般用於PC網頁
- 聖盃佈局和雙飛翼佈局的技術總結：
- 使用float佈局
- 兩側使用margin負值，以便和中間內容橫向重疊
- 防止中間內容被兩側覆蓋，一個用padding一個用margin
聖盃佈局
- 感受：其實就是margin-left、margin-right、left、right
- 感悟：
- 需要了解margin-left和margin-right在當前BFC裡面具有橫向流動性（之所以會換行，只是因為被擠下來，實際依然屬於同一行）
- 而position:relation;的left和right，是相對當前位置的，和當前BFC沒有任何關係
- 因此：
- 只能通過margin-left讓left aside移動到最左側，無法通過margin-right移動到最左側
- 可以理解為margin-left是移動自身，而margin-right是移動後面的同學
- 所以理論上的四種辦法，其實只有兩種；這兩種辦法也只是left和right的簡單運用而已
<template>
<div id="app">
<div class="box">
<div class="center">center</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</div>
</template>
<style>
body{background:green;}
.box{padding-left:200px;padding-right:150px;}
.box div{float:left;}
.center{background:red;color:#fff;width:100%;}
.left{background:blue;color:#fff;width:200px;}
.right{background:purple;color:#fff;width:150px;}
/* 第一種處理 */
/* .left{margin-left:-100%;position:relative;left:-200px;}
.right{margin-left:-150px;position:relative;left:150px;} */
/* 第二種處理 */
/* .left{margin-left:-100%;position:relative;right:200px;}
.right{margin-right:-150px;} */
/* 第三種組合：不成立 */
/* margin-right
margin-left */
/* 第四種組合：不成立 */
/* margin-right
margin-right */
</style>
雙飛翼佈局
- 感受：雙飛翼佈局沒有那麼多的組合結果，本質只有一種
- 感悟：
- 這種方式是用結構換樣式，去除了定位（position），並且只是用margin-left；
- 簡單，容易理解
<template>
<div id="app">
<div class="box">
<div class="center">
<div class="center_item">center-item</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</div>
</template>
<style>
body{background:green;}
.box{}
.box div{float:left;}
.center{background:red;color:#fff;width:100%;}
.center_item{background:rgba(255,255,255,.6);color:#fff;}
.left{background:blue;color:#fff;width:200px;}
.right{background:purple;color:#fff;width:150px;}
.center_item{margin-left:200px;margin-right:150px;}
/* 第一種處理 */
.left{margin-left:-100%;}
.right{margin-left:-150px;}
/* 第二種組合：不成立 */
/* .left{margin-left:-100%;}
.right{margin-right:-150px;} */
/* 第三種組合：不成立 */
/* margin-right
margin-left */
/* 第四種組合：不成立 */
/* margin-right
margin-right */
</style>
手寫clearfix（清除浮動）
.clearfix:after {
content: "";
display: table;
clear: both;
}
.clearfix {
*zoom: 1; /*相容 IE 低版本*/
}
flex佈局的問題
- flex實現一個三點的色子
- 常用語法回顧：
- flex-content
- justify-content
- align-items
- flex-wrap
- align-self：在側軸方向上的對齊方式
<template>
<div id="test">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</template>
<style>
#test{border:solid 1px red;border-radius:20px;width:300px;height:300px;display: flex;justify-content: space-between;align-items: center;padding: 32px;box-sizing: border-box;}
.item{width:30px;height:30px;background:purple;border-radius:50%;}
.item:nth-child(1){align-self: flex-start;}
.item:nth-child(3){align-self: flex-end;}
</style>
CSS定位問題
- absolute和relative分別依據什麼定位？
- absolute依據最近一層的定位元素定位，一直向上找，如果沒有就相對body
- 定位元素：absolute、relative、fixed
- 兜底元素：body
- relative依據自身定位
- 居中對齊有哪些實現方式？
- 水平居中
- inline元素：text-align:center
- block元素：margin:auto
- absolute元素：left:50% + margin-left:負值
- margin-left需要知道當前元素的具體width
- 如果width不確定可以使用transform:translateX(-50%)
- 垂直居中
- inline元素：line-height的值等於height值
- absolute元素：top:50%+margin-top:負值
- absolute元素：transform:translate(-50%, -50%);
- 低版本瀏覽器有問題
- absolute元素：top, left, bottom, right = 0+margin:auto
- 全相容無問題
- position:absolute;top:0;left:0;bottom:0;right:0;margin:auto;
CSS圖文樣式
- line-height如何繼承
- 問題：
<!--如下程式碼，P標籤的行高將會是多少？-->
<style>
body {
font-size: 20px;
line-height: 200%;
}
p {
font-size: 16px;
}
</style>
<body>
<p>AAA</p>
</body>
- 思考：
- 寫具體數值，如30px，則繼承該值（比較好理解）
- 寫比例，如 2/1.5 ，則繼承改比例（比較好理解）
- 寫百分比，如200%，則繼承計算出來的值（考點）
- 百分比是和父級的font-size計算完之後在繼承，其餘的都是直接繼承不計算
<style>
/* 第一種：p標籤的line-height結果為30px */
body {
font-size: 20px;
line-height: 30px;
}
p {
font-size: 16px;
}
/* 第二種：p標籤的line-height結果為32 */
body {
font-size: 20px;
line-height: 2;
}
p {
font-size: 16px;
}
/* 第三種：p標籤的line-height結果為40 */
body {
font-size: 20px;
line-height: 200%;
}
p {
font-size: 16px;
}
</style>
<body>
<p>AAA</p>
</body>
CSS響應式
- rem是什麼？
- rem是一個長度單位
- 類比：
- px，絕對長度單位，最常用
- em，相對長度單位，相對於父元素，不常用
- rem，相對長度單位，相對於根元素（HTML元素），常用於響應式佈局
- 這裡測試的時候建議用整數，或者大於1的數，因為web page最小可見font-size是12px
- 所以如果使用小數會導致font-size觸發最小值，從而導致測試結果誤導，我就犯了這個錯誤
- 已經確定，是相對html元素，不是相對body元素
- 響應式佈局的常見方案？
- media-query，根據不同的螢幕寬度設定根元素font-size
@media screen and (max-width:1100px){}
@media screen and (max-width:1000px){}
@media screen and (max-width:920px){}
@media screen and (max-width:800px){}
@media screen and (max-width:720px){}
@media screen and (max-width:600px){}
@media screen and (max-width:500px){}
@media screen and (max-width:400px){}
CSS響應式-vw/vh
- rem的弊端
- 當頁面尺寸分的特別細的時候，也就是需要寫一堆的media的時候，面對兩個問題：
- 第一個：需要花多長時間寫出來
- 第二個：維護成本怎麼降低
- 個人感受：
- 流動佈局：width:30%就是流動佈局
- 其實只要流動佈局設計的足夠好，media用的不會太多
- 響應式佈局設計：以流動佈局為主，media調節為輔
- 網頁視口尺寸
- window.screen.height // 螢幕高度，由手機決定，下圖1
- window.innerHeight // 網頁視口高度，由瀏覽器決定，下圖2
- document.body.clientHeight //body高度，由內容決定，下圖3
- vm/vh
- vh：網頁視口高度的1/100
- vw：網頁視口寬度的1/100
- vmax取兩者最大值，font-size:10vmax;
- vmin去兩者最小值
- window.innerHeight === 100vh
- window.innerWidth ===100vw
技巧
使用vue
# 安裝 npm install -g @vue/cli-service-global # 啟動待個vue檔案，並開啟瀏覽器 vue serve index.vue -o
Http-server
# 安裝 npm install -g http-server # 執行並設定埠 http-server -p 9999