前端開發中的問題集錦

H5新標籤的兼容

主流瀏覽器都兼容 HTML5 的新標籤，對於 IE8 及如下版本不認識 HTML5的新元素，可使用 JavaScript 建立一個沒用的元素來解決，例如：
<script>
document.createElement("header");
</script>
也可使用 shiv 來解決兼容性問題，詳情可參考 HTML5 Shiv

 

瀏覽器私有屬性

• Google Chrome, Safari ( -webkit )
• Firefox ( -moz- )
• IE ( -ms- )
• Opera ( -o- )

.pic {
-webkit-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}

 

文字末尾省略號的CSS實現方法：

text-overflow:ellipsis;

overflow:hidden;

white-space:nowrap;

 

繼承 inherit

文本類的屬性基本上能默認繼承父類  ：

        font  line-height color text white-space word-wrap word-break

不繼承的屬性有：

        float position width display transform animation padding

 

CSS 選擇器的優先級

計算方法：
a = 行內樣式
b = id 選擇器的數量
c = 類、僞類的屬性選擇器的數量  
d = 標籤選擇器和僞元素選擇器的數量
NOTE：從上到下優先級一次下降，且優先級高的樣式會將優先級低的樣式覆蓋。
大體公式（並不許確）以下。
value = a * 1000 + b * 100 + c * 10 + d

已知這樣一段HTML：

<div class="a b"><em>Hello World</em></div>

應用了這樣一段CSS：

A em{ color:red; } B .a{ color:blue; } C .b{ color:green; } D .a.b{ color:yellow; }

請問，文字「Hello World」的顏色是（回答顏色的英文名稱便可）_A_

還有一條，選擇器的優先級會根據描述最清楚的來定義，在這個html裏面，em定義的屬性是最直接的指法，其餘的類選擇器的指法都算是父類繼承過來的顏色屬性，因此要選擇em。

 

 

已知HTML：<div class="a"><div class="b"></div></div>，若是應用了以下CSS：

.a{ width : 200px; height : 100px;}

.b{ padding : 20%; background-color : red; }

那麼紅色區域的大小是

 

A.寬：80px，高：80px

B.寬：200px，高：40px

C.寬：200px，高：80px

D.寬：80px，高：40px

 

爲啥選擇C？

 

【僞類選擇器】
經常使用僞類選擇器：
:link IE6+
:visited IE7+
:hover IE6中僅可用於連接
:active IE6/7中僅可用於連接
:enabled IE9+
:disabled IE9+
:checked IE9+
:first-child IE8+
:last-child IE9+
:nth-child(even) 可爲 odd even 或數字 IE9+
:nth-last-child(n) n 從 0 開始計算 IE9+
:only-child 僅選擇惟一的元素 IE9+
:only-of-type IE9+
:first-of-type IE9+
:last-of-type IE9+
:nth-of-type(even) IE9+
:nth-last-of-type(2n) IE9+
不經常使用僞類選擇器：
:empty 選中頁面中無子元素的標籤 IE9+
:root 選擇 HTML 根標籤 IE9+
:not() 參數爲通常選擇器 IE9+
:target 被錨點選中的目標元素 IE9+
:lang() 選中語言值爲某類特殊值的元素 IE7+

【僞元素選擇器】
注意與僞類學則器的區分。
::first-letter IE6+
::first-line IE6+
::before{content: "before"} 需與 content 一同使用 IE8+
::after{content: "after"} 需與 content 一同使用 IE8+
::selection 被用戶選中的內容（鼠標選擇高亮屬性）IE9+ Firefox需用 -moz 前綴

 

link和@import的區別

頁面中使用CSS的方式主要有3種：行內添加定義style屬性值，頁面頭部內嵌調用和外面連接調用，其中外面引用有兩種：link和@import。外部引用CSS兩種方式link和@import的方式分別是：

XML/HTML代碼
          <link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css" media="all" />  
XML/HTML代碼
          <style type="text/css" media="screen">  
             @import url("CSS文件");  
          </style>  

二者都是外部引用CSS的方式，可是存在必定的區別：

