1. CSS讓表格里的內(nèi)容強(qiáng)制顯示一行竖哩，超出長度顯示省略號(hào)
在寫html頁面的時(shí)候览绿，會(huì)經(jīng)常用到表格窿祥，而且很多時(shí)候一個(gè)tr里邊需要包含好幾個(gè)td，這樣就會(huì)導(dǎo)致tr的高度不一致庇麦，被撐開了计技，這時(shí)候，如果能讓td里的內(nèi)容強(qiáng)制顯示在一行山橄，并讓超出邊界范圍的內(nèi)容顯示點(diǎn)點(diǎn)垮媒，然后再給td加個(gè)title屬性，顯示當(dāng)前td的內(nèi)容航棱，這難道不是最理想的結(jié)果嗎
.table{ ?table-layout:?fixed; ?}
.td{ ?text-overflow:?ellipsis; ? overflow:?hidden; ? white-space:?nowrap; ? ?}
備注：
1睡雇、table-layout需要設(shè)置為fixed，用來固定表格布局,（這個(gè)屬性非常非常有用饮醇，對(duì)于提升頁面性能它抱，這樣就不會(huì)每次當(dāng)表格寬度變化的時(shí)候自適應(yīng)td寬度。） 當(dāng)然給每個(gè)td加寬度也可以朴艰，但是顯然沒有前者更高效
2观蓄、white-space需要設(shè)置為nowrap混移，用來強(qiáng)制不換行
3、overflow設(shè)置為hidden侮穿，內(nèi)容溢出的時(shí)候不顯示
4歌径、text-overflow設(shè)置為ellipsis， 內(nèi)容溢出的時(shí)候亲茅，溢出部分顯示為...
PS:還有小伙伴是在td里面加了個(gè)div沮脖，對(duì)div設(shè)置樣式：style="width:200px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;"
2.文字隱藏小技巧
text-indent:-999px; ?overflow:hidden;
首先將 文字?jǐn)D出去，因?yàn)?text-indent 是負(fù)的縮進(jìn)芯急，所以，縮緊著就把它們給移除固定位置了驶俊，再然后娶耍，將所有的溢出元素都隱藏起來，就達(dá)到了將button上的文字隱藏的效果了饼酿。
但這個(gè)是有弊端的榕酒，具體可看文章：慎用text-indent的負(fù)值。
3. 慕課網(wǎng)實(shí)戰(zhàn)宣傳頁面里header中的布局-logo
先來看一下效果吧故俐，某個(gè)高手的響應(yīng)式開發(fā)教程想鹰，但慕課網(wǎng)是專業(yè)的，我是簡化的药版，只是在學(xué)習(xí)它的一點(diǎn)點(diǎn)布局辑舷。（感覺自己哪兒哪兒都是缺口，只能補(bǔ)一點(diǎn)是一點(diǎn)啦）
這個(gè)是經(jīng)典布局咯槽片，左邊是圖片logo何缓，緊接著是不同的選項(xiàng)卡，在后面是搜索框还栓，還有最后才是賬號(hào)相關(guān)的信息碌廓。而且，點(diǎn)擊小頭像時(shí)剩盒，會(huì)出現(xiàn)用戶的相關(guān)信息谷婆。看了下它的源碼辽聊，記錄如下：
左邊logo：建站過過程中朋友喜歡把網(wǎng)站名稱用H1表示,但從美觀考慮纪挎，要用logo圖片來代替h1，這時(shí)需要隱藏h1內(nèi)的這段文字身隐，但又不能對(duì)搜索引擎不友好廷区，否則就失去了定義h1標(biāo)簽的意義。在CSS中如何以圖代字贾铝，參考文章CSS技巧: CSS隱藏文字的方法(CSS text-indent: -9999px;)
.hide-text { ?text-indent: 100%; ?white-space: nowrap; ?overflow: hidden; ?}
再為a鏈接加上 display:block ; height & width ; 就足夠啦隙轻，哈哈~
4. 慕課網(wǎng)實(shí)戰(zhàn)宣傳頁面里header中的布局-Nav
5. 慕課網(wǎng)實(shí)戰(zhàn)宣傳頁面里header中的布局-登錄模塊
登錄模塊分為三個(gè)部分埠帕，購物車，提醒和登錄玖绿。
購物車的模塊其實(shí)也比較復(fù)雜啦敛瓷，特別是當(dāng)鼠標(biāo)滑上去的時(shí)候，就可以看到下方多了一個(gè)框框斑匪。
具體的代碼是這樣的，在這個(gè)li里面蚀瘸，a和div都是存在的狡蝶。只是div被隱藏了屋确。
提醒模塊就比較簡單啦舀患。只是要去學(xué)習(xí)icon及小圖標(biāo)。
icon頭上的小圖標(biāo)攻晒，原理很簡單寂嘉，就是設(shè)置父元素相對(duì)定位奏瞬，標(biāo)簽元素絕對(duì)定位，然后相對(duì)于父元素偏移到右上角泉孩。
登錄模塊的邏輯與購物車模塊相似硼端，都是鼠標(biāo)滑過出現(xiàn)div框框。但在這個(gè)框框里寓搬，信息會(huì)更多一點(diǎn)呢珍昨，其中需要注意的有 圓形的用戶頭像，還有句喷，列表挨著邊兒的時(shí)候曼尊，沒有margin-right啦。
position:absolute時(shí)脏嚷，right為0骆撇，top為100%，為什么會(huì)出現(xiàn)100%呢父叙？首先top（bottom）神郊、 left（right）的百分比的相對(duì)值分別是相對(duì)于包含塊的高度、寬度的趾唱。而這個(gè)g-user-card便是相對(duì)于set的底部開始的呢涌乳，也是說，這個(gè)定位絕對(duì)了它的右對(duì)齊甜癞。但不可以寫top為0夕晓，否則會(huì)將頭像覆蓋到。但可以不寫悠咱，不過寫了明顯規(guī)范蒸辆。具體可以參考這篇討論征炼。
巧用CSS選擇器，這樣就可以實(shí)現(xiàn)margin-right為0 啦躬贡。?.g-user-card .user-center-box ul li:nth-child(2n) { margin-right: 0px; }
直接在 a 的里面為 img 設(shè)置寬高相同并border-radius為50%谆奥，便有了圓形頭像；而且拂玻，border值給一個(gè)呢酸些，margin-right給一個(gè)，float為left檐蚜，就OK啦魄懂。
6. 慕課網(wǎng)實(shí)戰(zhàn)宣傳頁面里header中的布局-搜索模塊
7. 慕課網(wǎng)實(shí)戰(zhàn)宣傳頁面里header--WebFont
看到慕課網(wǎng)的代碼里不斷重復(fù)::after。于是闯第，我茫然了逢渔。再次總結(jié)下after，clear吧：
.clear是選擇器乡括，在class設(shè)置元素樣式為clear； after是個(gè)偽元素智厌，.clear:after是在class為clear的元素后面加入新內(nèi)容诲泌。clearfix:after{clear:both;content:".";display:block;height:0; 是用來清除浮動(dòng)用的。又看到這篇文章铣鹏，講述clear：after的重要性敷扫。眼睛有點(diǎn)酸痛了，有機(jī)會(huì)了再看這篇文章吧诚卸。
在代碼中葵第，我發(fā)現(xiàn)一個(gè)小i就可以得到一個(gè)小圖標(biāo)，于是合溺，我又茫然了卒密。查看代碼也不過是看到這些：.sz-search:before{ content:"\e910"; }
搜索了一下下，發(fā)現(xiàn)有小伙伴問了css中icon font 的每一個(gè)icon的編碼是怎么來的棠赛？具體的解答可以參考這篇文章哮奇。同事補(bǔ)充上面的那個(gè)問題，偽元素實(shí)際上在html dom中不存在睛约，但會(huì)被瀏覽器渲染成html的一個(gè)節(jié)點(diǎn)鼎俘。#twitter:before，就是在#twitter這個(gè)標(biāo)簽里的開始處插入了一個(gè)子元素（節(jié)點(diǎn)）辩涝，同理贸伐，:after是在該元素的最后插入子元素。
簡單說捉邢，就是在css中使用font-face引用這個(gè)字體文件脯丝。比如慕課網(wǎng)的源碼中確實(shí)有這個(gè)代碼：
font-family:'XXX';/* 給你的自定義WebFont命名 */歌逢，比如慕課網(wǎng)將其命名為sz巾钉，也就是 “實(shí)戰(zhàn)”。它的好處是不必再使用css spirit切圖了秘案，而且作為矢量圖可以以任意你想要的尺寸顯示砰苍，另外，這種方法兼容性很好（ie6 7 可以顯示阱高，前提是你為不同的瀏覽器準(zhǔn)備了不同的字體文件格式赚导，如eot、woff赤惊、ttf吼旧、svg）。
但unicode編碼顯然不如html的class或者id語義化未舟。因此圈暗，就又有了如下的突破：
我想我似乎知道了 ：before的故事。
據(jù)說比較好用的字體庫有icomoon.io呢裕膀。
還有 box-sizing：border-box员串，之前似乎都沒有用過。"定義 box-sizing: content-box; 時(shí)昼扛，瀏覽器對(duì)盒模型的解釋遵從我們之前認(rèn)識(shí)到的 W3C 標(biāo)準(zhǔn)寸齐，只有width；定義 box-sizing: border-box; 時(shí)抄谐，瀏覽器對(duì)盒模型的解釋與 IE6 相同渺鹦，包括了border和padding。 "?
