常見的一些CSS基礎(chǔ)知識題

時間：2022-05-29 14:48:01 | 來源：網(wǎng)絡(luò)營銷

時間：2022-05-29 14:48:01 來源：網(wǎng)絡(luò)營銷

CSS 指層疊樣式表(Cascading Style Sheets)，是一種用來表現(xiàn) HTML 文檔樣式的語言，樣式定義如何顯示 HTML 元素，是能夠真正做到網(wǎng)頁表現(xiàn)與結(jié)構(gòu)分離的一種樣式設(shè)計語言。樣式通常存儲在樣式表中，外部樣式表通常存儲在 CSS 文件中，多個樣式定義可層疊為一。

HTML 標(biāo)簽被設(shè)計為用于定義文檔內(nèi)容，也就是文檔結(jié)構(gòu)，為了增強(qiáng)代碼的可讀性，實現(xiàn)網(wǎng)頁結(jié)構(gòu)與表現(xiàn)相分離的原則，萬維網(wǎng)聯(lián)盟（W3C），肩負(fù)起了 HTML 標(biāo)準(zhǔn)化的使命，并在 HTML4 之外創(chuàng)造出樣式（Style）。

CSS 目前最新版本是 CSS3，相對于傳統(tǒng) HTML 的表現(xiàn)而言，CSS 能夠?qū)W(wǎng)頁中對象的位置排版進(jìn)行像素級的精確控制，擁有對網(wǎng)頁對象編輯的能力，易于維護(hù)和改版，提高頁面瀏覽速度，使用 CSS 布局頁面更符合 W3C 標(biāo)準(zhǔn)，他是目前基于文本展示最優(yōu)秀的表現(xiàn)設(shè)計語言。

1、介紹一下標(biāo)準(zhǔn)的CSS的盒子模型？與低版本IE的盒子模型有什么不同的？

標(biāo)準(zhǔn)盒子模型：寬度=內(nèi)容的寬度（content）+ border + padding + margin

低版本IE盒子模型：寬度=內(nèi)容寬度（content+border+padding）+ margin

2、box-sizing屬性？

用來控制元素的盒子模型的解析模式，默認(rèn)為content-box

context-box：W3C的標(biāo)準(zhǔn)盒子模型，設(shè)置元素的 height/width 屬性指的是content部分的高/寬。

border-box：IE傳統(tǒng)盒子模型。設(shè)置元素的height/width屬性指的是border + padding + content部分的高/寬。

3、CSS選擇器有哪些？哪些屬性可以繼承？

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)先級高

4、CSS優(yōu)先級算法如何計算？

元素選擇符： 1

class選擇符： 10

id選擇符：100

元素標(biāo)簽：1000

（1）、!important聲明的樣式優(yōu)先級最高，如果沖突再進(jìn)行計算。

（2）、如果優(yōu)先級相同，則選擇最后出現(xiàn)的樣式。

（3）、繼承得到的樣式的優(yōu)先級最低。

5、CSS3新增偽類有那些?

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ù)選框被選中。

6、如何居中div？如何居中一個浮動元素？如何讓絕對定位的div居中？

div：

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;

還有更加優(yōu)雅的居中方式就是用flexbox，我以后會做整理。

7、display有哪些值？說明他們的作用?

inline（默認(rèn)）--內(nèi)聯(lián)

none--隱藏

block--塊顯示

table--表格顯示

list-item--項目列表

inline-block：將對象呈遞為內(nèi)聯(lián)對象，但是對象的內(nèi)容作為塊對象呈遞。

8、闡述一下position的值？

static（默認(rèn)）：按照正常文檔流進(jìn)行排列；

relative（相對定位）：不脫離文檔流，參考自身靜態(tài)位置通過 top, bottom, left, right 定位；

absolute(絕對定位)：參考距其最近一個不為static的父級元素通過top, bottom, left, right 定位；

fixed(固定定位)：所固定的參照對像是可視窗口。

9、CSS3有哪些新特性？

RGBA和透明度

background-image background-origin(content-box/padding-box/border-box) background-size background-repeat

word-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)瀏覽器的尺寸變化時會采用不同的屬性。

10、請解釋一下CSS3的flexbox（彈性盒布局模型），以及適用場景？

該布局模型的目的是提供一種更加高效的方式來對容器中的條目進(jìn)行布局、對齊和分配空間。在傳統(tǒng)的布局方式中，block 布局是把塊在垂直方向從上到下依次排列的；而 inline 布局則是在水平方向來排列。彈性盒布局并沒有這樣內(nèi)在的方向限制，可以由開發(fā)人員自由操作。

