HTML篇

1、 圖片格式

JPEG、GIF、PNG

2、 盒子模型

寬度=內容寬度+padding（左右）+margin（左右）
高度=內容高度+padding（左右）+margin（左右）

3、視頻/音頻標簽使用

src 需要播放的視頻地址
width/eight 設置播放視頻的寬高，和 img 標簽的寬高屬性一樣
autoplay 是否自動播放
controls 是否顯示控制條
poster 沒有播放之前顯示的展位圖片
lop 是否循環播放
perload 預加載視頻（緩存）與 autoplay 相沖突，設置了 autoplay 屬
性，perload 屬性會失效。
muted 靜音模式

4.HTML5 新增的內容有哪些

• 新增語義化標簽:
  語義化標簽優點：1.提升可訪問性 2.seo 3.結構清晰，利于維護

Header 頁面頭部 main 頁面主要內容 foter 頁面底部 Nav 導航欄 aside 側邊欄 article 加載頁面一塊獨立內容 Section 相 當 于 div figure 加 載 獨 立 內 容 （ 上 圖 下 字 ） figcaption figure 的標題 Hgroup 標題組合標簽 mark 高亮顯示 dialog 加載對話框標簽（必須 配合 open 屬性） Embed 加載插件的標簽 video 加載視頻 audio 加載音頻（支持格式 og，mp3，wav）

• 新增表單類型
• 表單元素
• 表單屬性
• 表單事件
• 多媒體標簽

5、Cs3 新增的特性

邊框：
border-adius 添加圓角邊框
border-shadow：給框添加陰影 （水平位移，垂直位移，模糊半徑，陰
影尺寸，陰影顏色，insert（內/外部陰影）
border-image：設置邊框圖像
border-image-source 邊框圖片的路徑
border-image-slice 圖片邊框向內偏移
border-image-width 圖片邊框的寬度
border-image-outset 邊框圖像區域超出邊框的量
border-image-rpeat 圖像邊框是否平鋪（repat 平鋪 round 鋪滿
strech 拉伸）

背景：
Background-size 背景圖片尺寸
Background-orign規定background-positon屬性相對于什么位置定
位
Background-clip 規定背景的繪制區域（pading-box，border-box，
content-box）

漸變：
Linear-gadient（）線性漸變
Radial-gradient（）徑向漸變

文本效果：
Word-break：定義如何換行
Word-wrap：允許長的內容可以自動換行
Text-overflow：指定當文本溢出包含它的元素，應該干啥
Text-shadow：文字陰影（水平位移，垂直位移，模糊半徑，陰影顏色）

轉換：
Transform 應用于 2D3 轉換，可以將元素旋轉，縮放，移動，傾斜
Transform-orign 可以更改元素轉換的位置，（改變 xyz 軸）
Transform-style 指定嵌套元素怎么樣在三位空間中呈現
2D 轉換方法：
rotae 旋轉 translate（x，y）指定元素在二維空間的位移 scale（n）
定義縮放轉換
3D 轉換方法：
Perspective（n）為 3D 轉換 translate rotae scale

過渡：
Transiton-proprety 過渡屬性名
Transiton-duration 完成過渡效果需要花費的時間
Transiton-timng-function 指定切換效果的速度
Transiton-delay 指定什么時候開始切換效果

動畫：animation
Animation-ame 為@keyframes 動畫名稱
animation-duration 動畫需要花費的時間
animation-timng-function 動畫如何完成一個周期
animation-delay 動畫啟動前的延遲間隔
animation-iteration-count 動畫播放次數
animation-direction 是否輪流反向播放動畫

6、清除浮動的方式

清除浮動:
在非IE瀏覽器（如Firefox）下，當容器的高度為auto，且容器的內容中有浮動（float為left或right）的元素，在這種情況下，容器的高度不能自動伸長以適應內容的高度，使得內容溢出到容器外面而影響（甚至破壞）布局的現象。這個現象叫浮動溢出，為了防止這個現象的出現而進行的CSS處理，就叫CSS清除浮動

即高度塌陷：當所有的子元素浮動的時候，且父元素沒有設置高度，這時
候父元素就會產生高度塌陷

清除浮動方式

給父元素單獨定義高度
優點：快速簡單，代碼少 缺點：無法進行響應式布局

父級定義 overflow：hiden；zom：1（針對 ie6 的
兼容）
優點：簡單快速、代碼少，兼容性較高 缺點：超出部分被隱藏，布局時
要注意
清除浮動方式

