阿里巴巴校招筆試題整理
這道題主要考察的是CSS3中的box-flex屬性以及選擇器。答案如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>box</title>
<style type="text/css">
body,div{
margin: 0;
padding: 0;
}
.box{
background-color: green;
display: -webkit-box;
display: box;
width: 100%;
}
.item:first-child{
width: 200px;
height: 80px;
margin:10px;
background-color: yellow;
}
.item:nth-child(2){
background-color: red;
height: 80px;
-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;
}
.item:last-child{
background-color: orange;
height: 80px;
-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;
margin:10px;
}
/*這裡貌似如果.box設定了左右padding，分配寬度的時候不會減掉左右padding的部分，相當於忽略了padding效果*/
</style>
</head>
<body>
<div>
<div>column 1</div>
<div>column 3</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>html5</title>
</head>
<body>
</body>
<header></header>
<nav></nav>
<div>
<aside></aside>
<section></section>
</div>
<footer></footer>
</body>
</html>
請寫出至少5個html5新增的標籤，並說明其語義和應用場景。
答案如下（該題答案眾多，僅貼出其中一種答案）：
canvas 標籤定義圖形，比如圖表和其他影象。這個 HTML 元素是為了客戶端向量圖形而設計的。它自己沒有行為，但卻把一個繪圖 API 展現給客戶端 JavaScript 以使指令碼能夠把想繪製的東西都繪製到一塊畫布上。
command 標籤定義命令按鈕，比如單選按鈕、複選框或按鈕。
datalist 標籤定義可選資料的列表。與 input 元素配合使用，就可以製作出輸入值的下拉列表。
details 標籤定義元素的細節，使用者可進行檢視，或通過點選進行隱藏。與 legend 一起使用，來製作 detail 的標題。該標題對使用者是可見的，當在其上點選時可開啟或關閉 detail。
hgroup 標籤用於對網頁或區段（section）的標題進行組合。
mark主要用來在視覺上向用戶呈現那些需要突出的文字。mark標籤的一個比較典型的應用就是在搜尋結果中向用戶高亮顯示搜尋關鍵詞。
<!DOCTYPE html>
<html>
<head>
<title>阿里巴巴2014校招筆試題第10題</title>
<meta charset="UTF-8" />
<style type="text/css">
body,div,h1 {
margin:0;
padding:0;
}
.header {
width:auto;
background-color:red;
}
.sidebar {
width:200px;
background-color:green;
float: left;
}
.content {
width:auto;
background-color:blue;
}
@media screen and (max-width: 600px) {
.sidebar {
width:auto;
float: none;
}
/*拉伸瀏覽器寬度至600px以下可看到變化*/
}
</style>
</head>
<body>
<div class='header'>
<h1>header</h1>
</div>
<div class="sidebar">
<h1>sidebar</h1>
</div>
<div class="content">
<h1>content</h1>
</div>
</body>
</html>
有一個頁面區塊如圖所示，請用符合語義化的標籤書寫HTML程式碼。
<div>
<h4> 店鋪動態評分 <span>與同行業相比</span> </h4>
<ul>
<li> 描述相符： <a href="" target="_blank"> <em title="4.8">4.8</em> <span title=""> <b></b> <em>16.14%</em> </span> </a> </li>
<li> 服務態度： <a href="" target="_blank"> <em title="4.8">4.8</em> <span title=""> <b></b> <em>13.32%</em> </span> </a> </li>
<li> 發貨速度： <a href="" target="_blank"> <em title="4.8">4.8</em> <span title=""> <b></b> <em>29.57%</em> </span> </a> </li>
</ul>
</div>
在CSS樣式中常使用px、em兩種長度單位，各有什麼優劣，在表現上有什麼區別？
答案如下（答案不完整）：
px畫素(Pixel)，相對長度單位，畫素px是相對於顯示器螢幕解析度而言的(引自CSS2.0手冊)；em是相對長度單位，相對於當前物件內文字 的字型尺寸，如當前對行內文字的字型尺寸未被人為設定，則相對於瀏覽器的預設字型尺寸(引自CSS2.0手冊)。
請列舉所知道的css選擇器，並說明怎麼判斷優先順序？
答案如下（搬運+自己的理解）：
1. 標籤選擇器如 div{}
2. 類選擇器，如 .className{}
3. id選擇器，如 #idName{}
4. 後代選擇器，如 .polaris span img{}，後代選擇器實際上是使用多個選擇器加上中間的空格來找到具體的要控制的標籤。
5. 群組選擇器，如 div,span,img{}，群組選擇器實際上是對CSS的一種簡化寫法，只不過把有相同定義的不同選擇器放在一起，省了很多程式碼。
6. 偽類選擇器，如 div:first-child{}，偽類選擇器就好像是給元素添加了一個幻象類，並根據這個類新增相應的樣式，與類選擇器不同，偽類選擇器的類名都是固定的，且以“ ： ”開頭。
7. 偽元素選擇器，如 h2:first-letter{}，偽元素選擇器就好像是在元素中添加了一個偽元素，比如這裡可以理解 成<h2><h2:first-letter>F</h2:first-letter>irst< /h2>，但實際上卻是<h2>First</h2>。
一般而言，選擇器越特殊，它的優先順序越高。也就是選擇器指向的越準確，它的優先順序就越高。
SS的“偽類”和“偽元素”有什麼區別？請舉例偽元素的幾種應用場景。
答案如下：
偽類和偽元素的區別在Q7也講的差不多了，可以參見Q7。
（應用場景沒找到合適的資料）
轉載於:https://my.oschina.net/fuckBAT/blog/316653