站長(zhǎng)資訊網(wǎng)
1、標(biāo)準(zhǔn)盒模型和低版本IE盒模型（怪異模式）有什么區(qū)別？
標(biāo)準(zhǔn)盒模型：內(nèi)容的寬度（content）+border+padding+margin；
IE低版本盒模型：內(nèi)容的寬度（content+border+padding）+margin；
最主要的區(qū)別在于盒模型的寬度；
-
box-sizing屬性是用來(lái)控制元素的盒子模型的解析模式，默認(rèn)為content-box
-
content-box：w3c標(biāo)準(zhǔn)盒子模型，設(shè)置元素的height/width屬性指的是content部分的高寬
-
border-box：IE傳統(tǒng)盒子模型，設(shè)置元素的height/width屬性指的是border+padding+content部分的高寬
專題推薦：2020年CSS面試題匯總（最新）
2、利用CSS3屬性寫出一個(gè)三角形
<style> p{ width: 0; height: 0; border-top: 40px solid transparent; border-right: 40px solid transparent; border-bottom: 40px solid red; border-left: 40px solid transparent; } </style> </head> <body> <!-- 想要改變?nèi)切蔚姆较蛑恍枰淖僢order屬性值（即tblr） --> <p></p> </body>
3、怎樣理解HTML5？
（1）、在前端領(lǐng)域H5是一個(gè)技術(shù)集合（技術(shù)棧），而不是單純的一個(gè)技術(shù)點(diǎn)，所以不能理解是一個(gè)html的規(guī)范。
（2）、我們可以從html、css、js三個(gè)方面進(jìn)行梳理
html:語(yǔ)義化標(biāo)簽、新增表單類型、新增表單屬性
css：新增選擇器、過(guò)渡、轉(zhuǎn)換、動(dòng)畫、媒體查詢
js:canvas繪圖、ES6
（3）、從職能理解H5的開發(fā)
移動(dòng)web的開發(fā)
響應(yīng)式開發(fā)
單頁(yè)面應(yīng)用開發(fā)
混合APP開發(fā)
微信小程序
微信公眾號(hào)開發(fā)
H5開發(fā)泛指對(duì)H5技術(shù)棧（HTML的提升、css的提升、JavaScript的提升）的綜合使用開發(fā)網(wǎng)頁(yè)應(yīng)用程序
4、CSS3有哪些新的特性？
(1)、RGBA和透明度
(2)、background-image、background-origin、background-size、background-repeat
(3)、word-wrap(對(duì)長(zhǎng)的不可分割的單詞進(jìn)行換行)word-wrap:break-word;
(4)、文字陰影：text-shadow：5px 5px 5px #ccc;（水平陰影，垂直陰影，模糊距離，陰影顏色）
(5)、font-face：自定義自己的字體
(6)、圓角（邊框半徑）：border-radius 屬性用于創(chuàng)建圓角
(7)、盒陰影box-shadow:5px 5px 5px #ccc;
(8)、媒體查詢：定義兩套css，當(dāng)瀏覽器的尺寸變化時(shí)會(huì)采用不同的屬性
5、為什么移動(dòng)端項(xiàng)目要使用box-sizing：border-box?
box-sizing:border-box;可以避免寬度溢出，造成橫向滾動(dòng)條（移動(dòng)端項(xiàng)目都是非固定式寬度）
6、display:none與visibility：hidden的區(qū)別？
display：none 不顯示對(duì)應(yīng)的元素，在文檔布局中不再分配空間（回流+重繪）
visibility：hidden 隱藏對(duì)應(yīng)元素，在文檔布局中仍保留原來(lái)的空間（重繪）
重繪：當(dāng)render-tree中的一些元素需要更新屬性，而這些屬性只影響元素的外觀、風(fēng)格，而不影響布局，比如是background-color,則就稱為重繪。
回流：當(dāng)頁(yè)面中的布局和幾何屬性改變時(shí)就需要回流，比如是：
<1>、添加或刪除可見(jiàn)的DOM元素
<2>、元素位置的改變
<3>、元素尺寸的改變（邊框、尺寸、填充、寬度、高度）
<4>、內(nèi)容的改變（比如文本的改變和圖片大小的改變而引起的計(jì)算值寬度和高度的改變）
<5>、頁(yè)面渲染初始化
<6>、瀏覽器窗口尺寸的改變-resize事件發(fā)生時(shí)
回流必將引起重繪，重繪不一定會(huì)引起回流
7、對(duì)BFC（塊級(jí)格式化上下文block formatting context）的理解？
簡(jiǎn)單的來(lái)說(shuō)BFC是一種屬性，這種屬性會(huì)影響著元素的定位以及與其兄弟元素之間的相互作用。
8、如何居中p？如何居中一個(gè)浮動(dòng)元素？如何讓絕對(duì)定位的p居中？
<1>居中p
<style> p{ width: 200px; height: 200px; margin:0 auto; background-color: pink; } </style> </head> <body> <p></p> </body>
<2>居中一個(gè)浮動(dòng)的元素上下左右居中
<style> p{ width: 200px; height: 200px; background-color: pink; float: left; position: absolute; left: 50%; top: 50%; margin: -100px 0 0 -100px; } </style> </head> <body> <p></p> </body>
<3>絕對(duì)定位水平居中
<style> p{ width: 200px; height: 200px; background-color: pink; position: absolute; left: 0; right: 0; margin: 0 auto; } </style> </head> <body> <p></p> </body>
9、position的值？
-
static（默認(rèn)）：按照正常文檔流進(jìn)行排列
-
relative（相對(duì)定位）不脫離文檔流，參考自身的top、right、bottom、left進(jìn)行定位
-
absolute（絕對(duì)定位）參考其最近的一個(gè)非static的父級(jí)元素通過(guò)top、right、bottom、left進(jìn)行定位
-
fixed（固定定位）所固定的參照對(duì)象是可視窗口的位置
10、常見(jiàn)的兼容性問(wèn)題
<1>不同瀏覽器標(biāo)簽?zāi)J(rèn)的padding和margin不一樣，*{padding:0;margin:0}
<2>chorme瀏覽器中文界面下默認(rèn)會(huì)將小于12px的文本強(qiáng)制按照12px顯示，可通過(guò)加入css屬性-webkit-text-size-adjust:none;
11、為什么會(huì)出現(xiàn)浮動(dòng)和什么時(shí)候需要清除浮動(dòng)？清除浮動(dòng)的方式？
由于浮動(dòng)元素不在文檔流中，所以文檔流的塊框表現(xiàn)得就像浮動(dòng)框不存在一樣。浮動(dòng)元素會(huì)漂浮在文檔流的塊框上。
浮動(dòng)帶來(lái)的問(wèn)題：
<1>父元素的高度無(wú)法被撐開
<2>與浮動(dòng)元素同級(jí)的非浮動(dòng)元素（內(nèi)聯(lián)元素）會(huì)跟隨其后
<3>若非第一個(gè)元素浮動(dòng)，則該元素之前的元素也需要浮動(dòng)，否則會(huì)影響頁(yè)面顯示的結(jié)構(gòu)。
清除浮動(dòng)的方式：
<1> 父級(jí)p定義高度
<2> 最后一個(gè)浮動(dòng)元素后加空p標(biāo)簽，并添加樣式clear：both
<3> 包含浮動(dòng)元素的父標(biāo)簽添加樣式overflow為hidden和auto
<4> 父級(jí)定義zoom
相關(guān)教程推薦：CSS視頻教程
