WEB前端面試題匯總（CSS）

qpwoeiru96 發(fā)布于2019-08-29 12:39 / 2110人閱讀

摘要：默認(rèn)值，沒有定位，元素出現(xiàn)在正常的文檔流中。生成粘性定位的元素，容器的位置根據(jù)正常文檔流計(jì)算得出。和屬性的異同共同點(diǎn)對(duì)內(nèi)聯(lián)元素設(shè)置和屬性，可以讓元素脫離文檔流，并且可以設(shè)置其寬高。

position的值， relative和absolute分別是相對(duì)于誰進(jìn)行定位的？

<1>、relative:相對(duì)定位，相對(duì)于自己本身在正常文檔流中的位置進(jìn)行定位。
<2>、absolute:生成絕對(duì)定位，相對(duì)于最近一級(jí)定位不為static的父元素進(jìn)行定位。
<3>、fixed: 生成絕對(duì)定位，相對(duì)于瀏覽器窗口或者frame進(jìn)行定位。
<4>、static:默認(rèn)值，沒有定位，元素出現(xiàn)在正常的文檔流中。
<5>、sticky:生成粘性定位的元素，容器的位置根據(jù)正常文檔流計(jì)算得出。

position:absolute和float屬性的異同？

共同點(diǎn)：對(duì)內(nèi)聯(lián)元素設(shè)置float和absolute屬性，可以讓元素脫離文檔流，并且可以設(shè)置其寬高。
不同點(diǎn)：float仍可占據(jù)位置，不會(huì)覆蓋在另一個(gè)BFC區(qū)域上，浮動(dòng)的框可以向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹?。absolute會(huì)覆蓋文檔流中的其他元素。

box-sizing屬性有哪些？

box-sizing屬性主要用來控制元素的盒模型的解析模式。默認(rèn)值是content-box;
<1>、content-box：讓元素維持W3C的標(biāo)準(zhǔn)盒模型。元素的寬度/高度由border+padding+content的寬度/高度決定，設(shè)置width/height屬性指的是content部分的寬/高。
<2>、border-box：讓元素維持IE傳統(tǒng)盒模型（IE6以下版本和IE6~7的怪異模式）。設(shè)置width/height屬性指的是border+padding+content的寬度/高度。
<3>、padding-box：設(shè)置width/height屬性指的是padding+content的寬度/高度。

標(biāo)準(zhǔn)瀏覽器下，按照W3C規(guī)范對(duì)盒模型解析，一旦修改了元素的邊框或邊距，就會(huì)影響元素的盒子尺寸，就不得不重新計(jì)算元素的盒子尺寸，從而影響整個(gè)頁面的布局。

CSS 選擇符有哪些？哪些屬性可以繼承？?jī)?yōu)先級(jí)算法如何計(jì)算？ CSS3新增偽類有那些？

選擇符：
<1>、id選擇器（#myId）;
<2>、類選擇器（.myClassName）;
<3>、標(biāo)簽選擇器（div,p,h1）;
<4>、相鄰選擇器（h1 + p）;
<5>、子選擇器（ul > li）;
<6>、后代選擇器（li a）;
<7>、通配符選擇器（*）;
<8>、屬性選擇器（button[disabled="true"]）;
<9>、偽類選擇器（a:hover,li:nth-child）;表示一種狀態(tài)
<10>、偽元素選擇器（li:before、:after,:first-letter,:first-line,:selecton）;表示文檔某個(gè)部分的表現(xiàn)

優(yōu)先級(jí)：
!important > 行內(nèi)樣式（比重1000） > id（比重100） > class/屬性（比重10） > tag / 偽類（比重1）;

偽類和偽元素區(qū)別：
1>、偽類：a:hover,li:nth-child；
2>、偽元素：li:before、:after,:first-letter,:first-line,:selecton;

偽元素和偽類都是選擇器的補(bǔ)充，偽類表示的是一種狀態(tài)，偽元素表示文檔的某個(gè)確定部分的表現(xiàn)。
偽元素選擇器選擇出來的部分不再dom里，也不能對(duì)其綁定事件，但是如果對(duì)偽元素前面的選擇器定義的元素綁定了事件，偽元素同樣會(huì)生效。

