問題來源：http://markyun.github.io/2015/Front-end-Developer-Questions/
二、CSS
1、介紹一下標準的CSS的盒子模型？與低版本IE的盒子模型有什么不同的？
答：標準的CSS盒子模型：寬度=內容的寬度+邊框的寬度+內邊距寬度
低版本的盒子模型：指的是內容的寬度
2、CSS選擇符有哪些？哪些屬性可以繼承？
答：（1）類選擇符；id選擇符；
（2）class屬性，偽類a標簽，列a表ul，li，dl，dd，dt
注：
優先級（就近原則）：!important > [ id > class > tag ]
Important 比 內聯優先級高
3、CSS優先級算法如何計算？
答：元素選擇符：0,0,0,1
一個class選擇符：0,0,1,0
一個id選擇符：0,1,0,0
一個元素標簽：1,0,0,0,
注： 注意：
（1）!important聲明的樣式優先級最高，如果沖突再進行計算。
（2）如果優先級相同，則選擇最后出現的樣式。
（3）繼承得到的樣式的優先級最低。
4、CSS3新增偽類有那些？
答：p:first-of-type 選擇屬于其父元素的首個元素的每個元素。
p:last-of-type 選擇屬于其父元素的最后元素的每個元素。
p:only-of-type 選擇屬于其父元素唯一的元素的每個元素。
p:only-child 選擇屬于其父元素的唯一子元素的每個元素。
p:nth-child(2) 選擇屬于其父元素的第二個子元素的每個元素。
:enabled :disabled 控制表單控件的禁用狀態。
:checked 單選框或復選框被選中。
5、如何居中div？如何居中一個浮動元素？如何讓絕對定位的div居中？
答：居中div：
margin：0 auto
浮動元素的居中：
（1）父級div設置固定寬度，加上margin：0 auto，子級div浮動
（2）在table中插入div，div設置浮動，在table上設置margin：0 auto，而table不要設置寬度。
絕對定位的居中：
（1）外層的相對定位的大div用margin：0 auto；然后這個絕對定位用left或者top來調。
6、display有哪些值？說明他們的作用。
答：常用的（顯示）：
inline（默認）--內嵌
none--隱藏
block--塊顯示
table--表格顯示
list-item--項目列表
7、position的值relative和absolute定位原點是？
答：static（默認）：按照正常文檔流進行排列
relative（相對定位）參照父級的原始點為原始點，無父級則以BODY的原始點為原始點
absolute(絕對定位)原點：離自己這一級元素最近的一級postion的父元素的左上角，參照瀏覽器的左
上角，配合left，right，top，bottom。
8、CSS3有哪些新特性？
答：（1）選擇器
（2）RGBA和透明度
（3）多欄布局 ：background-origin（圖片定位區域）：content-box/padding-box/border-box
（4）多背景圖：background-image：url...，url...
（5）word-wrap（對長的不可分割單詞換行）word-wrap：break-world
（6）文字陰影：text-shadow： 5px 5px 5px #FF0000;（水平陰影，垂直陰影，模糊距離，陰影顏色
）
（7）font-face屬性：定義自己的字體，@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9+ */
}
div
{
font-family:myFirstFont;
}
（8）圓角（邊框半徑）：border-radius 屬性用于創建圓角
（9）邊框圖片：border-image:url(border.png) 30 30 round;
（10）盒陰影：box-shadow: 10px 10px 5px #888888;
（11）盒子大小：background-size(圖片尺寸大小)：63px 100px；background-repeat：no-repeat；
（設置百分比是拉伸）；
（12)媒體查詢：定義兩套css，當瀏覽器的尺寸變化時會采用不同的屬性。
（13）語音
9、請解釋一下CSS3的Flexbox（彈性盒布局模型）,以及適用場景？
答：稱為彈性盒布局模型是css3規范中的一種新的布局方式，該布局模型的目的是提供一種更加高效的
方式來對容器中的條目進行布局、對齊和分配空間。在傳統的布局方式中，block 布局是把塊在垂直方
向從上到下依次排列的；而 inline 布局則是在水平方向來排列。彈性盒布局并沒有這樣內在的方向限
制，可以由開發人員自由操作。
試用場景：彈性布局適合于移動前端開發，在Android和ios上也完美支持
10、用純CSS創建一個三角形的原理是什么？
答：首先，需要把元素的寬度、高度設為0。然后設置邊框樣式。
{
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid #ff0000;
border-bottom: 40px solid transparent;
}
11\一個滿屏 品 字布局 如何設計?
答：第一種（真正的品字）思路：
（1）三塊高寬是確定的；
（2）上面那塊用margin: 0 auto;居中；
（3）下面兩塊用float或者inline-block不換行；
（4）用margin調整位置使他們居中。
第二種（全屏的品字布局）
基本思路：上面的div設置成100%，下面的div分別寬50%，然后使用float或者inline使其不換行。
12、常見兼容性問題？
答：（1）問題一：不同瀏覽器的標簽默認的margin和padding不同
hack：*{margin:0;padding:0;}
（2）問題二：塊屬性標簽float后，又有橫行的margin情況下，在IE6顯示margin比設置的大
hack：display:inline;將其轉化為行內屬性
（3）問題三：設置較小高度標簽（一般小于10px），在IE6，IE7，遨游中高度超出自己設置高度
hack：給超出高度的標簽設置overflow:hidden;或者設置行高line-height 小于你設置的高度
13、li與li之間有看不見的空白間隔是什么原因引起的？有什么解決辦法？
答：因為代碼之間的間距造成的
解決方法：（1）浮動li中float：left
（2）在ul中用font-size：0（谷歌不支持）；可以使用letter-space：-3px
14、為什么要初始化CSS樣式。
答：每一個html標簽都有自己的默認樣式，而css就是可以改變html的樣式。但是對于大量div設置就很
麻煩，所以初始化樣式很重要。
15、absolute的containing block計算方式跟正常流有什么不同？
答：position屬性：normalflow（一般流）；containing block（包含塊）；bfc（）；margin
collapse（float引起元素塌陷）；base line（基線對齊）
一個元素盒子的位置和大小有時是通過相對于一個特定的長方形來計算的，這個長方形就被稱之為元
素的 containing block。
<HTML>
<HEAD>
<TITLE>Illustration of containing blocks</TITLE>
</HEAD>
<BODY id="body">
<DIV id="div1">
<P id="p1">This is text in the first paragraph…</P>
<P id="p2">This is text <EM id="em1"> in the
<STRONG id="strong1">second</STRONG> paragraph.</EM></P>
</DIV>
</BODY>
</HTML>
產生盒子的元素 其包含塊 C.B.（正常計算）
body initial C.B. (UA-dependent)
div1 body
p1 div1
p2 div1
em1 p2
strong1 p2
如果我們按如下方式放置 em1：
#div1 { position: absolute; left: 50px; top: 50px }
#em1 { position: absolute; left: 100px; top: 100px }
containing blocks 變成如下：
產生盒子的元素 其 包含塊C.B. 為
body initial C.B.
div1 initial C.B.
p1 div1
p2 div1
em1 div1
strong1 em1
16、CSS里的visibility屬性有個collapse屬性值是干嘛用的？在不同瀏覽器下以后什么區別？
答：當一個元素的visibility屬性被設置成collapse值后，對于一般的元素，它的表現跟hidden是一樣
的。
（1）谷歌瀏覽器中，使用collapse值和使用hidden沒有區別。
（2）火狐，opera和IE，使用collapse值和使用display：none沒有什么區別，下面的內容會補充他的
內容。
17、position跟display、margin collapse、overflow、float這些特性相互疊加后會怎么樣？
答：display屬性規定元素應該生成的框的類型；position屬性規定元素的定位類型；float屬性是一種
布局方式，定義元素在哪個方向浮動。類似于優先級機制：position：absolute/fixed優先級最高，有
他們在時，float浮動不起作用，display值需要調整。浮動或者absolute定位的元素，只能是塊元素或
表格。
18、對BFC規范(塊級格式化上下文：block formatting context)的理解？
答：定位方案：（1）普通流（normal flow）按照html中的先后位置至上而下布局，行內元素水平排列
，當前行被占滿后換行，塊級元素會被渲染為完整的新行。
（2）浮動（floats）
元素首先按照普通流位置出現，然后根據浮動的方向盡可能的向左向右偏移，與印刷的文本環繞相似。
（3）絕對定位（absolute position）
絕對定位中，元素會整體脫離普通流
BFC正是屬于普通流，因此對兄弟元素也不會造成什么影響。
具有 BFC 的元素可以看作是隔離了的獨立容器，容器里面的元素不會在布局上影響到外面的元素，并
且 BFC 具有普通容器沒有的一些特性。
浮動元素，絕對定位元素，display，overflow會觸發BFC。
特性：（1）會阻止外邊距折疊
（2）會包含浮動元素
（3）阻止元素被浮動元素覆蓋
19、CSS權重優先級是如何計算的？
答：標簽的權重為1，class權重為10，id的權重為100.避免權重相同的發生。
20、請解釋一下為什么會出現浮動和什么時候需要清除浮動？清除浮動的方式
答：（1）出現浮動之后，我們可以很好的進行頁面布局
（2）在非IE瀏覽器（如Firefox）下，當容器的高度為auto，且容器的內容中有浮動（float為left或
right）的元素，在這種情況下，容器的高度不能自動伸長以適應內容的高度，使得內容溢出到容器外
面而影響（甚至破壞）布局的現象。這個現象叫浮動溢出，為了防止這個現象的出現而進行的CSS處理
，就叫CSS清除浮動
（3）第一種方式是不對浮動的文本和圖像進行清理，而是選擇浮動容器div：
第二種方式：利用overflow屬性。應用值為hidden或auto的overflow屬性有一個有用的副作用，這會自
動清理包含的任何浮動元素
第三種方式：結合使用:after偽類和內容聲明在指定的現有內容的末尾添加新的內容：
.clear:after {
content:".";
height:0;
visibility:hidden;
display:block;
clear:both;
}
<div class="news clear">
...
</div>
21、移動端的布局用過媒體查詢嗎？
答：通過媒體查詢可以為不同大小和尺寸的媒體定義不同的css，適應相應的設備的顯示
@media screen and （min-width：400px）and （max-width：700px）{...}
22、使用 CSS 預處理器嗎？喜歡那個？
答：預處理器：less，sass等等（給css像其他程序語言一樣，加入一些編程元素，讓css能像其他程序
語言一樣做一些預定的處理，然后就有了css預處理器）喜歡Sass，less，stylus。Sass 是采用 Ruby
語言編寫的一款 CSS 預處理語言
李：$color:red
.test{
color：$color;s
}
執行結果：
.test{
color：red;
}
(1)Sass 語法
$font-stack: Helvetica, sans-serif //定義變量
$primary-color: #333 //定義變量
body
font: 100% $font-stack
color: $primary-color
(2)SCSS 語法
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
編譯出來的 CSS
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
23\CSS優化、提高性能的方法有哪些？
答：（1）避免過度約束
// 糟糕
ul#nav{..}
// 好的
#nav{..}
（2）后代選擇符不好
html div tr td {..}
（3）避免鏈式選擇符
// 糟糕
.menu.left.icon {..}
// 好的
.menu-left-icon {..}
（4）使用復合（緊湊）語法
// 糟糕
.someclass {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
padding-right: 10px;
background: #000;
background-image: url(../imgs/carrot.png);
background-position: bottom;
background-repeat: repeat-x;
}
// 好的
.someclass {
padding: 20px 10px 20px 10px;
background: #000 url(../imgs/carrot.png) repeat-x bottom;
}
（5）避免不必要的命名空間
// 糟糕
.someclass table tr.otherclass td.somerule {..}
//好的
.someclass .otherclass td.somerule {..}
（6）避免不必要的重復
.someclass {
color: red;
background: blue;
font-size: 15px;
}
.otherclass {
color: red;
background: blue;
font-size: 15px;
}
// 好的
.someclass, .otherclass {
color: red;
background: blue;
font-size: 15px;
}
（7）最好使用表示語義的名字。一個好的類名應該是描述他是什么而不是像什么
（8）避免！important，可以選擇其他選擇器
（9）盡可能的精簡規則，你可以合并不同類里的重復規則
24、瀏覽器是怎樣解析CSS選擇器的？
答：而在 CSS 解析完畢后，需要將解析的結果與 DOM Tree 的內容一起進行分析建立一棵 Render
Tree，最終用來進行繪圖。在建立 Render Tree 時（WebKit 中的「Attachment」過程），瀏覽器就要
為每個 DOM Tree 中的元素根據 CSS 的解析結果（Style Rules）來確定生成怎樣的 renderer。
25、在網頁中的應該使用奇數還是偶數的字體？為什么呢？
答：使用的是偶數字體。偶數字號相對更容易和 web 設計的其他部分構成比例關系。Windows 自帶的
點陣宋體（中易宋體）從 Vista 開始只提供 12、14、16 px 這三個大小的點陣，而 13、15、17 px
時用的是小一號的點陣（即每個字占的空間大了 1 px，但點陣沒變），于是略顯稀疏。
26、margin和padding分別適合什么場景使用？
答：何時使用margin：（1）需要在border外側添加空白
（2）空白處不需要背景色
（3）上下相連的兩個盒子之間的空白，需要相互抵消時。
何時使用padding：（1）需要在border內側添加空白
（2）空白處需要背景顏色
（3）上下相連的兩個盒子的空白，希望為兩者之和。
兼容性的問題：在IE5 IE6中，為float的盒子指定margin時，左側的margin可能會變成兩倍的寬度。通
過改變padding或者指定盒子的display：inline解決。
27、抽離樣式模塊怎么寫，說出思路，有無實踐經驗？[阿里航旅的面試題]
答：。。。。。。。。。。。。。
。。。。。。
。。。。。
28、元素豎向的百分比設定是相對于容器的高度嗎？
答：PS：當按百分比設定一個元素的寬度時，它是相對于父容器的寬度計算的。
豎向距離的屬性，如padding-top,padding-bottom,margin-top,margin-bottom等，當按百分比設定它
們時，依據的也是父容器的寬度，而不是高度。
29、全屏滾動的原理是什么？用到了CSS的那些屬性？
答：（1）原理：方法一是整體的元素一直排列下去，假設有5個需要展示的全屏頁面，那么高度是500%
，只是展示100%，剩下的可以通過transform進行y軸定位，也可以通過margin-top實現
（2）overflow：hidden；
transition：all 1000ms ease；
30、什么是響應式設計？響應式設計的基本原理是什么？如何兼容低版本的IE？
答：（1）響應式網站設計(Responsive Web design)的理念是：集中創建頁面的圖片排版大小，可以智
能地根據用戶行為以及使用的設備環境（系統平臺、屏幕尺寸、屏幕定向等）進行相對應的布局。
（2）基本原理: 媒體查詢 @media
（3）兼容IE可以使用JS輔助一下來解決
31、視差滾動效果，如何給每頁做不同的動畫？（回到頂部，向下滑動要再次出現，和只出現一次分別怎么做？）
答：。。。。。。。。。。。。。。。。。。。。。。。。。。。
。。。。。。。。。。。。。今天就看到這里
文章列表
留言列表
