好程式設計師web前端分享
html5
常見面試題集錦第二篇，希望對大家有所幫助。
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的區別:
定義：title是**標題，h1是文章主題
作用：title概括**資訊，可以直接告訴搜尋引擎和使用者這個**是關於什麼主題和內容的，是顯示在網頁tab欄裡的；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、時候可以觸發
11、pc端常用的布局方法
固定布局、浮動布局、定位布局、流式布局、彈性布局
12 布局
左邊20% 中間自適應 右邊200px 不能用定位
方法1：
left
center
right
方法2：
left
right
center
方法3：
left
right
center
好程式設計師HTML5大前端分享web前端面試題集錦二
1 為什麼要初始化css樣式？答案 因為瀏覽器的相容問題，不同瀏覽器對有些標籤的預設值是不同的，如果沒對css初始化往往會出現瀏覽器之間的頁面顯示差異。當然，初始化樣式會對seo有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化。2 浮動元素引起的問題？答案 a.父元素的高度無法被撐開，...
好程式設計師web前端分享邏輯運算
一門計算機語言，程式設計的核心在於邏輯思想，當我們在編寫程式的時候，邏輯是否通順，是能否正確寫出程式的關鍵，可以說如果你掌握了邏輯，那麼你就踏入了計算機程式設計的大門。與 或 否 邏輯 與 var a 0,b 3 alert a 0 b 3 true alert a 1 b 3 false 他的 返...
好程式設計師web前端分享CSS學習 HSLA顏色模式
好程式設計師web前端分享css學習 hsla顏色模式 一 理論 1.hsla顏色模式 a.hsla在hsl基礎上增加了不透明度，值越大透明度越低 b.hsla顏色模式的瀏覽器相容性和hsl一樣，只有較新版本的主流瀏覽器才支援 2.rgba和hsla顏色模式二者可以完全相互替換 3.rgba hsl...