文本布局

單行文本垂直居中
使用 line-height = height

{
  height: 50px;
  line-height: 50px;
}
補(bǔ)充：芳芳說：固定像素的width和height是給不會(huì)css的人準(zhǔn)備的
{
  line-height:50px;
  padding-top:4px;
  padding-bottom:4px;
}

使用定位來垂直居中demo
如果元素width、height設(shè)定，使用具體值；

使用負(fù)magin

如果元素width、height未設(shè)定，使用transform

transform+postion

Paste_Image.png

多行文本垂直居中

使用dispay:table-cell

使用display:flex

關(guān)于vertical-align的擴(kuò)展閱讀--張?chǎng)涡?/a>

省略文字

• 單行省略

Paste_Image.png

.ellipsis {
  width: 100px;// 兼容部分瀏覽器
  overflow: hidden;
  white-space: nowrap;//文本不會(huì)換行，文本會(huì)在在同一行上繼續(xù)，直到遇到 <br> 標(biāo)簽為止
  text-overflow: ellipsis;//規(guī)定當(dāng)文本溢出包含元素時(shí)發(fā)生的事情
}

• 多行文本省略

  
  
  Paste_Image.png

overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

該方法方法合適WebKit瀏覽器或移動(dòng)端（絕大部分是WebKit內(nèi)核的）瀏覽器
參考

背景樣式

默認(rèn)情況下，背景區(qū)域覆蓋的范圍是元素內(nèi)容 + 內(nèi)邊距 + 邊框。(不包括margin)

驗(yàn)證...

可以看出背景顏色并沒有挨著外盒邊，而是留出margin為5px的邊距。所以默認(rèn)的背景區(qū)的覆蓋覆蓋范圍不包括margin。
此處margin-top為啥沒作用？

• background-image 用于給元素設(shè)置一張或多張背景圖

-    background-image: url(../images/bg.png);
-    background-image: linear-gradient(#ddd, #fff); /* 漸變背景 */
-    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR......GRiIvPjwvZz48L3N2Zz4=);

關(guān)于第三種可用此工具轉(zhuǎn)成base64
各個(gè)參數(shù)說明：

• background-position
  CSS Sprites（CSS 精靈 | 雪碧圖）（已用過，不必贅述）
  CSS Sprites 是指將多張圖片（一般是小圖標(biāo)）合成一張大圖，不同元素共用這張大圖作為背景圖，并給這些的元素設(shè)置相應(yīng)的 background-position 值，在達(dá)到預(yù)期顯示效果的同時(shí)，減少 HTTP 請(qǐng)求數(shù)的一種前端優(yōu)化手法。

• background-size 用于設(shè)定背景圖片的大小。IE9 以下不支持
  作為背景圖，是作為容器的一個(gè)屬性存在的，并不是作為容器的內(nèi)容，寬高padding這類以外的屬性，其他的一般并不能撐開容器。所以要設(shè)置該容器的width、height 。如果為了能讓圖片占據(jù)整個(gè)容器，也需要設(shè)置圖片的width、height ;但是最簡(jiǎn)單的方法是設(shè)置contain值。

• cover 縮放背景圖片以完全覆蓋背景區(qū)，可能背景圖片部分看不見

• contain 縮放背景圖片以完全裝入背景區(qū)，可能背景區(qū)部分空白。

• 100% 等數(shù)值

//某乎上的logo正確示范
.logo {
 margin: 0 auto;
 width: 160px;
 height: 74px;
 background: url(/logo.png) no-repeat;
 background-size: contain;

• **background-clip ** 屬性用于設(shè)置元素背景區(qū)域覆蓋的范圍。
• border-box
  覆蓋至邊框的最外圍
• padding-box
  覆蓋至內(nèi)邊距的最外圍
• content-box
  僅覆蓋元素內(nèi)容區(qū)域

目前還未用到，待補(bǔ)充...

邊框樣式

• 過時(shí)的css三角形 ( 現(xiàn)在都用css三角形生成器 )

  
  
  step1:寬高為0

step2:borde-bottom去掉

step3:左右兩邊變透明

• border-radius 屬性用于給元素添加圓角。(但是低版本的IE不支持)