潛入理解H5&CSS3-面試準備（不斷更新中?···）

noopyxu發表於2018-03-23
H5CSSS3面試

position屬性

position用來指定一個元素在文件中的位置

  • static：正常佈局；top,right,bottom,left,z-index屬性失效
  • relative：相對定位
  • absolute：絕對定位，相對最近一個非static祖先元素定位；脫離文件流（以及float屬性）
  • fixed：固定定位，相對於螢幕視口（viewport）的位置來指定元素位置，頁面滾動位置也固定；脫離文件流
  • sticky：粘性定位，先按照relative定位，再按照fixed定位。詳見MDN

display屬性

display是指定元素的呈現

  • none：關閉一個元素的顯示
  • inline：行內顯示
  • block：塊級顯示
  • table：表格顯示
  • list-item：列表行顯示
  • flex：flexbox模型顯示
  • grid：柵格盒模型

衍生題

display:none、visibility:hidden:、opacity:0之間的區別

  • display: none 徹底消失，render tree中也不存在（dom tree中存在）；可能會引起reflow
  • visibility: hidden 渲染為空盒子，在render tree中存在；不會引起reflow；效能更好；也不會觸發事件
  • opacity: 0 將元素隱藏起來，也不會改變頁面佈局，但是會觸發點選事件

替換元素&非替換元素

內容是否能夠修改、替換；例如修改<img>標籤修改src屬性就會變化，這是替換標籤

下面列舉一些替換元素，除了替換元素都是非替換元素

  • img: display:inline
  • iframe: display:inline
  • video&audio: display:inline
  • input: display:inline-block
  • button: display:inline-block
  • select: display:inline-block

注：vertical-align屬性適用於inline元素和table-cell元素

居中：實現水平垂直佈局

  • flex：主軸(justify-content)和交叉軸(align-items)均為center
  • transform：（居中塊）採用相對佈局，top:50%,left:50%再加上transform: translate(-50%; -50%)實現水平垂直居中
  • table ：這個不用講了
  • margin負值：（居中塊）採用相對佈局 + top:50%,left:50% + margin-top: -height/2,margin-left: -width/2
  • 絕對定位：父級節點相對定位，居中塊絕對定位而且top:0;left:0;right:0;bottom:0;+margin:auto;

佈局：實現三欄自適應佈局

  • float佈局：左邊float:left，右邊float:right，中間塊設定min-width即可
  • absoluate定位：中間塊設定距離父級節點的left:100px;right:100px;即可；當然父級節點positon不能為static
  • flex佈局：中間塊flex-grow為1（預設0）；左右兩邊設定flex-basis:100px即可
  • table佈局：table``table-cell很容易
  • grid佈局：父級節點需要display:grid;然後網格流方向為grid-auto-flow:column;再然後grid-template-columns: 100px auto 100px;設定列寬

BFC

BFC是塊級格式化上下文（Block Format Context），我們可以把它看作一個大盒子，一個獨立的容器。這個容器就是一個BFC，其內部和外部不會有任何影響，在這個大盒子（BFC）中，你可以隨便佈局、浮動。

面對的問題

我們建立BFC是為了解決實際中的問題，如

邊距重疊/邊距吞噬

  • 同一個BFC內，邊距會發生重疊，公共邊距為邊距大的那個(水平方向邊距永遠不會重疊)
  • 如果需要清除邊距重疊，可以建立兩個BFC即可

清除內部浮動，父級元素高度未加上浮動元素高度

  • 內部元素浮動，父級高度未加上浮動元素高度
    內部元素浮動，父級高度未加上浮動元素高度
  • 清除內部元素浮動，父級高度加上浮動元素高度
    清除內部元素浮動，父級高度加上浮動元素高度

浮動aslide重疊

  • 左邊aslide和右邊main重疊
    左邊aslide和右邊main重疊
  • 右邊main建立BFC，不會和左邊aslide重疊
    右邊main建立BFC，不會和左邊aslide重疊

如何建立BFC

  • float不為none
  • overflow為auto、hidden
  • display為inline-block、table=cell、flex
  • position不為static或relative

BFC的特性

  • 計算BFC高度時，浮動子元素也會參與計算
  • BFC內部的box一個接一個放
  • BFC是頁面上一個獨立元素，和外界元素互不影響
  • BFC不會和浮動元素重疊

清除浮動

在清除浮動之前，我們先了解一下浮動的原理：

浮動和position:absoluate;|position:fixed;一樣都會脫離文件流。當一個元素浮動的時候，他會脫離當前文件流，向左或向右浮動，直到遇到父元素或者另外一個浮動元素。

浮動會造成哪些問題，為什麼要清除浮動

  • 浮動造成父元素高度坍塌：浮動會脫離當前文件流，父元素高度不會被撐開，計算父元素高度時不會加上浮動子元素的高度
  • 浮動元素和非浮動元素重疊：aslide（浮動元素）和main重疊

清除浮動的方法

  • 建立BFC，因為BFC不和浮動元素重疊
  • 新增額外標籤，並設定clear:both
  • clearfix方法
.clearfix:before,
.clearfix:after {
    content: '';
    display: block;
    clear: both;
}
複製程式碼

盒模型

分類

  • IE盒模型：計算盒子高度/寬度時會加上 padding/margin/border；box-sizing:border-box;
  • 標準盒模型：計算盒子高度/寬度時會不加上 padding/margin/border；box-sizing:content-box;（預設）

獲取盒模型高度

  • dom.style.height 獲取內聯css
  • window.getComputedStyle(dom).height或者window.getComputedStyle(dom).getPropertyValue("height")（IE9下不支援）應用活動樣式表後的元素的所有CSS屬性的值
  • dom.getBoundingClientRect().height 返回元素的大小及其相對於視口的位置

Html5 新特性

H5新增標籤

語義化標籤

  • header 頁頭
  • footer 頁尾
  • nav 導航欄 (
  • section 表示文件中的一個區域（或節）
  • article 文件、頁面、應用或網站中的獨立結構
  • aside 側邊欄或者嵌入內容

canvas & svg

  • canvas通過JavaScript繪製2D圖形
  • svg通過xml描述2D圖形

表單標籤

  • datalist 一組
  • output 表示計算或使用者操作的結果

多媒體標籤

  • audio 音訊內容
  • video 視訊內容
  • source 表示多媒體資源

其他問題

z-index和position

z-index 屬性指定了一個具有定位屬性（即position屬性值是非static的元素）的元素及其子代元素的 z-order。

  • z-index只能在positon: relatice|absoluate|fixed;的元素上使用
  • z-index控制元素在垂直螢幕方向（z軸）上顯示
  • z-index只能決定同一個父元素下的同級子元素堆疊順序

link & import 引入CSS區別

  • import是CSS引入樣式表的語法，link則是HTML提供的標籤。
  • link在頁面載入時同時載入，import是在頁面載入完成之後再載入。
  • 可以使用操作DOM，插入link標籤改變樣式，import不可以。

偽類和偽元素的區別

  • 偽類，當前元素屬於某種狀態時，為其新增相應的樣式，狀態會隨著使用者行為而變化。如:hover,:focus
  • 偽元素，建立一些DOM樹種不存在的元素，並新增樣式。例如:before會在元素之前新增一些內容。使用者看的到，但這些內容不存在於DOM樹中。

相關文章