在去年底開始換工作,直到現在算是告了一個段落,斷斷續續的也面試了不少公司,現在回想起來,那段時間經歷了被面試官手撕,被筆試題狂懟,悲傷的時候差點留下沒技術的淚水。
這篇文章我打算把我找工作遇到的各種面試題(每次面試完我都會總結)和我自己複習遇到比較有意思的題目,做一份彙總,年後是跳槽高峯期,也許能幫到一些小夥伴。
先說下這些題目難度,大部分都是基礎題,因爲這段經歷給我的感覺就是,不管你面試的是高級還是初級,基礎的知識一定會問到,甚至會有一定的深度,所以基礎還是非常重要的。
我將根據類型分爲幾篇文章來寫:
面試總結:javascript 面試點彙總(萬字長文)(已完成) 強烈大家看看這篇,面試中 js 是大頭
面試總結:nodejs 面試點彙總(已完成)
面試總結:瀏覽器相關 面試點彙總(已完成)
面試總結:css 面試點彙總(已完成)
面試總結:面試技巧篇(已完成)
六篇文章都已經更新完啦~
這篇文章是對 css
相關的題目做總結,歡迎朋友們先收藏在看。
先看看目錄
BFC - 塊級格式化上下文
塊格式化上下文(Block Formatting Context,BFC) 是Web頁面的可視化CSS渲染的一部分,是塊盒子的佈局過程發生的區域,也是浮動元素與其他元素交互的區域。
又多了一個名詞,可以先不用糾結 BFC 的概念,先看看它能解決什麼問題
清除浮動
在 flex 佈局還沒流行的時候,我們常常會用到浮動 float
,浮動元素脫離的文檔流,帶來直接的一個問題就是父級高度塌陷。
清除浮動常用的方法有, clear
屬性,還有就是構建 BFC
,看個小栗子
.con{
border: 1px solid;
width: 300px;
}
.float{
float: left;
height: 100px;
background-color: sandybrown;
}
<div class="con">
<div class="float">xxxxxxxx</div>
<p>dsfsdfwefesfhjkhjkhuhjk</p>
</div>
黃色 div 是個浮動元素,定了 100px 高度,父級不定高,很明顯父級高度沒有被撐開。
給父級 con 加上 overflow: auto;
效果如下
這時候父級div就是一個 BFC
外邊距摺疊
在CSS中,兩個或多個毗鄰的普通流中的盒子(可能是父子元素,也可能是兄弟元素)在垂直方向上的外邊距會發生疊加,這種形成的外邊距稱之爲外邊距疊加。
形成外邊距摺疊有幾個關鍵要素:毗鄰、兩個及以上、垂直方向、正常流
毗鄰:對於父子元素,他們自己是緊挨着的,子元素沒有被父元素 border padding 給隔開,這樣他們就是毗鄰的;對於兄弟元素,他們的盒模型是挨着一起的就是毗鄰的。
正常流:除去浮動定位、絕對定位,也就是正常的文檔流。
這是個非常常見的問題。解決方案也挺多的,無外乎打破三要素中的一個即可,比如採用浮動、絕對定位、inline-block、添加空白的flex元素、還有就是我們接下來要說的構建 BFC
.con {
width: 300px;
background-color: antiquewhite;
}
.one {
height: 100px;
margin-top: 10px;
margin-bottom: 20px;
background-color: seagreen;
}
.two {
height: 100px;
margin-top: 10px;
background-color: slateblue;
}
<div class="con">
<div class="one"></div>
<div class="two"></div>
</div>
div one
的 margin-top: 10px;
導致父級向下移動 10px,這是父子元素的外邊距摺疊,我們用構建 BFC 的方式解決。
.con {
width: 300px;
background-color: antiquewhite;
overflow: auto; /* 構建BFC */
}
效果如下:
那麼對於毗鄰的兄弟節點,方法也是一樣,把一個節點構建成 BFC 即可
<div class="con">
<div class="one"></div>
<div style="overflow: auto;">
<div class="two"></div>
</div>
</div>
如何創建
方法很多,可根據實際情況選擇
- 根元素(html)
- 浮動元素(元素的 float 不是 none)
- 絕對定位元素(元素的 position 爲 absolute 或 fixed)
- 行內塊元素(元素的 display 爲 inline-block)
- 表格單元格(元素的 display爲 table-cell,HTML表格單元格默認爲該值)
- 表格標題(元素的 display 爲 table-caption,HTML表格標題默認爲該值)
- 匿名錶格單元格元素(元素的 display爲 table、table-row、 table-row-group、table-header-group、table-footer-group(分別是HTML table、row、tbody、thead、tfoot的默認屬性)或 inline-table)
- overflow 值不爲 visible 的塊元素
- display 值爲 flow-root 的元素
- contain 值爲 layout、content或 paint 的元素
- 彈性元素(display爲 flex 或 inline-flex元素的直接子元素)
- 網格元素(display爲 grid 或 inline-grid 元素的直接子元素)
- 多列容器(元素的 column-count 或 column-width 不爲 auto,包括 column-count 爲 1)
- column-span 爲 all 的元素始終會創建一個新的BFC,即使該元素沒有包裹在一個多列容器中(標準變更,Chrome bug)。
然後
上面可看出 BFC 可以清除浮動,可以解決外邊距摺疊兩問題。
BFC 可通俗理解成是構建一個獨立的區域,可包含區域內的所有元素,包括浮動元素,與外界互不打擾的一個空間。
參考文檔:
https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context
https://tech.youzan.com/css-margin-collapse/
https://www.cnblogs.com/libin-1/p/7098468.html
absolute 是相對哪個元素定位的
元素定位在 css 算是基礎中的基礎了,網上有很多介紹的文章,但我覺得 mdn 的講解就已經非常清晰 position - CSS(層疊樣式表) | MDN
position 屬性取值有 relative, absolute, fixed 或 sticky
,元素設置了其中之一的就是定位元素。(換句話說,除static以外的任何東西)。
目前定位類型有四類:
- 相對定位元素(relatively positioned element)是計算後位置屬性爲 relative 的元素。
- 絕對定位元素(absolutely positioned element)是計算後位置屬性爲 absolute 或 fixed 的元素。
- 粘性定位元素(stickily positioned element)是計算後位置屬性爲 sticky 的元素。用於滑動中固定某一元素,這個目前有些兼容性問題。
相對定位
position: relative;
元素按照文檔流的佈局放置元素,它的用處是可以在不改變佈局方式的前提下調整元素位置,使用 top bottom left right
絕對定位
position: absolute;
絕對定位的元素脫離了文檔流,不會佔據文檔流的空間,感覺就像在文檔流的上一層。
絕對定位的元素可以使用 top bottom left right
調整佈局位置,在沒有設置這幾個值的時候,絕對定位元素顯示還是保持在當前的位置。如果設置了值,那麼這個元素就需要找到一個錨點,因爲已經脫離文檔流,所以需要找到一個參考點,這參考點就是 最近的非 static 祖先元素
,可以是 relative, absolute, fixed
,一直往上到 body 元素。
所以常常會採用 relative + absolute
的組合佈局方式,當然也可以利用絕對定位元素在當前位置顯示的特性結合 margin
來使用。
絕對定位還有個用處,就是避免觸發迴流,因爲脫離正常的文檔流,因此對於頻繁迴流的元素可以採用絕對定位。
z-index
在說一個跟定位常一起使用的 z-index
,這個值表示創建一個新的顯示層級,值大的在最上層。
多個絕對定位元素會按照後一個覆蓋前一個的顯示方式,而且絕對定位元素會覆蓋文檔流中的元素,那麼只有在元素位置不當便調整順序的時候才只用,正常情況下不建議設置值,畢竟多使用一個元素,就容易出現詭異的問題。
DPR
先看看幾個概念
像素
是圖像顯示的基本單位,類似於米是長度的一個單位一樣。
1像素是顯示的最小區域。
物理像素
設備的物理像素,每個設備的物理像素都是廠家固定好的,
css像素
這個主要用於我們編碼用的,約定好的在顯示層上的單位,screen.width
可獲取到邏輯編碼中的窗口最大像素。
在看看 DPR
在 iphone 沒有搞事之前,物理像素和邏輯像素是相等的,但如今高清屏已經快成標配,可顯示的像素點越多越清晰,導致設備上每英寸可顯示的像素點(PPI)越來越多,這樣一來,屏幕的大小沒變,css的邏輯像素沒變,可物理像素卻變多了,一個邏輯像素要對於多個物理像素,這兩者的比例就是 DPR
DPR = 物理像素/css邏輯像素
可通過 window.devicePixelRatio
獲取設備的 DPR
參考文檔:
https://www.cnblogs.com/xiaohuochai/p/5494624.html
1px 問題了解麼?有什麼解決方案?
在高清屏中 DPR 可能會是 2 或者 3 ,那麼原先 1px 像素的線在高清屏下就佔了2個或者3個物理像素,導致線看着比較粗。
解決:
- 使用僞類,設置 border 1px scale(0.5)
- 設置 meta initial-scale 根據DPR設置初始值
- 僞類 + transform: scaleY(0.5);
/* 僞類 + transform: scaleY(0.5); */
.px1 {
position: relative;
}
.px1:before {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 200%;
border: 1px solid black;
color: black;
height: 200%;
transform-origin: left top;
transform: scale(0.5);
}
link 和 @import 的區別
看到這個問題我沒反應過來,import 不是js裏的東西嗎?回來查了資料才明白 css 還可以這麼玩。
@import 根據字面意思就知道是用於導入其他樣式文件的,兩者的區別如下:
-
從屬關係區別
link:是 html 提供的標籤,不僅可以加載css樣式表,還可以定義 RSS、rel 連接屬性等。
@import:是 css 提供的語法規則,用於導入樣式表。
-
加載順序區別
link:文件是同時加載。
@import 引入的 CSS 將在頁面加載完畢後被加載。
-
兼容性問題
link 不存在兼容性問題;@import 可能會有兼容性問題
display:none與visibility:hidden的區別?
效果都是隱藏元素
display:none
在文檔佈局中不在分配空間(節點),值變化會導致迴流和重繪
visibility:hidden
保留渲染樹中的節點,佔用空間,會導致重繪
inline-block block 的區別
這兩個分別是:行內塊級元素和塊級元素,順帶介紹下行內元素
塊級元素
塊級元素的特點:元素總是在新的一行開始,盒模型的屬性均可以控制,div p ul ol ...
等元素默認就是塊級元素,也可以通過 display: block;
設置爲塊級元素。
行內元素
行內元素的特點:和其他元素在同一行,元素不可以設置高度和寬度,取決於內容的寬高度,默認的行內元素有 span a lable input img ...
,也可通過 display: inline;
設置爲行內元素。
行內塊級元素
名字看上去就是上面兩者的結合,同時具備了兩個的特性。通過 display: inline-block;
設置。
但是兩個相鄰的 inline-block 元素中間有空格就會出現間隙,解決辦法可以粗暴的移除空格和換行,還有設置字體大小爲 0 , 因空格也是字符,所以可給父級設置 font-size:0、letter-spacing:-3px
rem em vh vw 的區別
這幾個單位常用於自適應佈局
rem em
rem
: css3 新增,相對於根節點的字體大小的一個單位,eg: 1rem * font-size:20px = 20px
在開發前先制定好一個基準,比如說以 375 寬的設計稿作爲規範,設定這個寬度下的字體大小爲 375/10 = 37.5 ,那設計稿下 60px 的寬對應的 rem 就是:60px = (60/37.5)rem
若使用css預處理,可以寫一個轉換函數
@function px2rem($px) {
@return ($px/37.5) + rem;
}
em
: 與rem類似,但是相對於父級元素的字體大小。
vw vh
相對於視口寬高的百分比值
vw
: 1vw 等於視口寬度的1%
vh
: 1vh 等於視口高度的1%
vmin
: 選取 vw 和 vh 中最小的那個
vmax
: 選取 vw 和 vh 中最大的那個
//iPhone 6尺寸作爲設計稿基準
$vm_base: 375;
@function vw($px) {
@return ($px / $vm_base) * 100vw;
}
單行、多行文本居中
單行:
- 設置
line-height
跟height
相同 flex
佈局,設置交叉軸對齊方式
多行:
- flex 佈局
display: flex;align-items: center;
- table 佈局 ,外層使用
display: table;
內層使用vertical-align: middle;display: table-cell;
table-cell 可以將元素表現與單元格 td 類似,在對單元格設置居中,不過會破壞其他屬性,比如浮動、margin 等
.text{
background-color: sandybrown;
width: 200px;
height: 300px;
display: table;
}
.cell{
vertical-align: middle;
}
<div class="text">
<div class="cell">
今天天氣很好,好想出去玩.今天天氣很好,好想出去玩.今天天氣很好,好想出去玩.今天天氣很好,好想出去玩.今天天氣很好,好想出去玩.
</div>
</div>
- 設置外層 line-height 等於外層高度,文本一行的高度就等於容器的高度,內層使用
display: inline-block;vertical-align: middle;line-height: 17px;
內層設定爲行內塊級元素,設置行內元素的對齊方式是 middle,在對元素重新設定行高
.text {
background-color: sandybrown;
width: 200px;
height: 300px;
line-height: 300px;
}
.cell {
display: inline-block;
vertical-align: middle;
line-height: 20px;
}
<div class="text">
<div class="cell">
今天天氣很好,好想出去玩.今天天氣很好,好想出去玩.今天天氣很好,好想出去玩.今天天氣很好,好想出去玩.今天天氣很好,好想出去玩.
</div>
</div>
css 選擇器和優先級
id選擇器(#myid)、類選擇器(.myclassname)、標籤選擇器(div, h1, p)、相鄰選擇器(h1 + p)、子選擇器(ul > li)、後代選擇器(li a)、通配符選擇器(*)、屬性選擇器(a[rel=“external”])、僞類選擇器(a:hover, li:nth-child),簡單介紹下面幾個:
a > b
:子類選擇器,只有直接的子類才生效
a + b
:毗鄰選擇器,只有毗鄰的下一個元素才生效
a ~ b
:後續選擇器,a元素之後的所有同級的b元素
[attribute]
:屬性選擇器,含有這個屬性的元素才生效
:first-of-type
: 選擇器匹配元素其父級是特定類型的第一個子元素
選擇器權重
優先級排序: !important > 行內樣式 > ID > 類、僞類、屬性 > 標籤名 > 通配符 > 繼承
權重值如下,每個都是相差一個量級
- 元素和僞元素選擇器: 1
- class選擇符: 10
- id選擇符:100
- 內聯樣式:1000
英文換行
- word-break: break-all 對字符起作用,斷開單詞,下個字母自動到下一行。主要解決了長串英文的問題。
- word-wrap:break-word 只對英文起作用,以單詞作爲換行依據
哪些屬性可以繼承
元素外觀相關的屬性可以繼承,比如字體相關的屬性、文本系列的屬性。佈局相關的屬性不可以繼承,具體屬性名就不列舉了。
flex 常見有屬性
問這種屬性名稱的真是尷尬,平常都是自動補全的,哪記得住呀…
容器上的屬性
flex-direction
: 主軸方向
flex-wrap
: 換行的方式
flex-flow
:上面兩個的簡寫
justify-content
: 主軸的對其方式
align-items
: 交叉軸的對齊方式
align-content
: 多根主軸的對齊方式
元素上的屬性
order
: 排序值,數值越小越靠前
flex-grow
: 項目放大的比例,默認爲 0 不放大
flex-shrink
: 項目縮小的比例,默認 1
flex-basis
: 屬性定義了在分配多餘空間之前,項目佔據的主軸空間,如果元素定義了寬,那麼寬度將無效 默認 auto
flex
:以上三個的簡稱
小結
css 相關的問的相對比較少些,一般會以一個具體場景作爲前提展開問。
覺得有幫助的小夥伴,求求點個贊呀~~
最後還是要在給大家推薦我吐血整理的 面試總結:javascript 面試點彙總 強烈大家看看這篇,面試中 js 是大頭。