在浮動元素后面加一個空標簽，clear：both；height：
0；overflow：hiden
優點：簡單快速、代碼少，兼容性較高。
缺點：增加空標簽，不利于頁面優化
清除浮動方式

父級定義 overflow：auto

萬能清除法：
給塌陷的元素添加偽對象
.father：after{
Content：“隨便寫”；
Clear：both；
display：block；
Height：0；
Overflow：hiden；
Visbilty：hiden
}
優點：寫法固定，兼容性高 缺點：代碼多

7、定位的屬性值有何區別

Positon 有四個屬性值：relative absolute fixed staic

• Relative 相對定位 不脫離文檔流，相對于自身定位
• Absolute 絕對定位，脫離文檔流
  相對于父級定位（元素將依據最近的已經定位（絕對、固定或相對定位）的父元素（祖先）進行定位）
• Fixed
  固定位，脫離文檔流，相對于瀏覽器窗口定位
• Staic 默認值，元素出現在正常的流中

8.子元素如何在父元素中居中

水平居中：

子父元素寬度固定，子元素設置 margin：auto，并且子元素不能設置
浮動，否則居中失效

子父元素寬度固定，父元素設置 text-align：center，子元素設置
display：inle-block，并且子元素不能設置浮動，否則居中失效

水平垂直居中：

子元素相對于父元素絕對定位，子元素 top，left 設置 50%，子元素
margin-top 和 margin-left 減去各自寬高的一半

子元素相對于父元素絕對定位，子元素上下左右全為 0，然后設置子元素
margin：auto

父元素設置 display：table-cell vertical-align：middle，子元素設置
margin：auto

子元素相對定位，子元素 top，left 值為 50%，transform：translate
（-50%，-50%）（向上和左，移動自身長寬的 50%，先x后y的）

父元素設置彈性盒子，
display：flex； justfy-content：center ；align-item：center；

9、.Borde-box 與 content-box 的區別

Content-box 標準盒模型 width 不包括 pading 和 border
Border-box 怪異盒模型 width 包括 pading 和 border

10、元素垂直居中

設置子元素和父元素的行高一樣

子元素設置為行內塊，再加 vertical-align：middle

已知父元素高度，子元素相對定位，通過 transform：translateY（-50%）

不知道父元素高度，子絕父相，子元素 top：50%，transform： translateY（-50%）

.創建一個隱藏節點，讓隱藏節點的 height 為剩余高度的一半
#hide{width:50%;height:25%(剩余高度一半

給父元素 display：table，子元素 display：table-cell，vertical-align： middle

