1.如何理解html語義化
html語義化是指從代碼上展示頁面的結(jié)構(gòu)，而不是從最終視覺上來表現(xiàn)結(jié)構(gòu)十酣。
1.2 表現(xiàn)形式
html5新標(biāo)簽:
header-頁眉、footer-頁腳珊擂、aside-附屬信息射富、nav-導(dǎo)航鏈接、section盆色、article灰蛙，
caption-表格標(biāo)題、thead-表頭隔躲、tbody-表格內(nèi)容摩梧、tfoot-表尾
1.3 作用
有利于構(gòu)建良好的html架構(gòu)，有利于搜索引擎建立索引和抓取
頁面結(jié)構(gòu)清晰宣旱，有利于代碼的維護和管理
有利于不同設(shè)備(盲人閱讀器仅父、屏幕閱讀器)的解析
2.px，em，rem區(qū)別
px 表示絕對尺寸驾霜，這里并非真正的絕對案训，實際上就是css中定義的像素 em 相對尺寸（在自身沒有設(shè)置font-size為絕對尺寸的情況下），相對父元素的字體大小而言的 rem 相對尺寸粪糙，相對html根元素的字體大小而言的强霎，css3新增元素
3.盒子模型
1.IE盒子模型 寬度=內(nèi)容寬度+padding 2+border 2
3.w3c盒子模型 寬度=內(nèi)容寬度 通過box-sizing切換，默認(rèn)為content-box(w3c盒子模型)蓉冈，border-box時為IE盒子模型
4.BFC
塊級格式化上下文城舞，讓BFC里面的元素與外面元素隔離，使里外元素的定位不會相互影響寞酿。 觸發(fā)條件:
根元素
overflow不為visible
float
position:absolute或fixed
display:inline-block或table 應(yīng)用: 防止垂直方向margin重疊 不和浮動元素重疊 清除元素內(nèi)部浮動
5.doctype作用家夺，嚴(yán)格模式和混合模式的區(qū)別
<!doctype>聲明位于文檔的最前面，在html之前顯示伐弹。用于告訴瀏覽器的解析器拉馋，用什么文檔類型規(guī)范來解析文檔。嚴(yán)格模式默認(rèn)用瀏覽器支持的最高版本解析惨好，混合模式以寬松的向后兼容的方式解析煌茴，doctype不存在或格式不正確時會讓文檔以混雜模式呈現(xiàn)
6.水平垂直居中的方法（盒子中的內(nèi)容）
//方法一,flex+父
display:flex;
justify-content:center;
align-items:center;
//方法二，table-cell+父
display: table-cell;
vertical-align: middle;
text-align: center;
//方法三:適用于已知寬高且父元素定位不為static +子
postion:absolute;
width:100px;
height:100px;
top:50%;
left:50%;
margin:-50px 0 0 -50px;
//方法四+子
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
//方法五:適用于行內(nèi)元素+父
display:inline-block;
width:100px;
height:100px;
text-align:center;
line-height:100px;
//方法六:水平居中
margin:0 auto;//塊級元素+子
text-align:center;//行內(nèi)元素+父
7.回流和重繪區(qū)別
回流：當(dāng)渲染樹中元素尺寸日川、結(jié)構(gòu)或者某些屬性發(fā)生變化時蔓腐，瀏覽器重新渲染部分或全部頁面的情況叫回流。下列元素改變引發(fā)回流:
getBoundingClientRect()
scrollTo()
scrollIntoView()或者scrollIntoViewIfneeded
clientTop龄句、clientLeft回论、clientWidth、clientHeight
offsetTop分歇、offsetLeft傀蓉、offsetWidth、offsetHeight
scrollTop职抡、scrollLeft葬燎、scrollWidth、scrollHeight
getComputedStyle() 重繪：當(dāng)頁面中元素樣式變化不會改變它在文檔流中的位置時繁调，即不會使元素的幾何屬性發(fā)生變化萨蚕，瀏覽器會將新樣式賦給它并重新繪制頁面(比如color、backgroundColor) 頻繁回流和重繪會引起性能問題 避免方法:
1.減少table布局使用
2.減少css表達(dá)式的使用(如calc())
3.減少DOM操作蹄胰，用documentFragment代替
4.將元素設(shè)為display:none;操作結(jié)束后把它顯示回來岳遥，因為display:none不會引發(fā)回流重繪
5.避免頻繁讀取會引發(fā)回流重繪的元素，如果需要最好是緩存起來
6.對復(fù)雜動畫元素使用絕對定位裕寨，使它脫離文檔流
7.減少使用行內(nèi)樣式
8.如何讓Chrome顯示小于12px的文本
利用css3的轉(zhuǎn)換屬性的縮放函數(shù)來實現(xiàn)浩蓉， 舉例：讓p標(biāo)簽的文本顯示6px派继；css:font-size:6px;transform:sacle(.5) 如果這個樣式只是在谷歌中顯示，那要加上瀏覽器內(nèi)核前綴webkit
9.iphoneX如何適配
1.問題定位:如何讓頁面適配iPhoneX的齊劉海捻艳，底部的操作區(qū)域以及大圓角的問題
2.iphonex雖然和其他手機一樣都是一個屏幕驾窟，但是內(nèi)部分為了好幾個模塊。 正常的網(wǎng)頁放到iPhonex里面來的話认轨，頭部和底部會出現(xiàn)白框绅络。(iPhonex里面有一個safedArea安全區(qū)域，也就是中間的大部分區(qū)域嘁字，而非安全區(qū)域部分是沒有網(wǎng)頁內(nèi)容的恩急。處于安全區(qū)域的內(nèi)容不受圓角（corners）、齊劉海（sensor housing）纪蜒、小黑條（Home Indicator）影響)
3.解決方案:
1.給body添加背景色衷恭，之前說頭部和底部會出現(xiàn)白框，實際上不一定是白色纯续，這個顏色是body的背景色随珠。另外當(dāng)我們上拉或者下拉內(nèi)容的時候，顯示網(wǎng)頁下方的顏色其實也就是body的背景色猬错。
2.在meta標(biāo)簽中引入viewport-fit=cover屬性窗看。使頁面占滿整個屏幕。但是導(dǎo)航欄卻會被齊劉海遮住部分內(nèi)容兔魂，并且發(fā)現(xiàn)原來設(shè)置了100%的高度并沒有占據(jù)全部內(nèi)容空間
3.首先對于頭部和底部的高度是在iPhone X中是有匹配值的烤芦，另外的話在ios11的瀏覽器Chrome內(nèi)核提供了一些屬性類似于safe-area-inset-top举娩、-right析校、-left、-bottom铜涉，用于設(shè)定安全區(qū)域與邊界的距離智玻。 給body上加一個css樣式：content只有加上了viewport-fit=cover才會生效
padding:
env(safe-area-inset-top)
env(safe-area-inset-right)
env(safe-area-inset-bottom)
env(safe-area-inset-left);
一般只設(shè)置bottom，它對應(yīng)的就是小黑條的高度
在安卓手機上constant是不會被識別的芙代。
4.100%的高度并沒有占據(jù)全部內(nèi)容空間： 設(shè)置body的高度為100vh吊奢，占滿全屏高度
10.什么是vw和視口
1.視口，瀏覽器上(也可能是一個app中的webview)用來顯示網(wǎng)頁的那部分區(qū)域
在pc端中視口指的是瀏覽器的可視區(qū)域纹烹，而在移動端中涉及三個視口页滚，一個是布局視口，二是視覺視口铺呵，三是理想視口裹驰。
瀏覽器默認(rèn)的視口是布局視口
瀏覽器可視區(qū)域的大小是視覺視口
完美適配移動設(shè)備的視口是理想視口
2.vw就是相對于視口的寬度，而不是父元素的寬
vw,1vw = 1%的視口寬度
vh,1vh = 1%的視口高度
vmin,選取vw和vh中的較小值
vmax,選取vw和vh中的較大值
11. 談?wù)勀闶侨绾巫鲆苿佣诉m配的
1.meta viewport的使用(字體)
為什么移動端初始視口默認(rèn)都是980像素呢片挂？原因是市面上絕大多數(shù)pc網(wǎng)頁的版心寬度為980像素幻林，如果網(wǎng)頁沒有專門做移動端適配贞盯，此時用手機訪問網(wǎng)頁旁邊剛好沒有留白，不過頁面縮放后文字會變得非常小沪饺。 為了解決頁面縮放的體驗問題躏敢，在網(wǎng)頁代碼的頭部，加入一行viewport元標(biāo)簽整葡。
<meta name="viewport" content="width=device-width, initial-scale=1">?這里的device-width告訴瀏覽器件余，將視口的寬度設(shè)置為設(shè)備寬度（這個寬度是人為預(yù)設(shè)的，不設(shè)的話就是980px）遭居。
2.圖片適配
通常對圖片的處理時是這樣的img { width: 100%;},但是這樣的話蛾扇，當(dāng)容器大于圖片寬度時，圖片會無情的拉伸變形魏滚，一些圖片會失真 解決方案:
img { max-width: 100%; }
此時圖片會自動縮放镀首，同時圖片最大顯示為其自身的100%（即最大只可以顯示為自身那么大）
3.媒體查詢（模塊)
1.什么是媒體查詢 針對不用的設(shè)備提前為網(wǎng)頁設(shè)定各種 CSS 樣式.利用CSS3中的Media Query模塊，自動檢測屏幕寬度鼠次，然后加載相應(yīng)的CSS文件
2.例子
@media screen and (min-width:1200px){
? ? ? ? body{? ? ? ?
? ? ? ? ? ? background-color: red;
? ? ? ? }
4.動態(tài) rem 方案(整體)
讓1rem = 100px更哄；方便其他元素尺寸轉(zhuǎn)換
根據(jù)設(shè)計稿寬度尺寸給html根元素的font-size設(shè)置大小:calc(100vw/7.5);假設(shè)設(shè)計稿是750px的
1vw = 7.5px 100vw = 750px
1rem =100px =100vw/7.5 px
通常和媒體查詢配合，實現(xiàn)響應(yīng)式布局 如果我們做的H5頁面只在移動端訪問腥寇，這是因為REM不兼容低版本的瀏覽器成翩。而如果移動端和PC端公用一套代碼，建議使用流式布局（百分比布局)
12.移動端1像素邊框方案
當(dāng)設(shè)計稿的邊框為1px
1.為什么會有這個問題赦役？
設(shè)備像素也被稱之為物理像素麻敌，不同設(shè)備自帶不同像素。邏輯像素指的是css中記錄的像素掂摔，也就是css像素术羔。因為移動端布局，根據(jù)不同的手機會有不同的dpr乙漓，設(shè)備獨立像素比= 物理像素/邏輯像素
iphone6 = 2级历，iPhone X = 3，當(dāng)邏輯像素=1叭披，在6和x中顯示的就是2px和3px寥殖。所以說，因為dpr大于1涩蜘，所以在手機上顯示的要更粗一些嚼贡。
2.解決方案
1.媒體查詢 非高清屏設(shè)置1px沒有問題，如果在高清屏同诫，比如說dpr=2粤策，則設(shè)置邊框為0.5px。
2.css3縮放（更常用) 偽元素選擇器剩辟，height:1px;用媒體查詢掐场，當(dāng)dpr=2往扔，通過transform:scaleY(.5).如果是3，transform: scaleY(0.333333);
13.bootstrap如何實現(xiàn)響應(yīng)式布局
1.將一個頁面分為12個格子區(qū)域熊户，根據(jù)終端設(shè)備不同的寬度來設(shè)定模塊內(nèi)容所占格子區(qū)域的大小或者多少來最終決定模塊所占空間的實際大小萍膛。
2.將模塊分為container容器>row行>column列三個概念，
3.設(shè)定終端寬度嚷堡，根據(jù)定義不同終端的寬度蝗罗，來調(diào)整容器行列不同的顯示效果，一般有xs,s,sm,md,lg五種顯示方式蝌戒，分別占1,2,3,4,6列串塑，不同的寬度下，按照列的不同顯示方式最終來實現(xiàn)響應(yīng)式布局