試用場景：彈性布局適合于移動前端開發(fā)，在Android和ios上也完美支持。

11、用純CSS創(chuàng)建一個三角形的原理是什么？

首先，需要把元素的寬度、高度設(shè)為0。然后設(shè)置邊框樣式。

width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;

12、一個滿屏品字布局如何設(shè)計？

第一種真正的品字：

（1）、三塊高寬是確定的；

（2）、上面那塊用margin: 0 auto;居中；

（3）、下面兩塊用float或者inline-block不換行；

（4）、用margin調(diào)整位置使他們居中。

第二種全屏的品字布局：

上面的div設(shè)置成100%，下面的div分別寬50%，然后使用float或者inline使其不換行。

13、常見的兼容性問題？

（1）、不同瀏覽器的標(biāo)簽?zāi)J(rèn)的margin和padding不一樣。

*{margin:0;padding:0;}

（2）、IE6雙邊距bug：塊屬性標(biāo)簽float后，又有橫行的margin情況下，在IE6顯示margin比設(shè)置的大。hack：display:inline;將其轉(zhuǎn)化為行內(nèi)屬性。

（3）、漸進(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識別*/
}

（4）、設(shè)置較小高度標(biāo)簽（一般小于10px），在IE6，IE7中高度超出自己設(shè)置高度。hack：給超出高度的標(biāo)簽設(shè)置overflow:hidden;或者設(shè)置行高line-height 小于你設(shè)置的高度。

（5）、IE下，可以使用獲取常規(guī)屬性的方法來獲取自定義屬性,也可以使用getAttribute()獲取自定義屬性；Firefox下，只能使用getAttribute()獲取自定義屬性。解決方法:統(tǒng)一通過getAttribute()獲取自定義屬性。

（6）、Chrome 中文界面下默認(rèn)會將小于 12px 的文本強(qiáng)制按照 12px 顯示,可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決。

（7）、超鏈接訪問過后hover樣式就不出現(xiàn)了，被點(diǎn)擊訪問過的超鏈接樣式不再具有hover和active了。解決方法是改變CSS屬性的排列順序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}

14、為什么要初始化CSS樣式？

因為瀏覽器的兼容問題，不同瀏覽器對有些標(biāo)簽的默認(rèn)值是不同的，如果沒對CSS初始化往往會出現(xiàn)瀏覽器之間的頁面顯示差異。

15、absolute的containing block計算方式跟正常流有什么不同？

無論屬于哪種，都要先找到其祖先元素中最近的 position 值不為 static 的元素，然后再判斷：

（1）、若此元素為 inline 元素，則 containing block 為能夠包含這個元素生成的第一個和最后一個 inline box 的 padding box (除 margin, border 外的區(qū)域) 的最小矩形；

（2）、否則，則由這個祖先元素的 padding box 構(gòu)成。

如果都找不到，則為 initial containing block。

補(bǔ)充：

（1）、static(默認(rèn)的)/relative：簡單說就是它的父元素的內(nèi)容框（即去掉padding的部分）

（2）、absolute: 向上找最近的定位為absolute/relative的元素

（3）、fixed: 它的containing block一律為根元素(html/body)

16、CSS里的visibility屬性有個collapse屬性值？在不同瀏覽器下以后什么區(qū)別？

當(dāng)一個元素的visibility屬性被設(shè)置成collapse值后，對于一般的元素，它的表現(xiàn)跟hidden是一樣的。

（1）、chrome中，使用collapse值和使用hidden沒有區(qū)別。

（2）、firefox，opera和IE，使用collapse值和使用display：none沒有什么區(qū)別。

17、display:none與visibility：hidden的區(qū)別？

display：none 不顯示對應(yīng)的元素，在文檔布局中不再分配空間（回流+重繪）

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

18、position跟display、overflow、float這些特性相互疊加后會怎么樣？

display屬性規(guī)定元素應(yīng)該生成的框的類型；position屬性規(guī)定元素的定位類型；float屬性是一種布局方式，定義元素在哪個方向浮動。

類似于優(yōu)先級機(jī)制：position：absolute/fixed優(yōu)先級最高，有他們在時，float不起作用，display值需要調(diào)整。float 或者absolute定位的元素，只能是塊元素或表格。

19、對BFC規(guī)范(塊級格式化上下文：block formatting context)的理解？

BFC規(guī)定了內(nèi)部的Block Box如何布局。

