有哪些經(jīng)典的CSS面試題

有哪些經(jīng)典的CSS面試題？相信很多沒有經(jīng)驗(yàn)的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個(gè)問題。

創(chuàng)新互聯(lián)公司專注于華陰企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站建設(shè),商城網(wǎng)站開發(fā)。華陰網(wǎng)站建設(shè)公司,為華陰等地區(qū)提供建站服務(wù)。全流程按需求定制網(wǎng)站，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)

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屬性是用來控制元素的盒子模型的解析模式，默認(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部分的高寬

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:語義化標(biāo)簽、新增表單類型、新增表單屬性

css：新增選擇器、過渡、轉(zhuǎn)換、動(dòng)畫、媒體查詢

js:canvas繪圖、ES6

（3）、從職能理解H5的開發(fā)

移動(dòng)web的開發(fā)

響應(yīng)式開發(fā)

單頁面應(yīng)用開發(fā)

混合APP開發(fā)

微信小程序

微信公眾號(hào)開發(fā)

H5開發(fā)泛指對H5技術(shù)棧（HTML的提升、css的提升、JavaScript的提升）的綜合使用開發(fā)網(wǎng)頁應(yīng)用程序

4、CSS3有哪些新的特性？

(1)、RGBA和透明度

(2)、background-image、background-origin、background-size、background-repeat

(3)、word-wrap(對長的不可分割的單詞進(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 不顯示對應(yīng)的元素，在文檔布局中不再分配空間（回流+重繪）

visibility：hidden 隱藏對應(yīng)元素，在文檔布局中仍保留原來的空間（重繪）

重繪：當(dāng)render-tree中的一些元素需要更新屬性，而這些屬性只影響元素的外觀、風(fēng)格，而不影響布局，比如是background-color,則就稱為重繪。

回流：當(dāng)頁面中的布局和幾何屬性改變時(shí)就需要回流，比如是：

<1>、添加或刪除可見的DOM元素

<2>、元素位置的改變

<3>、元素尺寸的改變（邊框、尺寸、填充、寬度、高度）

<4>、內(nèi)容的改變（比如文本的改變和圖片大小的改變而引起的計(jì)算值寬度和高度的改變）

<5>、頁面渲染初始化

<6>、瀏覽器窗口尺寸的改變-resize事件發(fā)生時(shí)

回流必將引起重繪，重繪不一定會(huì)引起回流

7、對BFC（塊級格式化上下文block formatting context）的理解？

簡單的來說BFC是一種屬性，這種屬性會(huì)影響著元素的定位以及與其兄弟元素之間的相互作用。

8、如何居中p？如何居中一個(gè)浮動(dòng)元素？如何讓絕對定位的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>絕對定位水平居中

<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（相對定位）不脫離文檔流，參考自身的top、right、bottom、left進(jìn)行定位
absolute（絕對定位）參考其最近的一個(gè)非static的父級元素通過top、right、bottom、left進(jìn)行定位
fixed（固定定位）所固定的參照對象是可視窗口的位置

10、常見的兼容性問題

<1>不同瀏覽器標(biāo)簽?zāi)J(rèn)的padding和margin不一樣，*{padding:0;margin:0}

<2>chorme瀏覽器中文界面下默認(rèn)會(huì)將小于12px的文本強(qiáng)制按照12px顯示，可通過加入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)帶來的問題：

<1>父元素的高度無法被撐開

<2>與浮動(dòng)元素同級的非浮動(dòng)元素（內(nèi)聯(lián)元素）會(huì)跟隨其后

<3>若非第一個(gè)元素浮動(dòng)，則該元素之前的元素也需要浮動(dòng)，否則會(huì)影響頁面顯示的結(jié)構(gòu)。

清除浮動(dòng)的方式：

<1> 父級p定義高度

<2> 最后一個(gè)浮動(dòng)元素后加空p標(biāo)簽，并添加樣式clear：both

<3> 包含浮動(dòng)元素的父標(biāo)簽添加樣式overflow為hidden和auto

<4> 父級定義zoom

看完上述內(nèi)容，你們掌握有哪些經(jīng)典的CSS面試題的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

當(dāng)前題目：有哪些經(jīng)典的CSS面試題
網(wǎng)頁地址：http://muchs.cn/article10/ijoedo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、關(guān)鍵詞優(yōu)化、虛擬主機(jī)、品牌網(wǎng)站制作、面包屑導(dǎo)航、網(wǎng)站設(shè)計(jì)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容