給父元素添加偽元素 ,::before{content:'';display:inline-block;vertical-align： middle;height:100%

彈性盒，父元素 display：flex，子元素 align-self：center

11.如何讓 chrome 瀏覽器顯示小于 12px 的文字

-webkit-transform：scale（XXX）對文本進行縮放

12.css 選擇器有哪些，那些屬性可以繼承，優先級如何計算？

Cs2 選擇器：
元素選擇器，id 選擇器，群組選擇器，類選擇器，*通配符選擇器，后代選擇器
Cs2 偽類選擇器：a:link/visted/hover/active
Cs3 選擇器：
空格 > +相鄰兄弟選擇器 ~通用選擇器（查找后面所有）
結構偽類選擇器：
查找第幾個 nth-child（n）
查找同一類型第幾個 nth-oftype
查找唯一類型 only-oftype
屬性選擇器：根據標簽屬性查找 [atr=value]
: rot 查找根元素 html 標簽
: empty 查趙空標簽
目標偽類選擇器：（表單）
：enabled 查找可以使用的標簽
：disabled 查找禁止使用的標簽
：checked 查找被選中的標簽
偽元素選擇器 ：selction 設置選中文本內容的高亮顯示（只能用于背
景色和文本顏色）
否定偽類選擇器 not（）
語言偽類選擇器 lang（取值）

優先級（權重）：
元素選擇器 1
偽元素選擇器 1
clas 選擇器 10
偽類選擇器 10
屬性選擇器 10
Id 選擇器 100
內聯樣式的權重 1000
包含選擇器權重為權重之和
繼承樣式權重為 0
那些屬性可以繼承：
Cs 繼承特性主要是文本方面
所有元素可繼承：visbilty 和 cursor
塊級元素可繼承：text-indent 和 text-align
列表元素可繼承：list-yle，list-yle-type，list-yle-positon，
list-yle-image
內聯元素可繼承：letr-spacing，word-spacing，line-height，colr，
font，font-family，font-size
Font-syle ， font-varint ， font-weight ， text-decoration ，
text-ransform，direction
字母間距 段落間距 行高 字體顏色 字體種類 字體大小 字體樣
式 字體粗細 小型大寫字母文本 文本修飾 轉換不同元素中的文本 文
本方向

13.網頁中有大量圖片加載很慢 你有什么辦法進行優化？

圖片懶加載，在圖片未可視區域加一個滾動條事件，判斷圖片位置與瀏
覽器頂端和頁面的距離，如果前者小于后者，優先加載

使用圖片預加載技術，將當前展示圖片的前一張和后一張優先下載

使用 cssprite(雪碧圖） 或者 svgsprite

14.行內元素/塊級元素有哪些？

行內元素：相鄰的行內元素會排列在同一行，不會獨占一行 設置寬高無
效 span
塊級元素：會獨占一行 可以設置寬高等屬性 div
可變元素：根據上下文預警決定該元素為塊元素還是內聯元素
塊級元素：div h1-h6 hr p ul o table adres blockquote dir fom
menu
行內元素：a br I em img input selct span sub sup u textarea
可變元素：buton del iframe ins

15、16.瀏覽器的標準模式和怪異模式區別？

標準模式：瀏覽器按照 W3C 標準解析執行代碼
怪異模式：瀏覽器根據自己的方式解析執行代碼，因為不同瀏覽器解析
執行方式不一樣，所以叫怪異模式

區別：
在怪異模式下，盒模型為怪異盒模型 而在標準模式下為標準盒子模型
標準模式下，一個塊的總寬度= width + margin(左右) + padding(左右) + border(左右)
一個塊的總寬度= width + margin(左右)（即width已經包含了padding和border值）

圖片元素的垂直對齊方式對于行內元素和 table-cel 元素，標準模式下
vertical-align 屬性默認值是 baseline，而在怪異模式下，table 單元格
中的圖片的 vertical-align 屬性默認值是 bottom，因此在圖片底部會有
幾像素的空間
元素中的字體css中font的屬性都是可以繼承的，怪異模式下，對于table
元素，字體的某些元素不能從其他封裝元素繼承中得到，特別是 font-size屬性
內聯元素的尺寸標準模式下，no-replaced inline 元素無法自定義大寫，

怪異模式下，定義元素的寬高會影響元素的尺寸
元素的百分比高度當一個元素使用百分比高度時，在標準模式下，高度
取決于內容變化，在怪異迷失下，百分比被準確應用
元素溢出的處理標準模式下，overflow 取值默認值為 visble，在怪異模
式下，這個溢出會被當做擴展 box 對待，就是元素的大小由內容決定，
溢出不會裁剪，元素框自動調整，包含溢出內容

16、Margin 和 pading 在什么場合下使用

Margin 外邊距 自身邊框到另一個邊框之間的距離
Pading 內邊距 自身邊距到自身內容之間的距離
當需要在 border 外側添加空白時用 margin，當需要在 border 內側添
加空白時用 pading

17、彈性盒子布局屬性有那些請簡述?

Flex-direction：彈性容器中子元素排列方式（主軸排列方式）
Flex-wrap：設置彈性盒子的子元素超出父容器時是否換行
Flex-flow：是 flex-direction 和 flex-wrap 簡寫形式
Align-item：設置彈性盒子元素在側軸上的對齊方式
Align-content：設置行對齊
Justify-content：設置彈性盒子元素在主軸上的對齊方式

18.怎么實現標簽的禁用

添加 disabled 屬性

19、Flex 布局原理

就是通過給父盒子添加 flex 屬性，來控制子盒子的位置和排列方式

20、Px，rem，em 的區別

em 相對長度單位，相對于當前對象內文本的字體尺寸
em 的值并不是固定的
em 會繼承父級元素的字體大小（參考物是父元素的 font-size）
em 中所有的字體都是相對于父元素的大小決定的
rem 相對于 html 根元素的 font-size
1em=1rem=16px 在 body 中加入 font-size：62.5% 這樣直接就是原
來的 px 數值除以 10 加上 em 就可以

em的初始值為1em=16px，顯然這樣的話，如1.2em則=19.2px，可是我們在設置的時候很少看見19.2px這樣表示的大小，也就是在用px表示大小時數值是不帶小數位的。當設置了body{font-size:> 62.5%;}時，1em則=16px*62.5%=10px,1.2em則=12px

總結

以上是生活随笔為你收集整理的【面试题】HTML篇（一）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。