1.
,父元素和子元素寬高不固定，如何實現水平垂直居中。
方法1：
方法2：
html,body
body
.parent
.child
方法3：
2.分別實現魔方中的 '一點' 和 '三點' 的布局。
一點的布局：
三點的布局
3.簡述選擇器~和+的區別。
1）.相鄰兄弟選擇器。選擇有相同父元素的兩個挨著的元素的後乙個元素。語法：元素1 + 元素2
例如1：
h1 + p
html中：
//可以匹配
······
//不可以匹配
例如2：
li + li
html中：
2).普通兄弟選擇器。選擇有相同父元素的兩個元素中，第乙個元素後所有的第二個元素。語法：元素1 ~ 元素2
例如：h1 ~ p
html中：
//可以匹配
······
//可以匹配
//不可以匹配
4.簡述box-sizing的有效值以及所對應的盒模型規則。
box-sizing 屬性允許您以特定的方式定義匹配某個區域的特定元素。
語法：box-sizing: content-box|border-box|inherit;
1）box-sizing:content-box；這是由 css2.1 規定的寬度高度行為。寬度和高度分別應用到元素的內容框。在寬度和高度之外繪製元素的內邊距和邊框。是預設值。如果你設定乙個元素的寬為100px，那麼這個元素的內容區會有100px 寬，並且任何邊框和內邊距的寬度都會被增加到最後繪製出來的元素寬度中
2）box-sizing:border-box；為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。告訴瀏覽器去理解你設定的邊框和內邊距的值是包含在width內的。也就是說，如果你將乙個元素的width設為100px,那麼這100px會包含其它的border和padding，內容區的實際寬度會是width減去border + padding的計算值。大多數情況下這使得我們更容易的去設定乙個元素的寬高。
3）box-sizing:inherit;；規定應從父元素繼承 box-sizing 屬性的值
5.flex中元素的margin是否會合併？
不會合併
6.簡述align-items和align-content的區別。
align-items屬性適用於所有的flex容器，它是用來設定每個flex元素在交叉軸上的預設對齊方式。如果是多行多行容器，多行和多行之間是有間距的。
align-content有相同的功能，但是align-content屬性只適用於多行的flex容器，有乙個重點就是多行，並且align-content在對齊的過程中，如果是多行多行容器，多行和多行之間的間距是沒有的。
單行容器：
多行容器：
7.簡述data:屬性的用法（如何設定，如何獲取）；有何優勢？
data-* 的值的獲取和設定，2種方法：
1）傳統方法
getattribute() 獲取data-屬性值；
setattribute() 設定data-屬性值
2)html5新方法
例如 data-href
dataset.href 獲取data-href屬性值
dataset.href = '' 設定data-href屬性值
傳統方法無相容性問題，但是不夠優雅、方便
html5新方法很優雅、方便，但是有相容性問題，可以在移動端開發或不支援低版本瀏覽器的專案中使用
優勢：自定義的資料可以讓頁面擁有更好的互動體驗（不需要使用 ajax 或去服務端查詢資料）。
8.簡述title與h1的區別，b與strong的區別，i與em的區別。
1)title與h1的區別:
2)b與strong的區別:
從視覺上效果**b與strong是沒有區別的,從單詞的語義也可以分析得出，b是bold(加粗)的簡寫，所以這個b標記所傳達的意思只是加粗，沒有任何其它的作用，而strong我們從字面理解就可以知道他是強調的意思，所以我們用這個標記向瀏覽器傳達了乙個強調某段文字的訊息，他是強調文件邏輯的，並非是通知瀏覽器應該如何顯示。
3)i與em的區別:同樣，i是italic(斜體)，而em是emphasize(強調)。
9.什麼是標準文件流？
標準文件流等級，分為兩種等級：塊級元素和行內元素；
塊級元素：
1).霸佔一行，不能與其他任何元素並列
2).能接受寬、高
3).如果不設定寬度，那麼寬度將預設變為父親的100%，即和父親一樣寬
行內元素：
1).與其他元素併排
2).不能設定寬、高。預設的寬度就是文字的寬度
10.z-index是什麼？在position的值是什麼時可以觸發？
z-index 屬性設定元素的堆疊順序。擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面，當脫離文件流內容較多，並且相互重疊的時候，就有可能發生本想完全顯示的內容被其他內容遮擋的結果，這時我們就需要人為指定哪個層在上面，哪個在下面，z-index屬性就是幹這個用的。注意：z-index 僅能在定位元素上奏效.
在position的值是relative、absolute、fixed、sticky時候可以觸發
11、pc端常用的布局方法
固定布局、浮動布局、定位布局、流式布局、彈性布局
12 布局 左邊20% 中間自適應 右邊200px 不能用定位
方法1：
>left
>center
>right
方法2：
>left
>right
>center
方法3：
left
>right
>center
前端開發面試題
基礎題 1.談一談你對bootstrap的柵格布局的理解。2.談一談你對mvvm的理解。3.es6的展開運算子有使用過嗎？有什麼用處？4.let和var const的區別是什麼？5.最近有了解前端的發展嗎？有沒有學習什麼最新的前端技術？6.sessionstorage localstorage和co...
前端面試題 2023年web前端開發面試題
本文章作為2021屆應屆畢業生在實習面試期間所接受的前端面試的面試題。css盒子模型的要素，css中常用偽元素選擇符 position屬性四個值 static fixed absolute和relative的區別和用法 解釋css樣式中display中inline block inline bloc...
前端開發面試題（二）
乙個200 200的div在不同解析度螢幕上下左右居中，用css實現 利用負值來實現居中。可以腦補畫面離左右都是50 剛好可以居中，但是div位置在 距左右外邊框各負50 寬度。body div1寫乙個左右布局沾滿螢幕，其中左 右兩塊定寬200，中間自適應寬，要求先載入中間塊，請寫出結構及樣式。ht...