1. 區別1：link是XHTML標籤，除了加載CSS外，還能夠定義RSS等其餘事務；@import屬於CSS範疇，只能加載CSS。
2. 區別2：link引用CSS時，在頁面載入時同時加載；@import須要頁面網頁徹底載入之後加載。
3. 區別3：link是XHTML標籤，無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。
4. 區別4：ink支持使用Javascript控制DOM去改變樣式；而@import不支持。

補充：@import最優寫法
@import的寫法通常有下列幾種：

@import 'style.css' //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不識別
@import "style.css" //Windows IE4/ NS4, Macintosh IE4/NS4不識別
@import url(style.css) //Windows NS4, Macintosh NS4不識別
@import url('style.css') //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不識別
@import url("style.css") //Windows NS4, Macintosh NS4不識別
由上分析知道，@import url(style.css) 和@import url("style.css")是最優的選擇，兼容的瀏覽器最多。從字節優化的角度來看@import url(style.css)最值得推薦。

 

BFC的定義

是 W3C CSS 2.1 規範中的一個概念，它決定了元素如何對其內容進行定位，以及與其餘元素的關係和相互做用。在建立了 Block Formatting Context 【塊級格式化上下文】的元素中，其子元素會一個接一個地放置。垂直方向上他們的起點是一個包含塊的頂部，兩個相鄰的元素之間的垂直距離取決於 ‘margin’ 特性。在 Block Formatting Context 中相鄰的塊級元素的垂直邊距會摺疊（collapse）。

在 Block Formatting Context 中，每個元素左外邊與包含塊的左邊相接觸（對於從右到左的格式化，右外邊接觸右邊）， 即便存在浮動也是如此（儘管一個元素的內容區域會因爲浮動而壓縮），除非這個元素也建立了一個新的 Block Formatting Context 。

BFC究竟是什麼？

當涉及到可視化佈局的時候，Block Formatting Context提供了一個環境，HTML元素在這個環境中按照必定規則進行佈局。一個環境中的元素不會影響到其它環境中的佈局。好比浮動元素會造成BFC，浮動元素內部子元素的主要受該浮動元素影響，兩個浮動元素之間是互不影響的。這裏有點相似一個BFC就是一個獨立的行政單位的意思。

怎樣才能造成BFC

• float的值不爲none。
• overflow的值不爲visible。
• display的值爲table-cell, table-caption, inline-block中的任何一個。
• position的值不爲relative和static。

BFC的做用

1.不和浮動元素重疊

若是一個浮動元素後面跟着一個非浮動的元素，那麼就會產生一個覆蓋的現象，不少自適應的兩欄佈局就是這麼作的。好比下圖的效果，參考例子

<div style="float:left; border: 2px solid red"> 123</div>
<p style="border: 2px solid blue;display:block;overflow:hidden;*zoom:1">
The quick brown fox jumped over the  4seohunt.com lazy  dog‘s back.
The quick brown fox jumped over the lazy dog‘s back.
The quick brown fox jumped over the lazy dog‘s back.
The quick brown fox jumped over the lazy dog‘s back.
The quick brown fox jumped over the lazy dog‘s back.
</p>

2.清除元素內部浮動

只要把父元素設爲BFC就能夠清理子元素的浮動了，最多見的用法就是在父元素上設置overflow: hidden樣式，對於IE6加上zoom:1就能夠了(IE Haslayout)。

3.嵌套元素Margin邊距摺疊問題的解決

按照BFC的定義，只有同屬於一個BFC時，兩個元素纔有可能發生垂直Margin的重疊，這個包括相鄰元素，嵌套元素，只要他們之間沒有阻擋(例如邊框，非空內容，padding等)就會發生margin重疊。

所以要解決margin重疊問題，只要讓它們不在同一個BFC就好了，可是對於兩個相鄰元素來講，意義不大，沒有必要給它們加個外殼，可是對於嵌套元素來講就頗有必要了，只要把父元素設爲BFC就能夠了。這樣子元素的margin就不會和父元素的margin發生重疊了

 

常見的瀏覽器端的存儲技術有哪些？

瀏覽器端：

cookie

WebStorage(localStorage、sessionStorage)

userData

indexedDB

服務器端：

session

 

格柵系統理解：

http://www.cnblogs.com/JerryTao/p/5476027.html