新增偽類
1>、li:first-of-type:選擇屬于其父元素的首個(gè)

元素；
2>、li:last-of-type:選擇屬于其父元素的最后一個(gè)

元素；
3>、li:only-of-type:選擇屬于其父元素的唯一一個(gè)

元素；
4>、li:only-child:選擇屬于其父元素的唯一子元素；
6>、li:nth-child(2):選擇屬于其父元素的第二個(gè)

元素；
7>、:enabled :disabled:選擇表單控件的禁用狀態(tài)；
8>、:checked:單選或復(fù)選框被選中狀態(tài)；

對(duì)BFC規(guī)范的理解？

BFC定義：塊級(jí)格式化上下文，一個(gè)創(chuàng)建了新的BFC的盒子是獨(dú)立布局的，盒子里面的子元素的樣式不會(huì)影響到外面的元素。在同一個(gè)BFC中的兩個(gè)相鄰的塊級(jí)盒在垂直方向的margin會(huì)發(fā)生折疊。

BFC布局規(guī)則：
1>、內(nèi)部的box會(huì)在垂直方向，一個(gè)接一個(gè)的放置。
2>、box的垂直方向的距離有margin決定。屬于同一個(gè)BFC的兩個(gè)相鄰box的margin會(huì)發(fā)生重疊。
3>、每個(gè)元素的margin box的左邊，與包含塊border box的左邊相接觸(對(duì)于從左往右的格式化，否則相反)，即使存在浮動(dòng)也是如此，除非這個(gè)盒子創(chuàng)建一個(gè)新的塊級(jí)格式化上下文。
4>、BFC的區(qū)域不會(huì)與float box重疊。
5>、BFC就是頁面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素。反之也是如此。
6>、計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算。

哪些元素會(huì)產(chǎn)生BFC：
1>、根元素；
2>、float屬性不為none；
3>、position為absolute或fixed；
4>、display為inline-block，table-cell，table-caption，flex，inline-flex；
5>、overflow除了visible以外的值（hidden、auto、scroll）;
6>、fieldset元素

運(yùn)用BFC：
1>、解決margin重疊問題：根據(jù)BFC布局原則2，在元素外側(cè)包裹一層容器，并觸發(fā)該容器生成一個(gè)BFC，那么兩個(gè)元素就不在同一個(gè)BFC,就不會(huì)發(fā)生margin重疊。

Haha

Hehe

2>、自適應(yīng)兩欄布局：

根據(jù)BFC布局規(guī)則第3條：即使存在浮動(dòng)的元素aslide，但main的左邊依然會(huì)與包含塊的左邊相接觸。
解決：根據(jù)BFC布局規(guī)則第4條，我們可以通過通過觸發(fā)main生成BFC，來實(shí)現(xiàn)自適應(yīng)兩欄布局。

.main {
    overflow: hidden;
}

當(dāng)觸發(fā)main生成BFC后，這個(gè)新的BFC不會(huì)與浮動(dòng)的aside重疊。因此會(huì)根據(jù)包含塊的寬度，和aside的寬度，自動(dòng)變窄。效果如下：

3>、清除內(nèi)部浮動(dòng)：

根據(jù)BFC布局規(guī)則第6條：計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算，為達(dá)到清除內(nèi)部浮動(dòng)，我們可以觸發(fā)par生成BFC，那么par在計(jì)算高度時(shí)，par內(nèi)部的浮動(dòng)元素child也會(huì)參與計(jì)算。

.par {
    overflow: hidden;
}

解釋下浮動(dòng)和它的工作原理？清除浮動(dòng)的技巧：

原理：任何元素都可以被浮動(dòng)，浮動(dòng)元素脫離文檔流，浮動(dòng)的框可以向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂?br>浮動(dòng)引起的問題：
1>、父元素的高度無法被撐開，影響與父元素同級(jí)的元素；
2>、與浮動(dòng)元素同級(jí)的非浮動(dòng)元素（內(nèi)聯(lián)元素）會(huì)跟隨其后；
3>、若非第一個(gè)元素浮動(dòng)，則該元素之前的元素也需要浮動(dòng)，否則會(huì)影響頁面顯示的結(jié)構(gòu)；

