時間：2023-09-18 09:36:02 | 來源：網(wǎng)站運(yùn)營
時間：2023-09-18 09:36:02 來源：網(wǎng)站運(yùn)營
【面試題】前端css經(jīng)典面試題 50道：
在線咨詢
標(biāo)準(zhǔn)盒子模型：寬度=內(nèi)容的寬度（content）+ border + padding + margin低版本IE盒子模型：寬度=內(nèi)容寬度（content+border+padding）+ margin用來控制元素的盒子模型的解析模式，默認(rèn)為content-boxcontext-box：W3C的標(biāo)準(zhǔn)盒子模型，設(shè)置元素的 height/width 屬性指的是content部分的高/寬border-box：IE傳統(tǒng)盒子模型。設(shè)置元素的height/width屬性指的是border + padding + content部分的高/寬CSS選擇符：id選擇器(#myid)、類選擇器(.myclassname)、標(biāo)簽選擇器(div, h1, p)、相鄰選擇器(h1 + p)、子選擇器（ul > li）、后代選擇器（li a）、通配符選擇器（*）、屬性選擇器（a[rel="external"]）、偽類選擇器（a:hover, li:nth-child）可繼承的屬性：font-size, font-family, color不可繼承的樣式：border, padding, margin, width, height優(yōu)先級（就近原則）：!important > [ id > class > tag ]!important 比內(nèi)聯(lián)優(yōu)先級高元素選擇符： 1class選擇符： 10id選擇符：100元素標(biāo)簽：1000!important聲明的樣式優(yōu)先級最高，如果沖突再進(jìn)行計(jì)算。如果優(yōu)先級相同，則選擇最后出現(xiàn)的樣式。繼承得到的樣式的優(yōu)先級最低。 p:first-of-type 選擇屬于其父元素的首個元素 p:last-of-type 選擇屬于其父元素的最后元素 p:only-of-type 選擇屬于其父元素唯一的元素 p:only-child 選擇屬于其父元素的唯一子元素 p:nth-child(2) 選擇屬于其父元素的第二個子元素:enabled :disabled 表單控件的禁用狀態(tài)。:checked 單選框或復(fù)選框被選中。border: 1px solid red;margin: 0 auto;height: 50px;width: 80px;border: 1px solid red;float: left;position: absolute;width: 200px;height: 100px;left: 50%;top: 50%;margin: -50px 0 0 -100px;border: 1px solid black;position: absolute;width: 200px;height: 100px;margin: 0 auto;left: 0;right: 0; inline（默認(rèn)）--內(nèi)聯(lián) none 隱藏 block--塊顯示 table--表格顯示 list-item--項(xiàng)目列表 inline-block static（默認(rèn)）：按照正常文檔流進(jìn)行排列； relative（相對定位）：不脫離文檔流，參考自身靜態(tài)位置通過 top, bottom, left, right 定位； absolute(絕對定位)：參考距其最近一個不為static的父級元素通過top, bottom, left, right 定位； fixed(固定定位)：所固定的參照對像是可視窗口。background-image background-origin(content-box/padding-box/border-box) background-size background-repeatword-wrap（對長的不可分割單詞換行）word-wrap：break-word文字陰影：text-shadow： 5px 5px 5px #FF0000;（水平陰影，垂直陰影，模糊距離，陰影顏色）font-face屬性：定義自己的字體圓角（邊框半徑）：border-radius 屬性用于創(chuàng)建圓角邊框圖片：border-image: url(border.png) 30 30 round盒陰影：box-shadow: 10px 10px 5px #888888媒體查詢：定義兩套css，當(dāng)瀏覽器的尺寸變化時會采用不同的屬性該布局模型的目的是提供一種更加高效的方式來對容器中的條目進(jìn)行布局、對齊和分配空間。在傳統(tǒng)的布局方式中，block 布局是把塊在垂直方向從上到下依次排列的；而 inline 布局則是在水平方向來排列。彈性盒布局并沒有這樣內(nèi)在的方向限制，可以由開發(fā)人員自由操作。試用場景：彈性布局適合于移動前端開發(fā)，在Android和ios上也完美支持。width: 0;height: 0;border-top: 40px solid transparent;border-left: 40px solid transparent;border-right: 40px solid transparent;border-bottom: 40px solid #ff0000;第一種真正的品字：三塊高寬是確定的；上面那塊用margin: 0 auto;居中；下面兩塊用float或者inline-block不換行；用margin調(diào)整位置使他們居中。第二種全屏的品字布局:上面的div設(shè)置成100%，下面的div分別寬50%，然后使用float或者inline使其不換行。不同瀏覽器的標(biāo)簽?zāi)J(rèn)的margin和padding不一樣。{margin:0;padding:0;}IE6雙邊距bug：塊屬性標(biāo)簽float后，又有橫行的margin情況下，在IE6顯示margin比設(shè)置的大。hack：display:inline;將其轉(zhuǎn)化為行內(nèi)屬性。漸進(jìn)識別的方式，從總體中逐漸排除局部。首先，巧妙的使用“9”這一標(biāo)記，將IE瀏覽器從所有情況中分離出來。接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經(jīng)獨(dú)立識別。{background-color:#f1ee18;/所有識別/.background-color:#00deff/9; /IE6、7、8識別/+background-color:#a200ff;/IE6、7識別/_background-color:#1e0bd1;/IE6識別*/}設(shè)置較小高度標(biāo)簽（一般小于10px），在IE6，IE7中高度超出自己設(shè)置高度。hack：給超出高度的標(biāo)簽設(shè)置overflow:hidden;或者設(shè)置行高line-height 小于你設(shè)置的高度。IE下，可以使用獲取常規(guī)屬性的方法來獲取自定義屬性,也可以使用getAttribute()獲取自定義屬性；Firefox下，只能使用getAttribute()獲取自定義屬性。解決方法:統(tǒng)一通過getAttribute()獲取自定義屬性。Chrome 中文界面下默認(rèn)會將小于 12px 的文本強(qiáng)制按照 12px 顯示,可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決。超鏈接訪問過后hover樣式就不出現(xiàn)了，被點(diǎn)擊訪問過的超鏈接樣式不再具有hover和active了。解決方法是改變CSS屬性的排列順序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}因?yàn)闉g覽器的兼容問題，不同瀏覽器對有些標(biāo)簽的默認(rèn)值是不同的，如果沒對CSS初始化往往會出現(xiàn)瀏覽器之間的頁面顯示差異。無論屬于哪種，都要先找到其祖先元素中最近的 position 值不為 static 的元素，然后再判斷：若此元素為 inline 元素，則 containing block 為能夠包含這個元素生成的第一個和最后一個 inline box 的 padding box (除 margin, border 外的區(qū)域) 的最小矩形；否則,則由這個祖先元素的 padding box 構(gòu)成。如果都找不到，則為 initial containing block。補(bǔ)充：static(默認(rèn)的)/relative：簡單說就是它的父元素的內(nèi)容框（即去掉padding的部分）absolute: 向上找最近的定位為absolute/relative的元素fixed: 它的containing block一律為根元素(html/body)當(dāng)一個元素的visibility屬性被設(shè)置成collapse值后，對于一般的元素，它的表現(xiàn)跟hidden是一樣的。chrome中，使用collapse值和使用hidden沒有區(qū)別。firefox，opera和IE，使用collapse值和使用display：none沒有什么區(qū)別。display：none 不顯示對應(yīng)的元素，在文檔布局中不再分配空間（回流+重繪）visibility：hidden 隱藏對應(yīng)元素，在文檔布局中仍保留原來的空間（重繪）display屬性規(guī)定元素應(yīng)該生成的框的類型；position屬性規(guī)定元素的定位類型；float屬性是一種布局方式，定義元素在哪個方向浮動。類似于優(yōu)先級機(jī)制：position：absolute/fixed優(yōu)先級最高，有他們在時，float不起作用，display值需要調(diào)整。float 或者absolute定位的元素，只能是塊元素或表格。BFC規(guī)定了內(nèi)部的Block Box如何布局。定位方案：內(nèi)部的Box會在垂直方向上一個接一個放置。Box垂直方向的距離由margin決定，屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊。每個元素的margin box 的左邊，與包含塊border box的左邊相接觸。BFC的區(qū)域不會與float box重疊。BFC是頁面上的一個隔離的獨(dú)立容器，容器里面的子元素不會影響到外面的元素。計(jì)算BFC的高度時，浮動元素也會參與計(jì)算。滿足下列條件之一就可觸發(fā)BFC根元素，即htmlfloat的值不為none（默認(rèn)）overflow的值不為visible（默認(rèn)）display的值為inline-block、table-cell、table-captionposition的值為absolute或fixed浮動元素碰到包含它的邊框或者浮動元素的邊框停留。由于浮動元素不在文檔流中，所以文檔流的塊框表現(xiàn)得就像浮動框不存在一樣。浮動元素會漂浮在文檔流的塊框上。浮動帶來的問題：父元素的高度無法被撐開，影響與父元素同級的元素與浮動元素同級的非浮動元素（內(nèi)聯(lián)元素）會跟隨其后若非第一個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結(jié)構(gòu)。清除浮動的方式：父級div定義height最后一個浮動元素后加空div標(biāo)簽 并添加樣式clear:both。包含浮動元素的父標(biāo)簽添加樣式overflow為hidden或auto。父級div定義zoom<div class="aside"></div><div class="text"><div class="main"></div></div>.aside {margin-bottom: 100px;width: 100px;height: 150px;background: #f66;}.main {margin-top: 100px;height: 200px;background: #fcc;}.text{//盒子main的外面包一個div，通過改變此div的屬性使兩個盒子分屬于兩個不同的BFC，以此來阻止margin重疊overflow: hidden; //此時已經(jīng)觸發(fā)了BFC屬性。}自動變成display:block通過媒體查詢可以為不同大小和尺寸的媒體定義不同的css，適應(yīng)相應(yīng)的設(shè)備的顯示。<head>里邊<link rel="stylesheet" type="text/css" href="xxx.css" media="only screen and (max-device-width:480px)">CSS : @media only screen and (max-device-width:480px) {/css樣式/}Less sass避免過度約束避免后代選擇符避免鏈?zhǔn)竭x擇符使用緊湊的語法避免不必要的命名空間避免不必要的重復(fù)最好使用表示語義的名字。一個好的類名應(yīng)該是描述他是什么而不是像什么避免！important，可以選擇其他選擇器盡可能的精簡規(guī)則，你可以合并不同類里的重復(fù)規(guī)則CSS選擇器的解析是從右向左解析的。若從左向右的匹配，發(fā)現(xiàn)不符合規(guī)則，需要進(jìn)行回溯，會損失很多性能。若從右向左匹配，先找到所有的最右節(jié)點(diǎn)，對于每一個節(jié)點(diǎn)，向上尋找其父節(jié)點(diǎn)直到找到根元素或滿足條件的匹配規(guī)則，則結(jié)束這個分支的遍歷。兩種匹配規(guī)則的性能差別很大，是因?yàn)閺挠蚁蜃蟮钠ヅ湓诘谝徊骄秃Y選掉了大量的不符合條件的最右節(jié)點(diǎn)（葉子節(jié)點(diǎn)），而從左向右的匹配規(guī)則的性能都浪費(fèi)在了失敗的查找上面。而在 CSS 解析完畢后，需要將解析的結(jié)果與 DOM Tree 的內(nèi)容一起進(jìn)行分析建立一棵 Render Tree，最終用來進(jìn)行繪圖。在建立 Render Tree 時（WebKit 中的「Attachment」過程），瀏覽器就要為每個 DOM Tree 中的元素根據(jù) CSS 的解析結(jié)果（Style Rules）來確定生成怎樣的 Render Tree。使用偶數(shù)字體。偶數(shù)字號相對更容易和 web 設(shè)計(jì)的其他部分構(gòu)成比例關(guān)系。Windows 自帶的點(diǎn)陣宋體（中易宋體）從 Vista 開始只提供 12、14、16 px 這三個大小的點(diǎn)陣，而 13、15、17 px時用的是小一號的點(diǎn)。（即每個字占的空間大了 1 px，但點(diǎn)陣沒變），于是略顯稀疏。何時使用margin：需要在border外側(cè)添加空白空白處不需要背景色上下相連的兩個盒子之間的空白，需要相互抵消時。何時使用padding：需要在border內(nèi)側(cè)添加空白空白處需要背景顏色上下相連的兩個盒子的空白，希望為兩者之和。兼容性的問題：在IE5 IE6中，為float的盒子指定margin時，左側(cè)的margin可能會變成兩倍的寬度。通過改變padding或者指定盒子的display：inline解決。當(dāng)按百分比設(shè)定一個元素的寬度時，它是相對于父容器的寬度計(jì)算的，但是，對于一些表示豎向距離的屬性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，當(dāng)按百分比設(shè)定它們時，依據(jù)的也是父容器的寬度，而不是高度。原理：有點(diǎn)類似于輪播，整體的元素一直排列下去，假設(shè)有5個需要展示的全屏頁面，那么高度是500%，只是展示100%，剩下的可以通過transform進(jìn)行y軸定位，也可以通過margin-top實(shí)現(xiàn) overflow：hidden； transition：all 1000ms ease；響應(yīng)式網(wǎng)站設(shè)計(jì)(Responsive Web design)是一個網(wǎng)站能夠兼容多個終端，而不是為每一個終端做一個特定的版本。基本原理是通過媒體查詢檢測不同的設(shè)備屏幕尺寸做處理。頁面頭部必須有meta聲明的viewport。```scss<meta name=’viewport’ content=”width=device-width, initial-scale=1. maximum-scale=1,user-scalable=no”>視差滾動（Parallax Scrolling）通過在網(wǎng)頁向下滾動的時候，控制背景的移動速度比前景的移動速度慢來創(chuàng)建出令人驚嘆的3D效果。CSS3實(shí)現(xiàn)優(yōu)點(diǎn)：開發(fā)時間短、性能和開發(fā)效率比較好，缺點(diǎn)是不能兼容到低版本的瀏覽器jQuery實(shí)現(xiàn)通過控制不同層滾動速度，計(jì)算每一層的時間，控制滾動效果。優(yōu)點(diǎn)：能兼容到各個版本的，效果可控性好缺點(diǎn)：開發(fā)起來對制作者要求高插件實(shí)現(xiàn)方式例如：parallax-scrolling，兼容性十分好單冒號(:)用于CSS3偽類，雙冒號(::)用于CSS3偽元素。::before就是以一個子元素的存在，定義在元素主體內(nèi)容之前的一個偽元素。并不存在于dom之中，只存在在頁面之中。:before 和 :after 這兩個偽元素，是在CSS2.1里新出現(xiàn)的。起初，偽元素的前綴使用的是單冒號語法，但隨著Web的進(jìn)化，在CSS3的規(guī)范里，偽元素的語法被修改成使用雙冒號，成為::before ::after行高是指一行文字的高度，具體說是兩行文字間基線的距離。CSS中起高度作用的是height和line-height，沒有定義height屬性，最終其表現(xiàn)作用一定是line-height。單行文本垂直居中：把line-height值設(shè)置為height一樣大小的值可以實(shí)現(xiàn)單行文字的垂直居中，其實(shí)也可以把height刪除。多行文本垂直居中：需要設(shè)置display屬性為inline-block。 p{font-size:10px;-webkit-transform:scale(0.8);} //0.8是縮放比例-webkit-font-smoothing在window系統(tǒng)下沒有起作用，但是在IOS設(shè)備上起作用-webkit-font-smoothing：antialiased是最佳的，灰度平滑。<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>多數(shù)顯示器默認(rèn)頻率是60Hz，即1秒刷新60次，所以理論上最小間隔為1/60＊1000ms ＝ 16.7ms。行框的排列會受到中間空白（回車空格）等的影響，因?yàn)榭崭褚矊儆谧址?這些空白也會被應(yīng)用樣式，占據(jù)空間，所以會有間隔，把字符大小設(shè)為0，就沒有空格了。解決方法：可以將<li>代碼全部寫在一排浮動li中float：left在ul中用font-size：0（谷歌不支持）；可以使用letter-space：-3px有空格時候會有間隙 解決：移除空格margin正值的時候 解決：margin使用負(fù)值使用font-size時候 解決：font-size:0、letter-spacing、word-spacing外層div使用position：relative；高度要求自適應(yīng)的div使用position: absolute; top: 100px; bottom: 0; left: 0png是便攜式網(wǎng)絡(luò)圖片（Portable Network Graphics）是一種無損數(shù)據(jù)壓縮位圖文件格式.優(yōu)點(diǎn)是：壓縮比高，色彩好。 大多數(shù)地方都可以用。jpg是一種針對相片使用的一種失真壓縮方法，是一種破壞性的壓縮，在色調(diào)及顏色平滑變化做的不錯。在www上，被用來儲存和傳輸照片的格式。gif是一種位圖文件格式，以8位色重現(xiàn)真色彩的圖像。可以實(shí)現(xiàn)動畫效果.webp格式是谷歌在2010年推出的圖片格式，壓縮率只有jpg的2/3，大小比png小了45%。缺點(diǎn)是壓縮的時間更久了，兼容性不好，目前谷歌和opera支持頁面加載自上而下 當(dāng)然是先加載樣式。寫在body標(biāo)簽后由于瀏覽器以逐行方式對HTML文檔進(jìn)行解析，當(dāng)解析到寫在尾部的樣式表（外聯(lián)或?qū)懺趕tyle標(biāo)簽）會導(dǎo)致瀏覽器停止之前的渲染，等待加載且解析樣式表完成之后重新渲染，在windows的IE下可能會出現(xiàn)FOUC現(xiàn)象（即樣式失效導(dǎo)致的頁面閃爍問題） 參數(shù)是scroll時候，必會出現(xiàn)滾動條。 參數(shù)是auto時候，子元素內(nèi)容大于父元素時出現(xiàn)滾動條。 參數(shù)是visible時候，溢出的內(nèi)容出現(xiàn)在父元素之外。 參數(shù)是hidden時候，溢出隱藏。將一個頁面涉及到的所有圖片都包含到一張大圖中去，然后利用CSS的 background-image，background- repeat，background-position 的組合進(jìn)行背景定位。利用CSS Sprites能很好地減少網(wǎng)頁的http請求，從而大大的提高頁面的性能；CSS Sprites能減少圖片的字節(jié)。關(guān)鍵詞：試題,經(jīng)典
客戶&案例
營銷資訊
關(guān)于我們
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
