1、簡要描述CSS中content屬性的作用
content屬性與:before及:after僞元素配合使用，來插入生成內容，可以在元素之前或之後放置生成的內容。可以插入文本、圖像、引號，並可以結合計數器爲頁面元素插入編號。
2、過渡與動畫的區別是什麼？
過渡屬性transition可以在一定的事件內實現元素的狀態過渡爲最終狀態，用於模擬一種過渡動畫效果，但是功能有限，只能用於製作簡單的動畫效果；
動畫屬性animation可以製作類似Flash動畫，通過關鍵幀控制動畫的每一步，控制更爲精確，從而可以製作更爲複雜的動畫。
3、多元素水平居中
main{
text-align:center;
}
div{
display:inline-block;
*display:inline;/*hack IE*/
*zoom:1;/*hack IE*/
}
/*
在IE下，display: inline-block只是觸發了元素的layout。比如將display: inline-block設置到div上，只能保證這個div擁有塊元素的特徵（可以設置寬度，高度等），但還是會產生換行。接下來要設置 display: inline，使其不產生換行。將display:inline-block;*display:inline;寫在同一個樣式上，inline- block屬性是不會觸發元素的layout的，因此我們還要額外加上 *zoom:1來觸發layout。
*/
/*
但是要注意的是，display:inline-block元素間會產生多餘空白（本題沒有涉及）。解決方法：父元素定義font-size:0 去掉行內塊元素水平方向空白；子元素定義vertical-align 屬性去掉行內塊元素垂直方向空白。
*/
4、未知高度多行文本垂直居中
<div class="mask">
<div class="dialog">
未知寬高元素窗口水平垂直居中(拖動右下角改變寬高)"
</div>
</div>.container{
position: fixed;
left: 0;
top:0;
height: 100%;
width: 100%;
text-align: center;
}
.mask:after{
content: " ";
display: inline-block;
vertical-align: middle;
height: 100%
}
.dialog{
display: inline-block;
border: 3px solid lightblue;
}
/*
box 容器通過 after或者before 生成一個高度 100% 的「備胎」，他的高度和容器的高度是一致的，相對於「備胎」垂直居中，在視覺上表現出來也就是相對於容器垂直居中了
*/5、超出文字用省略號
li{
white-space:nowrap;
overflow:hidden;
text-overflow: ellipsis;
} 6、css分欄
<div id="div1">
當春風再一次吹拂她的臉龐時，那場讓她刻骨銘心的失戀已在煦風輕揚的季節淡去了。她一點點地恢復，彷彿重生一般，花兒般的笑顏又重新浮上了她的臉龐。而他，看到她康復的樣子，高興極了，但他卻不會講什麼，依舊如故，默默地陪在她身旁。他愛她，就包括愛她的一切缺點。這樣做，他並不覺得有失尊嚴。他認爲既然愛了，就應該無怨無悔。而她，覺得開始有點喜歡上了他，有些依賴他。但她認爲，離愛還很遙遠。<br/>
轉眼她和他都要畢業了，她甚至沒有徵求他的意見，就直接去了北方的一座城市，而他，卻追隨着她也到了這裏。本來，在南方那座城市，他的家人早已給他聯繫好了一家不錯的公司，但他連想都沒想就拒絕了。她和他分別進了不同的公司。同在一個陌生的城市打工，難免心神俱疲，這個時候，她就很想找一個依靠，給她一點家的溫暖。明明知道他一直願意做她的依靠，可她卻不願意把自己的一生交付於他，因爲她覺得自己一直不愛他，不愛，又如何依靠，再說，他也不能提供給她想像中的生活。
</div>
<hr/>
<div id="div2">
當春風再一次吹拂她的臉龐時，那場讓她刻骨銘心的失戀已在煦風輕揚的季節淡去了。她一點點地恢復，彷彿重生一般，花兒般的笑顏又重新浮上了她的臉龐。而他，看到她康復的樣子，高興極了，但他卻不會講什麼，依舊如故，默默地陪在她身旁。他愛她，就包括愛她的一切缺點。這樣做，他並不覺得有失尊嚴。他認爲既然愛了，就應該無怨無悔。而她，覺得開始有點喜歡上了他，有些依賴他。但她認爲，離愛還很遙遠。<br/>
轉眼她和他都要畢業了，她甚至沒有徵求他的意見，就直接去了北方的一座城市，而他，卻追隨着她也到了這裏。本來，在南方那座城市，他的家人早已給他聯繫好了一家不錯的公司，但他連想都沒想就拒絕了。她和他分別進了不同的公司。同在一個陌生的城市打工，難免心神俱疲，這個時候，她就很想找一個依靠，給她一點家的溫暖。明明知道他一直願意做她的依靠，可她卻不願意把自己的一生交付於他，因爲她覺得自己一直不愛他，不愛，又如何依靠，再說，他也不能提供給她想像中的生活。
</div>#div1{
-moz-column-count:2;
-webkit-column-count:2;
}
#div2{
border:6px solid orange;
padding:6px;
text-align:justify;
-moz-column-width:20em;
-moz-column-gap:3em;
-moz-column-rule:6px solid blue;
-webkit-column-width:20em;
-webkit-column-gap:5em;
-webkit-column-rule:6px solid blue;
}
8、左側div固定寬度，右側div自適應
<!--html-->
<div class="left">左邊的內容</div>
<div class="right">
<div class="right_content">右邊的內容</div>
</div>
<!--css-->
.left{width:200px;float:left;margin-right:-200px;background: #00ca57;}
.right{width:100%;float:left;}
.right_content{margin-left:200px;background: #269abc;}<div class= "container">
<div class="left"></div>
<div class="rigth"></div>
</div>
<style>
/*方法一： BFC(塊級格式化上下文)*/
.container{
width:1000px;height:400px;border: 1px solid red;
}
.left{
width:200px;height:100%;background: gray;
float: left;
}
.rigth{
overflow:hidden; /* 觸發bfc */
background: green;
}
/*方法二： flex佈局 */
.container{
width:1000px;height:400px;border:1px solid red;
display:flex; /*flex佈局*/
}
.left{
width:200px; height:100%;background:gray;
flex:none;
}
.right{
height:100%;background:green;
flex:1; /*flex佈局*/
}
/* 方法三： table佈局 */
.container{
width:1000px;height:400px;border:1px solid red;
display:table; /*table佈局*/
}
.left{
width:200px; height:100%;background:gray;
display:table-cell;
}
.right{
height:100%;background:green;
display: table-cell;
}
/*方法四： css計算寬度calc*/
.container{
width:1000px;height:400px;border:1px solid red;
}
.left{
width:200px;height:100%;background:gray;
float:left;
}
.right{
height:100%;background:green;
float:right;
width:calc(100% - 200px);
}
</style>