定位方案：

（1）、內(nèi)部的Box會在垂直方向上一個接一個放置。

（2）、Box垂直方向的距離由margin決定，屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊。

（3）、每個元素的margin box 的左邊，與包含塊border box的左邊相接觸。

（4）、BFC的區(qū)域不會與float box重疊。

（5）、BFC是頁面上的一個隔離的獨(dú)立容器，容器里面的子元素不會影響到外面的元素。

（6）、計算BFC的高度時，浮動元素也會參與計算。

滿足下列條件之一就可觸發(fā)BFC

（1）、根元素，即html

（2）、float的值不為none（默認(rèn)）

（3）、overflow的值不為visible（默認(rèn)）

（4）、display的值為inline-block、table-cell、table-caption

（5）、position的值為absolute或fixed

20、為什么會出現(xiàn)浮動和什么時候需要清除浮動？清除浮動的方式？

浮動元素碰到包含它的邊框或者浮動元素的邊框停留。由于浮動元素不在文檔流中，所以文檔流的塊框表現(xiàn)得就像浮動框不存在一樣。浮動元素會漂浮在文檔流的塊框上。

浮動帶來的問題：

（1）、父元素的高度無法被撐開，影響與父元素同級的元素。

（2）、與浮動元素同級的非浮動元素（內(nèi)聯(lián)元素）會跟隨其后。

（3）、若非第一個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結(jié)構(gòu)。

清除浮動的方式：

（1）、父級div定義height

（2）、最后一個浮動元素后加空div標(biāo)簽 并添加樣式clear:both。

（3）、包含浮動元素的父標(biāo)簽添加樣式overflow為hidden或auto。

（4）、父級div定義zoom

21、上下margin重合的問題

在重合元素外包裹一層容器，并觸發(fā)該容器生成一個BFC。

例子：

<div class="aside"></div>
<div class="text">
<div class="main"></div>
</div>
<!--下面是css代碼-->
.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屬性。
}

22、設(shè)置元素浮動后，該元素的display值是多少？

自動變成display:block

23、移動端的布局用過媒體查詢嗎？

通過媒體查詢可以為不同大小和尺寸的媒體定義不同的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樣式/}

24、什么是 CSS 預(yù)處理器？

CSS 預(yù)處理器是 CSS 語言的超集，比CSS更豐滿。

CSS 預(yù)處理器定義了一種新的語言，其基本思想是：用一種專門的編程語言，為CSS增加了一些編程的特性，將CSS作為目標(biāo)生成文件，然后開發(fā)者就只要使用這種語言進(jìn)行編碼工作。

通俗的說，CSS預(yù)處理器用一種專門的編程語言，進(jìn)行Web頁面樣式設(shè)計，然后再編譯成正常的CSS文件，以供項目使用。CSS預(yù)處理器為CSS增加一些編程的特性，無需考慮瀏覽器的兼容性問題，例如你可以在CSS中使用變量、簡單的邏輯程序、函數(shù)等等在編程語言中的一些基本特性，可以讓你的CSS更加簡潔、適應(yīng)性更強(qiáng)、可讀性更佳，更易于代碼的維護(hù)等諸多好處。

CSS預(yù)處理器技術(shù)已經(jīng)非常成熟，而且也涌現(xiàn)出了很多種不同的CSS預(yù)處理器語言，比如說：Sass（SCSS）、LESS、Stylus、Turbine、Swithch CSS、CSS Cacheer、DT CSS等。如此之多的CSS預(yù)處理器，那么“我應(yīng)該選擇哪種CSS預(yù)處理器？”也相應(yīng)成了最近網(wǎng)上的一大熱門話題，在Linkedin、Twitter、CSS-Trick、知呼以及各大技術(shù)論壇上，很多人為此爭論不休。相比過計我們對是否應(yīng)該使用CSS預(yù)處理器的話題而言，這已經(jīng)是很大的進(jìn)步了。

25、CSS優(yōu)化、提高性能的方法有哪些？

避免過度約束

避免后代選擇符

避免鏈?zhǔn)竭x擇符

使用緊湊的語法

避免不必要的命名空間

避免不必要的重復(fù)

最好使用表示語義的名字，一個好的類名應(yīng)該是描述他是什么而不是像什么？

避免！important，可以選擇其他選擇器

盡可能的精簡規(guī)則，你可以合并不同類里的重復(fù)規(guī)則

26、瀏覽器是怎樣解析CSS選擇器的？

