當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

css就近原则_细品100道CSS知识点（上）「干货满满」

發布時間：2025/3/15 CSS 19 豆豆

生活随笔收集整理的這篇文章主要介紹了 css就近原则_细品100道CSS知识点（上）「干货满满」小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

作者：hh_phoebe

轉發鏈接：https://juejin.im/post/5ee0cf335188254ec9505381

前言

看到小伙伴留言說期待后面整理的CSS和JS篇，工具人小編整理出了本篇有關CSS部分的知識點。本篇文章作為對CSS知識點的統籌，囊括了目前大部分在面試當中常見的內容，包括一些易踩雷的知識點。文章篇幅較長，建議收藏慢慢細品。

文中篇概念性的內容也蠻多，小編一如既往的做了分割線，記憶力好的童鞋請自行忽略。

1.標準的CSS盒的模型及其和低版本的IE盒子模型的區別？

標準(W3C)盒子模型：width = 內容寬度(content) + border + padding + margin

低版本IE盒子模型： width = 內容寬度(content + border + padding)+ margin

圖片展示:

區別：標準盒子模型盒子的height和width是content(內容)的寬高，而IE盒子模型盒子的寬高則包括content+padding+border部分。

2.幾種解決IE6存在的bug的方法

由float引起的雙邊距的問題，使用display解決；
由float引起的3像素問題，使用display: inline -3px;
使用正確的書寫順序link visited hover active，解決超鏈接hover點擊失效問題；
對于IE 的z-index問題，通過給父元素增加position: relative解決；
實用!important解決Min-height最小高度問題；
使用iframe解決select在IE6下的覆蓋問題；
使用over: hidden, zoom: 0.08, line-height: 1px解決定義1px左右的容器寬度問題；

注意：有關IE6支不支持!important的問題，對于單個類是支持的。例如：

.content { color: pink !importent };.content { color: orange };// 這里IE6及以上，FF，google等都將顯示粉紅色復制代碼

當是，當一個樣式內部有多個相同屬性的時候。例如：

.content { color: pink !importent; color: orange };// IE7及以上，FF, google顯示粉紅色，而IE6將顯示橙色(原因是一個樣式內重復設置了屬性，后面的就會覆蓋掉之前的)復制代碼

3.CSS選擇符有哪些？哪些屬性可以繼承？

常見的選擇符有一下：

