1. css實(shí)現(xiàn)文字省略（...）效果?
- 代碼一（用于非表格li或span等都可以）
<style type="text/css">
.text-zn{
display:block;/*內(nèi)聯(lián)對(duì)象需加*/
width:31em;
word-break:keep-all; /*不換行 */
white-space:nowrap; /*不換行 */
overflow:hidden; /*內(nèi)容超出寬度時(shí)隱藏超出部分的內(nèi)容 */
text-overflow:ellipsis;/*當(dāng)對(duì)象內(nèi)文本溢出時(shí)顯示省略標(biāo)記(...);需與overflow:hidden;一起使用侦讨。*/
}
</style>
<p class="text-zn">測試數(shù)據(jù)測試數(shù)據(jù)測試數(shù)據(jù)測試數(shù)據(jù)測試數(shù)據(jù)測試數(shù)據(jù)測試數(shù)據(jù)測試數(shù)據(jù)測試數(shù)據(jù)測試數(shù)據(jù)測試數(shù)據(jù)測試數(shù)據(jù)測試數(shù)據(jù)</p>
- 代碼二（用于表格）
table{
width:30em;
table-layout:fixed;/*只有定義了表格的布局算法為fixed带猴，下面td的定義才能起作用毁菱。*/
}
td{
width:100%;
word-break:keep-all; /*不換行 */
white-space:nowrap; /*不換行 */
overflow:hidden; /*內(nèi)容超出寬度時(shí)隱藏超出部分的內(nèi)容 */
text-overflow:ellipsis;/*當(dāng)對(duì)象內(nèi)文本溢出時(shí)顯示省略標(biāo)記(...);需與overflow:hidden;一起使用秧了。*/
}
2. 左側(cè)固定赃泡，右側(cè)自適應(yīng)
- 方法一(浮動(dòng)布局)
<div class="left-box-1">
<ul>
<li>首頁</li>
<li>列表管理</li>
<li>用戶管理</li>
<li>權(quán)限管理</li>
</ul>
</div>
<div class="right-box-1">
內(nèi)容頁面內(nèi)容頁面內(nèi)容頁面內(nèi)容頁面內(nèi)容頁面內(nèi)容頁面內(nèi)容頁面內(nèi)容頁面內(nèi)容頁面內(nèi)容頁面內(nèi)容頁面內(nèi)容頁面內(nèi)容頁面內(nèi)容頁面內(nèi)容頁面內(nèi)容頁面內(nèi)容頁面內(nèi)容頁面
</div>
.left-box-1{
float: left;
width: 200px;
background-color: #f00;
}
.right-box-1{
margin-left:200px;
background-color: #00f;
}
- 方法二(定位布局)
<div class="left-box-2">
<ul>
<li>首頁</li>
<li>列表管理</li>
<li>用戶管理</li>
<li>權(quán)限管理</li>
</ul>
</div>
<div class="right-box-2">
內(nèi)容頁面內(nèi)容頁面內(nèi)容頁面內(nèi)容頁面內(nèi)容頁面內(nèi)容頁面內(nèi)容頁面內(nèi)容頁面內(nèi)容頁面內(nèi)容頁面內(nèi)容頁面內(nèi)容頁面內(nèi)容頁面內(nèi)容頁面內(nèi)容頁面內(nèi)容頁面內(nèi)容頁面內(nèi)容頁面
</div>
.left-box-2{
float: left;
width: 200px;
background-color: #f00;
}
.right-box-2{
position: absolute;
top:0;
left: 200px;
right: 0;
bottom: 0;
background-color: #00f;
}
- 方法三（flex）方法三存在兼容性問題余舶，需要注意兔簇！有興趣同學(xué)可以閱讀阮一峰老師的flex教程
<div class="container">
<div class="left-box-3">
<ul>
<li>首頁</li>
<li>列表管理</li>
<li>用戶管理</li>
<li>權(quán)限管理</li>
</ul>
</div>
<div class="right-box-3">
內(nèi)容頁面內(nèi)容頁面內(nèi)容頁面內(nèi)容頁面內(nèi)容頁面內(nèi)容頁面內(nèi)容頁面內(nèi)容頁面內(nèi)容頁面內(nèi)容頁面內(nèi)容頁面內(nèi)容頁面內(nèi)容頁面內(nèi)容頁面內(nèi)容頁面內(nèi)容頁面內(nèi)容頁面內(nèi)容頁面
</div>
</div>
.container{
width: 100%;
display: flex;
}
.left-box-3{
flex: 0 0 200px;
background-color: #f00;
}
.right-box-3{
flex: 1;
background-color: #00f;
}
3.margin 重疊問題
<div class="m-b-10" id="box1">
1111
</div>
<div class="m-t-20" id="box2">
<div class="m-t-40" id="box3">
3333
</div>
</div>
.m-b-10{
margin-bottom:10px;
}
.m-t-20{
margin-top:20px;
}
.m-t-40{
margin-top: 40px;
}
問題：
- box1和box2的間距是多少发绢？
兄弟級(jí)的塊之間，margin這個(gè)屬性上下邊距垄琐，經(jīng)常會(huì)發(fā)生重疊的情況边酒，以數(shù)值大的為準(zhǔn)，而不會(huì)相加狸窘。所以間距為：20px; - box1和box3的間距是多少墩朦？
父子級(jí)的塊之間，子級(jí)的上下margin會(huì)與父級(jí)上下margin重疊翻擒，以數(shù)值大的為準(zhǔn)氓涣，而不會(huì)相加。所以間距為：40px;
詳細(xì)介紹可參考
4. css 盒模型
CSS中Box model是分為兩種: W3C標(biāo)準(zhǔn) 和 IE標(biāo)準(zhǔn)盒子模型陋气。
大多數(shù)瀏覽器采用W3C標(biāo)準(zhǔn)模型劳吠，而IE中則采用Microsoft自己的標(biāo)準(zhǔn)。
怪異模式是“部分瀏覽器在支持W3C標(biāo)準(zhǔn)的同時(shí)還保留了原來的解析模式”巩趁，怪異模式主要表現(xiàn)在IE內(nèi)核的瀏覽器痒玩。
當(dāng)不對(duì)doctype進(jìn)行定義時(shí)，會(huì)觸發(fā)怪異模式议慰。
在標(biāo)準(zhǔn)模式下蠢古，一個(gè)塊的總寬度= width + margin(左右) + padding(左右) + border(左右)
在怪異模式下，一個(gè)塊的總寬度= width + margin(左右)（即width已經(jīng)包含了padding和border值）
CSS3的box-sizing
box-sizing語法：
box-sizing ： content-box || border-box || inherit;
當(dāng)設(shè)置為box-sizing:content-box時(shí)别凹，將采用標(biāo)準(zhǔn)模式解析計(jì)算草讶，也是默認(rèn)模式；
當(dāng)設(shè)置為box-sizing:border-box時(shí)炉菲，將采用怪異模式解析計(jì)算堕战；
5. 移動(dòng)端 css實(shí)現(xiàn)頁面正方形布局
實(shí)現(xiàn)主要應(yīng)用padding-bottom（或padding-left）屬性值等于width（或height）來實(shí)現(xiàn)等邊長的矩形（即正方形）坤溃。
- 一種實(shí)現(xiàn)：設(shè)置width相對(duì)百分比，padding-bottom取值等于height践啄。
<body>
<div class="square"></div>
</body>
body{
margin:0;
padding:0;
background:#FFFBCD;
}
.square{
width:30%;
padding-bottom:30%;
margin-top:10%;
margin-left:10%;
background:#0000FF;
}
- 另一種實(shí)現(xiàn)：設(shè)置height相對(duì)百分比浇雹，padding-left取值等于height。
<body>
<div class="square"></div>
</body>
body{
margin:0;
padding:0;
background:#FFFBCD;
}
.square{
height:30%;
padding-left:30%;
margin-top:10%;
margin-left:10%;
background:#0000FF;
}
6. 多行文本垂直水平居中
- display:table的方法
<div class="middle-box">
<div class="middle-inner">
<p>前端開發(fā)</p>
</div>
</div>
.middle-box{
display: table;
height: 300px;
}
.middle-inner{
display: table-cell;
vertical-align:middle;
text-align:center;
}
兼容問題解決(相對(duì)定位和絕對(duì)定位組合)
.middle-inner {
position: absolute;
top:50%;
}
.middle-inner p {
position: relative;
top: -50%;
}
ie hack
.middle-box{
display: table;
height: 300px;
border:1px solid #ff0000;
width:400px;
margin:0 auto;
position:relative;
}
.middle-inner{
display: table-cell;
vertical-align:middle;
*position:absolute;
*top:50%;
*left:50%;
width:100%;
text-align:center;
}
.middle-inner p{
position:relative;
*top:-50%;
*left:-50%;
}
- 增加一個(gè)空白標(biāo)簽
<div class="middle-box">
<p><span class="suc-tip">前端開發(fā)</span></p>
<i class="visible"></i>
</div>
.middle-box{
height:300px;
border: 1px solid #f00;
width: 400px;
margin: 0 auto;
text-align: center;
}
.middle-box p{
vertical-align: middle;
display: inline-block;
*display: inline;
*zoom: 1;
}
.visible{
height: 100%;
vertical-align: middle;
width: 0;
display: inline-block;
}
7. css 全稱是什么屿讽？
英文全稱：Cascading Style Sheets
層疊樣式表 是一種用來表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)子集）等文件樣式的計(jì)算機(jī)語言。
8. css3相關(guān)問題吠裆，比如應(yīng)用過哪些css3的方法伐谈，如何實(shí)現(xiàn)等高布局及使用css3實(shí)現(xiàn)加載中（loading）的效果等。
css3教程