CSS選擇器的解析是從右向左解析的。若從左向右的匹配，發(fā)現(xiàn)不符合規(guī)則，需要進(jìn)行回溯，會損失很多性能。若從右向左匹配，先找到所有的最右節(jié)點(diǎn)，對于每一個節(jié)點(diǎn)，向上尋找其父節(jié)點(diǎn)直到找到根元素或滿足條件的匹配規(guī)則，則結(jié)束這個分支的遍歷。兩種匹配規(guī)則的性能差別很大，是因為從右向左的匹配在第一步就篩選掉了大量的不符合條件的最右節(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。

27、在網(wǎng)頁中的應(yīng)該使用奇數(shù)還是偶數(shù)的字體？為什么呢？

使用偶數(shù)字體。偶數(shù)字號相對更容易和 web 設(shè)計的其他部分構(gòu)成比例關(guān)系。Windows 自帶的點(diǎn)陣宋體（中易宋體）從 Vista 開始只提供 12、14、16 px 這三個大小的點(diǎn)陣，而 13、15、17px時用的是小一號的點(diǎn)。（即每個字占的空間大了 1 px，但點(diǎn)陣沒變），于是略顯稀疏。

28、margin和padding分別適合什么場景使用？

何時使用margin：

（1）、需要在border外側(cè)添加空白

（2）、空白處不需要背景色

（3）、上下相連的兩個盒子之間的空白，需要相互抵消時。

何時使用padding：

（1）、需要在border內(nèi)側(cè)添加空白

（2）、空白處需要背景顏色

（3）、上下相連的兩個盒子的空白，希望為兩者之和。

兼容性的問題：在IE5 IE6中，為float的盒子指定margin時，左側(cè)的margin可能會變成兩倍的寬度。通過改變padding或者指定盒子的display：inline解決。

29、元素豎向的百分比設(shè)定是相對于容器的高度嗎？

當(dāng)按百分比設(shè)定一個元素的寬度時，它是相對于父容器的寬度計算的，但是，對于一些表示豎向距離的屬性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，當(dāng)按百分比設(shè)定它們時，依據(jù)的也是父容器的寬度，而不是高度。

30、全屏滾動的原理是什么？用到了CSS的哪些屬性？

原理：有點(diǎn)類似于輪播，整體的元素一直排列下去，假設(shè)有5個需要展示的全屏頁面，那么高度是500%，只是展示100%，剩下的可以通過transform進(jìn)行y軸定位，也可以通過margin-top實現(xiàn)

overflow：hidden；transition：all 1000ms ease；

31、什么是響應(yīng)式設(shè)計？響應(yīng)式設(shè)計的基本原理是什么？如何兼容低版本的IE？

響應(yīng)式網(wǎng)站設(shè)計(Responsive Web design)是一個網(wǎng)站能夠兼容多個終端，而不是為每一個終端做一個特定的版本。

基本原理是通過媒體查詢檢測不同的設(shè)備屏幕尺寸做處理。

頁面頭部必須有meta聲明的viewport。

<meta name=’viewport’ content=”width=device-width, initial-scale=1. maximum-scale=1,user-scalable=no”>

32、視差滾動效果？

視差滾動（Parallax Scrolling）通過在網(wǎng)頁向下滾動的時候，控制背景的移動速度比前景的移動速度慢來創(chuàng)建出令人驚嘆的3D效果。

（1）、CSS3實現(xiàn)

優(yōu)點(diǎn)：開發(fā)時間短、性能和開發(fā)效率比較好，缺點(diǎn)是不能兼容到低版本的瀏覽器（具體可查看億企邦《各大主流瀏覽器對HTML5的兼容性測試及結(jié)果分析》的相關(guān)介紹）

（2）、jQuery實現(xiàn)

通過控制不同層滾動速度，計算每一層的時間，控制滾動效果。

優(yōu)點(diǎn)：能兼容到各個版本的，效果可控性好

缺點(diǎn)：開發(fā)起來對制作者要求高

（3）、插件實現(xiàn)方式

例如：parallax-scrolling，兼容性十分好。

33、::before 和 :after中雙冒號和單冒號有什么區(qū)別？解釋一下這2個偽元素的作用

（1）、單冒號(:)用于CSS3偽類，雙冒號(::)用于CSS3偽元素。

（2）、::before就是以一個子元素的存在，定義在元素主體內(nèi)容之前的一個偽元素。并不存在于dom之中，只存在在頁面之中。

:before 和 :after 這兩個偽元素，是在CSS2.1里新出現(xiàn)的。起初，偽元素的前綴使用的是單冒號語法，但隨著Web的進(jìn)化，在CSS3的規(guī)范里，偽元素的語法被修改成使用雙冒號，成為::before ::after

34、你對line-height是如何理解的？

行高是指一行文字的高度，具體說是兩行文字間基線的距離。CSS中起高度作用的是height和line-height，沒有定義height屬性，最終其表現(xiàn)作用一定是line-height。

單行文本垂直居中：把line-height值設(shè)置為height一樣大小的值可以實現(xiàn)單行文字的垂直居中，其實也可以把height刪除。

多行文本垂直居中：需要設(shè)置display屬性為inline-block。

35、怎么讓Chrome支持小于12px 的文字？

p{font-size:10px;-webkit-transform:scale(0.8);} //0.8是縮放比例

36、讓頁面里的字體變清晰，變細(xì)用CSS怎么做？

-webkit-font-smoothing在window系統(tǒng)下沒有起作用，但是在IOS設(shè)備上起作用-webkit-font-smoothing：antialiased是最佳的，灰度平滑。

37、position:fixed;在android下無效怎么處理？

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>

38、如果需要手動寫動畫，你認(rèn)為最小時間間隔是多久，為什么？

多數(shù)顯示器默認(rèn)頻率是60Hz，即1秒刷新60次，所以理論上最小間隔為1/60＊1000ms ＝ 16.7ms。

39、li與li之間有看不見的空白間隔是什么原因引起的？有什么解決辦法？

行框的排列會受到中間空白（回車空格）等的影響，因為空格也屬于字符,這些空白也會被應(yīng)用樣式，占據(jù)空間，所以會有間隔，把字符大小設(shè)為0，就沒有空格了。
解決方法：

（1）、可以將<li>代碼全部寫在一排

（2）、浮動li中float：left

（3）、在ul中用font-size：0（谷歌不支持）；可以使用letter-space：-3px

40、display:inline-block 什么時候會顯示間隙？

有空格時候會有間隙，解決：移除空格

margin正值的時候，解決：margin使用負(fù)值

使用font-size時候，解決：font-size:0、letter-spacing、word-spacing

41、有一個高度自適應(yīng)的div，里面有兩個div，一個高度100px，希望另一個填滿剩下的高度

外層div使用position：relative；高度要求自適應(yīng)的div使用position: absolute; top: 100px; bottom: 0; left: 0

42、png、jpg、gif 這些圖片格式解釋一下，分別什么時候用。有沒有了解過webp？

png是便攜式網(wǎng)絡(luò)圖片（Portable Network Graphics）是一種無損數(shù)據(jù)壓縮位圖文件格式.優(yōu)點(diǎn)是：壓縮比高，色彩好。大多數(shù)地方都可以用。

jpg是一種針對相片使用的一種失真壓縮方法，是一種破壞性的壓縮，在色調(diào)及顏色平滑變化做的不錯。在www上，被用來儲存和傳輸照片的格式。

gif是一種位圖文件格式，以8位色重現(xiàn)真色彩的圖像。可以實現(xiàn)動畫效果。

webp格式是谷歌在2010年推出的圖片格式，壓縮率只有jpg的2/3，大小比png小了45%。缺點(diǎn)是壓縮的時間更久了，兼容性不好，目前谷歌和opera支持。

43、style標(biāo)簽寫在body后與body前有什么區(qū)別？

頁面加載自上而下 當(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)致的頁面閃爍問題）

44、CSS屬性overflow屬性定義溢出元素內(nèi)容區(qū)的內(nèi)容會如何處理?

參數(shù)是scroll時候，必會出現(xiàn)滾動條。

參數(shù)是auto時候，子元素內(nèi)容大于父元素時出現(xiàn)滾動條。

參數(shù)是visible時候，溢出的內(nèi)容出現(xiàn)在父元素之外。

參數(shù)是hidden時候，溢出隱藏。

45、闡述一下CSS Sprites

將一個頁面涉及到的所有圖片都包含到一張大圖中去，然后利用CSS的 background-image，background- repeat，background-position 的組合進(jìn)行背景定位。利用CSS Sprites能很好地減少網(wǎng)頁的http請求，從而大大的提高頁面的性能；CSS Sprites能減少圖片的字節(jié)。

46、闡述一下<em>、<strong>、<span>的區(qū)別？

<em>和<strong>標(biāo)簽是為了強(qiáng)調(diào)一段話中的關(guān)鍵字時使用，它們的語義是強(qiáng)調(diào)（具體可查看億企邦《CSS樣式表中px、em和rem單位的區(qū)別與使用特點(diǎn)》的相關(guān)介紹）。

<span>標(biāo)簽是沒有語義的，它的作用就是為了設(shè)置單獨(dú)的樣式用的，把一段話圈起來，然后用css設(shè)置樣式。

47、簡單闡述一下<br/>和<hr/>標(biāo)簽

<br/>是換行標(biāo)簽，<br/>標(biāo)簽作用相當(dāng)于word文檔中的回車。

<hr/>是分割線標(biāo)簽，<hr/>標(biāo)簽和<br/>標(biāo)簽一樣也是一個空標(biāo)簽，所以只有一個開始標(biāo)簽，沒有結(jié)束標(biāo)簽。

<hr/>標(biāo)簽的在瀏覽器中的默認(rèn)樣式線條比較粗，顏色為灰色，可能有些人覺得這種樣式不美觀，沒有關(guān)系，這些外在樣式在我們以后學(xué)習(xí)了css樣式表之后，都可以對其修改。

48、塊級/行內(nèi)元素及其區(qū)別

常用塊級元素

div/table/h1-h6/p/form/ol等，以及html5新增的section/canvas/audio/video等等。

塊級元素：

（1）、會另起一行

（2）、可以設(shè)置width、margin、border、padding、width屬性

（3）、默認(rèn)寬度是容器的100%

行內(nèi)元素

a/input/textarea/button/label/select等等。

行內(nèi)元素：

（1）、和其他元素在同一行

（2）、寬度/高度是內(nèi)容的寬度/高度

（3）、可以設(shè)置margin-left和margin-right屬性，無法設(shè)置margin-top和margin-bottom屬性

（4）、border和padding可以設(shè)置，但是border-top和padding-top到頁面頂部后就不再增加

49、闡述一下BFC

BFC規(guī)定了內(nèi)部的Block Box如何布局.。可參考理解CSS的BFC（塊級格式化上下文: block formatting context）

特征：

（1）、內(nèi)部的Box會在垂直方向上一個接一個放置。

（2）、Box垂直方向的距離由margin決定，屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊。

（3）、每個元素的margin box 的左邊，與包含塊border box的左邊相接觸

（4）、BFC的區(qū)域不會與float box重疊

（5）、BFC是頁面上的一個隔離的獨(dú)立容器，容器里面的子元素不會影響到外面的元素

（6）、計算BFC的高度時，浮動元素也會參與計算

觸發(fā)BFC條件：

（1）、float的值不為none

（2）、position的值不為static或者relative

（3）、display的值為inline-block、table-cell、table-caption、inline-flex或者flex其中之一

（4）、overflow的值不為visiabl

50、常見兼容性問題

漸進(jìn)識別的方式，從總體中逐漸排除局部。首先，巧妙的使用“9”這一標(biāo)記，將IE瀏覽器從所有情況中分離出來。接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經(jīng)獨(dú)立識別。

div {
background-color: #ffffff; /* 所有識別 */
background-color: #fbfbfb; /* IE6、7、8識別 */
+background-color: #fcfcfc; /* IE7識別 */
_background-color: #fdfdfd; /* IE6識別 */
}

Chrome支持小于12px 的文字

p { font-size: 10px; -webkit-transform: scale(0.8); } //0.8是縮放比例

position: flxed在android下無效

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>

在使用HTML定義頁面效果的網(wǎng)站中，往往需要大量或重復(fù)的表格和font元素形成各種規(guī)格的文字樣式，這樣做的后果就是會產(chǎn)生大量的HTML標(biāo)簽，從而使頁面文件的大小增加。而將樣式的聲明單獨(dú)放到CSS樣式表中，可以大大的減小頁面的體積，這樣在加載頁面時使用的時間也會大大的減少。另外，CSS樣式表的復(fù)用更大程序的縮減了頁面的體積，減少下載的時間。

億企邦點(diǎn)評：

CSS簡化了網(wǎng)頁的格式代碼，外部的樣式表還會被瀏覽器保存在緩存里，加快了下載顯示的速度，也減少了需要上傳的代碼數(shù)量。只要修改保存著網(wǎng)站格式的CSs樣式表文件就町以改變整個站點(diǎn)的風(fēng)格特色，在修改頁面數(shù)量龐大的站點(diǎn)時，顯得格外有用。這就避免了一個個網(wǎng)頁的修改，大大減少了工作量。