清除浮動(dòng)：
1>、使用空標(biāo)簽清除浮動(dòng)：
這種方法是在所有浮動(dòng)標(biāo)簽后面添加一個(gè)空標(biāo)簽

. 弊端就是增加了無意義標(biāo)簽。
2>、使用after偽類：

#parent:after{
    content:".";
    height:0;
    visibility:hidden;
    display:block;
    clear:both;
}

3>、浮動(dòng)外部元素；
4>、設(shè)置父元素overflow為hidden或者auto，觸發(fā)父元素BFC；

常見兼容性問題

1>、png24位的圖片在ie6瀏覽器上出現(xiàn)背景，解決方案是做成png8，也可以引用一段腳本處理。
2>、瀏覽器默認(rèn)的margin和padding不同。解決方案：加一個(gè)全局的*{margin：0；padding：0}。
3>、ie6雙邊距bug（20px距離）：塊屬性標(biāo)簽float后，又有橫行的margin情況下，在ie6顯示margin值比設(shè)置的大。解決方案：在float標(biāo)簽樣式控制中加入_display:inline;將其轉(zhuǎn)化為行內(nèi)屬性。(_這個(gè)符號(hào)只有ie6會(huì)識(shí)別)。
4>、漸進(jìn)識(shí)別方式，從總體中逐步排除局部：
首先，巧妙的使用“9”這一標(biāo)記，將IE瀏覽器從所有情況中分離出來。
接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經(jīng)獨(dú)立識(shí)別。

  .bb{
       background-color:#f1ee18;/*所有識(shí)別*/
      .background-color:#00deff9; /*IE6、7、8識(shí)別*/
      +background-color:#a200ff;/*IE6、7識(shí)別*/
      _background-color:#1e0bd1;/*IE6識(shí)別*/
  }

待續(xù)....2015.5.29

云服務(wù)器 GPU云服務(wù)器 web前端開發(fā)工程師面試面試題棧面試題筆試面試題

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/112048.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

qpwoeiru96

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

這篇博客和你嘮嘮 python 并發(fā)，滾雪球?qū)Wpython第四季，第16篇

閱讀 1100·2021-10-11 10:59
程序員的自我修養(yǎng)—精華（elf文件、虛擬內(nèi)存）

閱讀 3685·2021-09-26 09:55
CSS選擇器

閱讀 945·2019-08-30 15:55
微信小程序文檔沒寫支持, 但是實(shí)際支持的選擇器有哪些?

閱讀 2711·2019-08-30 15:44
Css Secret 案例全套

閱讀 486·2019-08-30 14:06
講清楚基礎(chǔ)系列——css布局

閱讀 773·2019-08-30 11:26
圣杯布局和雙飛翼布局的理解與思考

閱讀 3403·2019-08-30 10:49
HTML5 CANVAS 彈幕插件--DanMuer.js（V3.2.5）

閱讀 2618·2019-08-29 12:53

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！

WEB前端面試題匯總（CSS）

相關(guān)文章

前端資源系列（4）-前端學(xué)習(xí)資源分享&前端面試資源匯總

前端最強(qiáng)面經(jīng)匯總

前端面試每日3+1（周匯總2019.08.25）

前端面試每日3+1（周匯總2019.08.25）

2019前端面試題匯總（主要為Vue）

發(fā)表評(píng)論

0條評(píng)論

qpwoeiru96

男|高級(jí)講師

TA的文章

這篇博客和你嘮嘮 python 并發(fā)，滾雪球?qū)Wpython第四季，第16篇

程序員的自我修養(yǎng)—精華（elf文件、虛擬內(nèi)存）

CSS選擇器

微信小程序文檔沒寫支持, 但是實(shí)際支持的選擇器有哪些?

Css Secret 案例全套

講清楚基礎(chǔ)系列——css布局

圣杯布局和雙飛翼布局的理解與思考

HTML5 CANVAS 彈幕插件--DanMuer.js（V3.2.5）

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！

WEB前端面試題匯總（CSS）

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！