id選擇器(#content)，類選擇器(.content), 標簽選擇器(div, p, span等), 相鄰選擇器(h1+p), 的選擇器(ul+li), 后代選擇器(li, a)，通配符選擇器(*), 屬性選擇器(a[rel = "external"])，偽類選擇器(a:hover, li:nth-child)

可繼承的樣式： font-size, font-family, color, UL, LI, DL, DD, DT;

不可繼承的樣式屬性： border, padding, margin, width, height；

4.CSS優先級算法如何計算？

考慮到就近原則，同權重情況下樣式定義以最近者為準
載入的樣式按照最后的定位為準

優先級排序：

同權重情況下：內聯樣式表(標簽內部)> 嵌入樣式表(當前文件中)> 外部樣式表(外部文件中)

!important > # > . > tag

注意： !important 比內聯優先級高

5.CSS3新增偽類有那些？

:root 選擇文檔的根元素，等同于html元素
:empty 選擇沒有子元素的元素
:target 選取當前活動的目標元素
:not(selector) 選擇除 selector 元素以外的元素
:enabled 選擇可用的表單元素
:disabled 選擇禁用的表單元素
:checked 選擇被選中的表單元素
:after 在元素內部最前添加內容
:before 在元素內部最后添加內容
:nth-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n
nth-last-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n，從后向前數
:nth-child(odd)
:nth-child(even)
:nth-child(3n+1)
:first-child
:last-child
:only-child
:nth-of-type(n) 匹配父元素下指定子元素，在同類子元素中排序第n
:nth-last-of-type(n) 匹配父元素下指定子元素，在同類子元素中排序第n，從后向前數
:nth-of-type(odd)
:nth-of-type(even)
:nth-of-type(3n+1)
:first-of-type
:last-of-type
:only-of-type
::selection 選擇被用戶選取的元素部分
:first-line 選擇元素中的第一行
:first-letter 選擇元素中的第一個字符

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

水平居中

css: * {margin: 0; padding: 0;} .content { margin: 0 auto; width: 100px; height: 100px; background: pink; } html:

垂直居中

css: * {margin: 0; padding: 0;} .content { width: 100px; height: 100px; background: pink; position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); // 更新：此處感謝小伙伴留言指出 }html:

居中浮動元素

css: * {margin: 0; padding: 0;} .content { width: 100px; height: 100px; background: pink; position: relative; top:50%; left: 50%; margin: -150px 0 0 -250px; }html:

如何讓絕對定位的div居中

css: * {margin: 0; padding: 0;} .content { margin: 0 auto; position: absolute; width: 1500px; background: pink; top: 0; left: 0; bottom: 0; right: 0; }html:

7.display有哪些值？它們的作用是什么？

其中，常用的有：block， inline-block， none， table， line。

8.position的值relative和absolute定位原點？

首先，使用position的時候，應該記住一個規律是‘子絕父相’。

relative(相對定位)：生成相對定位的元素，定位原點是元素本身所在的位置；

absolute(絕對定位)：生成絕對定位的元素，定位原點是離自己這一級元素最近的一級position設置為absolute或者relative的父元素的左上角為原點的。

fixed (老IE不支持)：生成絕對定位的元素，相對于瀏覽器窗口進行定位。

static：默認值。沒有定位，元素出現在正常的流中(忽略 top, bottom, left, right、z-index 聲明)。

inherit：規定從父元素繼承 position 屬性的值。

9.CSS3有哪些新特性？

關于CSS新增的特性，有以下：

選擇器;
圓角(border-raduis);
多列布局(multi-column layout);
陰影(shadow)和反射(reflect);
文字特效(text-shadow);
文字渲染(text-decoration);
線性漸變(gradient);
旋轉(rotate)/縮放(scale)/傾斜(skew)/移動(translate);
媒體查詢(@media);
RGBA和透明度 ;
@font-face屬性;
多背景圖 ;
盒子大小;
語音;

大致想到這么多，有遺漏的可以留言指出，小編看到會加上。

10.用純CSS創建一個三角形的原理是什么？

方法一：隱藏上，左，右三條邊，顏色設定為(transparent)

css: * {margin: 0; padding: 0;} .content { width: 0; height: 0; margin: 0 auto; border-width: 20px; border-style: solid; border-color: transparent transparent pink transparent; // 對應上右下左，此處為下粉色 }html:

方法二：采用的是均分原理

實現步驟： 1.首先保證元素是塊級元素；2.設置元素的邊框；3.不需要顯示的邊框使用透明色。

css: * {margin: 0; padding: 0;} .content { width:0; height:0; margin:0 auto; border:50px solid transparent; border-top: 50px solid pink; }html:

11.什么是響應式設計？響應式設計的基本原理是什么？如何兼容低版本的IE？

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

關于原理：基本原理是通過媒體查詢(@media)查詢檢測不同的設備屏幕尺寸做處理。

關于兼容：頁面頭部必須有mate聲明的viewport。

復制代碼

12.為什么要初始化CSS樣式？

因為瀏覽器的兼容問題，不同瀏覽器對標簽的默認值是不同的，如果沒有對瀏覽器的CSS初始化，會造成相同頁面在不同瀏覽器的顯示存在差異。

13.浮動原理以及為什么會出現浮動和什么時候需要清除浮動？清除浮動的方式？

非IE瀏覽器下，容器不設定高度且子元素浮動時，容器高度不能被內容撐開。此時，內容會溢出到容器外面而影響布局。此類現象被稱為浮動(溢出)。

原理：

浮動元素脫離文檔流，不占據空間(引起“高度塌陷”現象)；
浮動元素碰到包含它的邊框或其它浮動元素的邊框停留。

浮動元素碰到包含它的邊框或者浮動元素的邊框停留。由于浮動元素不在文檔流之中，文檔流的塊級框會表現的就像浮動框不存在一樣。浮動元素會漂浮在文檔流的塊級框之上。

浮動會帶來的問題：

父級元素的高度將會無法被撐開，會影響與父級元素同級的元素
與浮動元素同級的非浮動元素(內聯元素)會跟隨其后
若浮動的元素不是第一個元素，則該元素之前的元素也要浮動，否則會影響頁面的顯示結構

清除方式：

父級盒子定義高度(height);
最后一個浮動元素后面加一個div空標簽，并且添加樣式clear: both;
包含浮動元素的父級標簽添加樣式overflow為hidden/both;
父級div定義zoom;

14.CSS優化、提高性能的方法有哪些？

多個css可合并，并盡量減少http請求
屬性值為0時，不加單位
將css文件放在頁面最上面
避免后代選擇符，過度約束和鏈式選擇符
使用緊湊的語法
避免不必要的重復
使用語義化命名，便于維護
盡量少的使用!impotrant，可以選擇其他選擇器
精簡規則，盡可能合并不同類的重復規則
遵守盒子模型規則

15.CSS預處理器/后處理器是什么？為什么要使用它們？

預處理器，如：less，sass，stylus,用來預編譯sass或者less，增加了css代碼的復用性，還有層級，mixin，變量，循環，函數等，對編寫以及開發UI組件都極為方便。

后處理器，如： postCss,通常被視為在完成的樣式表中根據css規范處理css，讓其更加有效。目前最常做的是給css屬性添加瀏覽器私有前綴，實現跨瀏覽器兼容性的問題。

css預處理器為css增加一些編程特性，無需考慮瀏覽器的兼容問題，我們可以在CSS中使用變量，簡單的邏輯程序，函數等在編程語言中的一些基本的性能，可以讓我們的css更加的簡潔，增加適應性以及可讀性，可維護性等。

其它css預處理器語言：Sass(Scss), Less, Stylus, Turbine, Swithch css, CSS Cacheer, DT Css。

使用原因：

結構清晰，便于擴展
可以很方便的屏蔽瀏覽器私有語法的差異
可以輕松實現多重繼承
完美的兼容了CSS代碼，可以應用到老項目中

16.::before 和 :after中雙冒號和單冒號有什么區別？解釋一下這2個偽元素的作用

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

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

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

17.讓頁面里的字體變清晰，變細用CSS怎么做？

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

18. 如果需要手動寫動畫，你認為最小時間間隔是多久，為什么？

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

19. rgba() 和 opacity 的透明效果有什么不同？

opacity 作用于元素以及元素內的所有內容(包括文字)的透明度；

rgba()只作用于元素自身的顏色或其背景色，子元素不會繼承透明效果；

20.css 屬性 content 有什么作用？

content 屬性專門應用在 before/after 偽元素上，用于插入額外內容或樣式。

21.請解釋一下 CSS3 的 Flexbox(彈性和布局模型)以及適用場景？

概念： Flex是Flexible Box的縮寫，意為”彈性布局”，用來為盒狀模型提供最大的靈活性。采用Flex布局的元素，稱為Flex容器(flex container)，簡稱”容器”。它的所有子元素自動成為容器成員，稱為Flex項目(flex item)，簡稱”項目”。

適用場景：任何一個容器都可以指定為Flex布局。Flexbox 用于不同尺寸屏幕中創建可自動擴展和收縮布局。

22.display:inline-block 什么時候會顯示間隙？

有空格時候會有間隙，可以刪除空格解決；
margin正值的時候，可以讓margin使用負值解決；
使用font-size時候，可通過設置font-size:0、letter-spacing、word-spacing解決；

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

(1)、png-便攜式網絡圖片(Portable Network Graphics),是一種無損數據壓縮位圖文件格式。優點是：壓縮比高，色彩好。大多數地方都可以用。

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

(3)、gif是一種位圖文件格式，以8位色重現真色彩的圖像?？梢詫崿F動畫效果。

(4)、bmp的優點：高質量圖片；缺點：體積太大；適用場景： windows桌面壁紙；

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

24. 在CSS樣式中常使用 px、em 在表現上有什么區別？

px相對于顯示器屏幕分辨率，無法用瀏覽器字體放大功能。

em值不是固定的，會繼承父級的字體大小： em = 像素值 / 父級font-size。

25.一個高度自適應的div，里面有兩個div，一個高度100px，希望另一個填滿剩下的高度問題怎么解決？

方案一： .content { height: calc(100%-100px); }

方案二：.container { position:relative; } .content { position: absolute; top: 100px; bottom: 0; }

方案三：.container { display:flex; flex-direction:column; } .content { flex:1; }

26.overflow: scroll 時不能平滑滾動的問題怎么處理？

監聽滾輪事件，然后滾動到一定距離時用 jquery 的 animate 實現平滑效果。

27.transform、animation和animation-duration的區別？

Transform: 它和width、left一樣，定義了元素很多靜態樣式實現變形、旋轉、縮放、移位及透視等功能，通過一系列功能的組合我們可以實現很炫酷的靜態效果(非動畫)。
Animation: 作用于元素本身而不是樣式屬性,屬于關鍵幀動畫的范疇，它本身被用來替代一些純粹表現的javascript代碼而實現動畫,可以通過keyframe顯式控制當前幀的屬性值。
animation-duration：規定完成動畫所花費的時間，以秒或毫秒計。

28.對 line-height 是如何理解的？

line-height指的是一行字的高度，包含了字間距，實際上是下一行基線到上一行基線的距離。如果一個標簽沒有定義height屬性，那么其最終表現的高度是由line-height決定的。一個容器沒有設置高度，那么撐開容器的高度的是line-height,而不是容器內部的文字內容。把line-height值設置為height一樣大小的值可以實現單行文字的垂直居中。line-height和height都能撐開一個高度，height會觸發haslayout，而line-height不會。

29.抽離樣式模塊怎么寫？述其思路。

可將css拆分成兩部分：公共CSS和業務CSS。

網站的配色，字體，交互提取出為公共的CSS。這部分的CSS命名不應涉及具體的業務。對于業務CSS，需要有統一的命名，使用公共的前綴。

30.在網頁中的應該使用奇數還是偶數的字體？

在網頁中的應該使用“偶數”字體：

偶數字號相對更容易和 web 設計的其他部分構成比例關系，使用奇數號字體時文本段落無法對齊，宋體的中文網頁排布中使用最多的就是 12 和 14。

31. 什么是外邊距重疊？重疊的結果是什么？

首先，外邊距重疊就是 margin-collapse。相鄰的兩個盒子(可能是兄弟關系也可能是祖先關系)的外邊距可以結合成一個單獨的外邊距。這種合并外邊距的方式被稱為折疊，結合而成的外邊距稱為折疊外邊距。

折疊結果遵循下列計算原則：

兩個相鄰的外面邊距是正數時，折疊結果就是它們之中的較大值；
兩個相鄰的外邊距都是負數時，折疊結果是兩者絕對值的較大值；
兩個外邊距一正一負時，折疊結果是兩者的相加的和；

32.display: none; 與 visibility: hidden; 有什么區別？

聯系：這兩個屬性的值都可以讓元素變得不可見；

區別：

從占據空間角度看：display: none;會讓元素完全從渲染樹中消失，渲染的時候不占據任何空間；visibility: hidden;不會讓元素從渲染樹消失，渲染師元素繼續占據空間，只是內容不可見；
從繼承方面角度看：display: none;是非繼承屬性，子孫節點消失由于元素從渲染樹消失造成，通過修改子孫節點屬性無法顯示；visibility:hidden;是繼承屬性，子孫節點消失由于繼承了hidden，通過設置visibility: visible;可以讓子孫節點顯式；
從重繪和重排角度看：修改常規流中元素的display通常會造成文檔重排。修改visibility屬性只會造成本元素的重繪讀屏器不會讀取display: none;元素內容；會讀取visibility: hidden元素內容；

33.css hack原理及常用hack有哪些？

原理：利用不同瀏覽器對CSS的支持和解析結果不一樣編寫針對特定瀏覽器的樣式。

常見的hack有： 屬性hack、選擇器hack、IE條件注釋。

34.link 與 @import 的區別？

link 是HTML方式， @import 是CSS方式；
link最大限度支持并行下載，@import 過多嵌套導致串行下載，出現FOUC；
link 可以通過 rel="alternate stylesheet"指定候選樣式；
瀏覽器對 link 支持早于@import，可以使用 @import對老瀏覽器隱藏樣式；
@import必須在樣式規則之前，可以在css文件中引用其他文件；

總的來說： link優于@import。

35.什么是 FOUC(Flash of Unstyled Content)？如何來避免 FOUC？

當使用@import導入CSS時，會導致某些頁面在IE出現奇怪的現象：沒有樣式的頁面內容顯示瞬間閃爍，這種現象被稱為“文檔樣式暫時失效”，簡稱FOUC。

產生原因：當樣式表晚于結構性html加載時，加載到此樣式表時，頁面將會停止之前的渲染。等待此樣式表被下載和解析后，再重新渲染頁面，期間導致短暫的花屏現象。

解決辦法：只要在

之間加入一個或者元素即可。

36.display,float,position有什么關系？

如果 display 為none，那么position和float都不起作用，元素不顯示；
如果position值為absolute或者fixed，元素絕對定位，float的計算值為none，display根據下面的表格進行調整；
如果float不是none，框是浮動的，display根據下表進行調整；
其他情況下display的值為指定值總結起來：絕對定位、浮動、根元素都需要調整 display；

37.外邊距折疊(collapsing margins)

毗鄰的兩個或多個margin會合并成一個margin，叫做外邊距折疊。規則如下：

兩個或多個毗鄰的普通流中的塊元素垂直方向上的margin會折疊；
浮動元素或linline-block元素或絕對定位元素的margin不會和垂直方向上的其他元素的margin折疊；
創建了會計格式化上下文的元素，不會和它的子元素發生margin折疊；
元素自身的margin-bottom和margin-top相鄰時也會折疊；

38.有哪幾種隱藏元素的方法？

visibility: hidden; 這個屬性只是簡單的隱藏某個元素，但是元素占用的空間仍然存在；
opacity: 0;``CSS3屬性，設置0可以使一個元素完全透明；
position: absolute; 設置一個很大的 left 負值定位，使元素定位在可見區域之外；
display: none; 元素會變得不可見，并且不會再占用文檔的空間；
transform: scale(0); 將一個元素設置為縮放無限小，元素將不可見，元素原來所在的位置將被保留；
HTML5屬性,效果和display:none;相同，當這個屬性用于記錄一個元素的狀態；
height: 0; 將元素高度設為 0 ，并消除邊框；
filter: blur(0); CSS3屬性，將一個元素的模糊度設置為0，從而使這個元素“消失”在頁面中；

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

li排列受到中間空白(回車/空格)等的影響，因為空白也屬于字符，會被應用樣式占據空間，產生間隔。解決辦法：

在ul中用font-size：0(谷歌不支持)；可以使用letter-space：-3px;
設置float：left；

40.瀏覽器是怎樣解析CSS選擇器的？

瀏覽器解析CSS是從上到下，從左到右解析的，這樣會提高查找選擇器所對應的元素的效率(至于原因，有興趣的童鞋可以自行去了解)。

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

全屏滾動有點類似于輪播，整體的元素一直排列下去，假設有5個需要展示的全屏頁面，那么高度是500%，只是展示100%。也可以理解為超出隱藏部分，滾動時顯示。

可能用到的CSS是： overflow:hidden; transform:translate(100%, 100%); display:none;

42.對瀏覽器內核的理解？

瀏覽器內核主要分為兩個部分：渲染引擎和js引擎；

渲染引擎：負責取得頁面的內容(html，xml，圖像等)、整理訊息(加入css等)、以及計算網頁的顯示方式，然后對輸出至顯示器或者打印機。瀏覽器的內核的不同對于網頁的語法解釋會有不同，所以渲染的效果也不同。所有網頁瀏覽器、電子郵件客戶以及其他所需要編輯、顯示網絡的應用程序都需要內核。
JS引擎：解析和執行Javascript來實現網頁的動態效果。

最開始渲染引擎和js引擎沒有明確的區分，后來js引擎越來越獨立，內核就傾向于只渲染引擎。

43.對WEB標準以及W3C的理解與認識

對于結構的要求：(規范的標簽可以提高搜索引擎對頁面的抓取效率，對SEO很有幫助)

標簽要閉合
標簽字母小寫
標簽不允許隨意嵌套

對于CSS和JS來說：

盡量使用外鏈CSS樣式表和JS腳本。同時結構，表現和行為分為三塊，符合規范。此外，還得提高頁面渲染速度，提高用戶體驗。
盡量少用行內樣式，保證結構和表現分離。標簽的id和class等的屬性命名要做到見文知意，標簽越少，加載越快，用戶體驗就會越高。同時代碼方面也會更易于維護，便于改版。
不需要變動內容，便可一同打印版本而不需要復制內容，提高網站易用性。

44.制作一個訪問量很大的網站，如何管理所有的css文件，js和圖片？

從人手，分工和同步方面回答：

前期團隊必須確認好全局樣式，編碼模式；
代碼風格，編寫習慣保持一致；
標注樣式編寫人，各模塊都要及時標注(標注關鍵樣式調用的地方)；
對自己負責的頁面進行標注；
CSS和JS分文件夾存并行存放，命名都要統一；
JS分文件夾存放，命名以該JS功能為準的英文翻譯；
圖片采用整合的.png格式存放，盡量整合在一起，方便將來管理；

45.視差滾動效果以及如何實現？

視差滾動(Parallax Scrolling)指網頁滾動過程中，多層次的元素進行不同程度的移動，視覺上形成立體運動效果的網頁展示技術(3D效果)。

實現方式：

CSS3實現：優點是開發時間相對較短，性能和開發效率比較好。缺點是不能兼容到低版本的瀏覽器；
JQuery實現：(通過控制不同層滾動速度，計算每一層的時間)優點是能兼容到各個版本，效果可控性好，缺點是開發起來對制作者的要求較高；
插件實現方式：例如使用parallax-scrolling,兼容性十分好；

46.對BFC規范(塊級格式化上下文：block formatting context)的理解

BFC規定了內部的Block Box如何布局。一個頁面是由很多個Box組成的，元素的類型和display屬性，決定了這個Box的類型。不同類型的box，會參與不同的Formatting Context(決定如何渲染文檔的容器)，因此Box內的元素會以不同的方式渲染，也是就是說BFC內部的元素和外部的元素不會相互影響。

定位方案：

內部的box會在垂直方向上一個接一個的放置；
box垂直方向的距離由margin決定，屬于同一個BFC的兩個相鄰Box的margin會發生重疊；
每個元素margin box的左邊，與包含塊border box的左邊相接觸；
BFC的區域不會與float box重疊；
BFC是頁面上的一個隔離的獨立容器，容器里面的元素不會影響到外面的元素；
計算BFC的高度時，浮動元素也會參與計算。

滿足下列條件之一就可以出發BFC：

根元素變化，即html；
float的值不為none(默認)；
overflow的值不為visible(默認)；
display的值為inline-block, tabke-cell，table-caption；
position的值為absolute或fixed;

47.元素豎向的百分比設定是相對于容器的高度嗎？

一般來說，子元素的百分比單位都是以父元素為依據。但是margin和padding例外。元素的height是相對于容器的高度，但是元素的margin和padding是相對于容器的寬度。

48.一個滿屏'品字'布局如何設計?

方法有很多種，但是比較簡單的方式就是：上面的div寬度設置為100%，底下兩個div設置成50%，并使用float或者inline使其保持在同一行即可(具體的樣式可以自己微調)。如下：

css: .content { width: 50%; height: 150px; margin: 0 auto;}.top { width: 40%; height: 50px; background-color: pink; margin-bottom: 50px; margin-left: 30%;}.left { width: 45%; height: 50px; background-color: pink; float: left;}.right { width: 45%; height: 50px; background-color: pink; float: right;}html:

49.經常遇到的瀏覽器的兼容性有哪些？原因，解決方法是什么，常用hack的技巧？

(1)、問題：png24位的圖片在ie瀏覽器上出現背景。解決：做成png8；

(2)、問題：瀏覽器默認的margin和padding不同。解決：添加一個全局的*{ margin： 0; padding： 0;}；

(3)、問題：IE下,可以使用獲取常規屬性的方法來獲取自定義屬性,也可以使用getAttribute()獲取自定義屬性，而Firefox下,只能使用getAttribute()獲取自定義屬性。解決：統一通過getAttribute()獲取自定義屬性；

(4)、問題： IE下,event對象有x,y屬性,但是沒有pageX,pageY屬性，而Firefox下,event對象有pageX,pageY屬性,但是沒有x,y屬性。解決：使用mX(mX = event.x ? event.x : event.pageX;)來代替IE下的event.x或者Firefox下的event.pageX。

50.box-sizing 常用的屬性有哪些？分別有什么作用？

box-sizing: content-box; // 默認的標準(W3C)和模型元素效果；
box-sizing: border-box; // 觸發怪異(IE)和模型元素的效果；
box-sizing: inherit; // 繼承父元素 box-sizing 屬性的值；

本篇未完結，請見下一篇