摘要：中是這樣定義的屬性指定一個(gè)元素應(yīng)沿其容器的左側(cè)或右側(cè)放置，允許文本和內(nèi)聯(lián)元素環(huán)繞它。其同樣適用于設(shè)置屬性為絕對(duì)定位或固定定位的內(nèi)聯(lián)元素。至于為什么，可以理解為內(nèi)聯(lián)元素沒有盒模型，其高度由內(nèi)容決定。

白話：即上一篇我腦中飄來飄去的css魔幻屬性自己的文章推出之后，這是自己寫的第四篇CSS相關(guān)的文章，文章絕大部分是自己工作總結(jié)得來，另一部分是平日sf回答的與面試中向面試官交流學(xué)到的，都是一些比較基礎(chǔ)，刨根問底的知識(shí)分享。

我腦中飄來飄去的css魔幻屬性

我所不注意的那些CSS冷知識(shí)，卻阻止了我做項(xiàng)目的速度

關(guān)于CSS樣式動(dòng)態(tài)注入，你不知道的那些冷知識(shí)

在上一篇我腦中飄來飄去的css魔幻屬性提到浮動(dòng)不按想要的方式浮，里面提到清除浮動(dòng)其實(shí)按原理來講，就兩個(gè)：

clear：both(不準(zhǔn)確，后面會(huì)講)

觸發(fā)BFC

前面因?yàn)闆]咋搞明白，就沒有說為什么，最近因?yàn)榕既辉趕f上有人提問，就順著這個(gè)問題去搜了相關(guān)資料，找了點(diǎn)答案。

clear清除浮動(dòng)的操作，基本思路是這樣。首先為要清除浮動(dòng)的盒子引入清除元素，現(xiàn)實(shí)表現(xiàn)里一般為一個(gè)空元素或者偽元素（before,after）。設(shè)置了clear屬性后，盒子渲染時(shí)，會(huì)將這個(gè)元素的top border（上邊緣）與浮動(dòng)元素的底部對(duì)齊，來達(dá)到將盒子撐開的目的。但是這個(gè)與浮動(dòng)元素底部對(duì)齊的元素與clear設(shè)置的屬性（both,left,top）有關(guān),具體可以看W3C標(biāo)準(zhǔn)。還是很簡單易懂的。如果說的不是很明白，可以拷貝這段代碼，試一下，然后切換clear的值，就會(huì)有種恍然大悟的感覺。 如果你覺得還不夠直觀，你可以將content的“”里寫兩個(gè)字，或則加個(gè)margin,border什么的。
html 代碼

    

        這是左邊浮動(dòng)元素
    
    

        
這是右側(cè)浮動(dòng)元素
        
這是正常布局文檔流元素。
    
  

css代碼

.float-left{
  float: left;
  width: 100px;
  height: 100px;
  background-color: lightpink;
}
.clear-box{
  margin-top: 50px; //這個(gè)沒有用
  background-color: lightgreen;
  font-size: 16px;
}
.clear-box:after{
  content: "";
  display: block;
  clear: right; //both left
}
.float-right{
    width:100px;
    height:75px;
    float:left;
    background-color:red;
    border:1px solid black;
}

說BFC清除浮動(dòng)之前，得知道BFC的概念：
塊格式化上下文（Block Formatting Context，BFC） 是Web頁面的可視化CSS渲染的一部分，是布局過程中生成塊級(jí)盒子的區(qū)域，也是浮動(dòng)元素與其他元素的交互限定區(qū)域。其作用簡單來講就是，保證整個(gè)文檔流中盒子與盒子之間的布局不相互干擾，這里其實(shí)已經(jīng)很顯示的說明BFC一大功效就是清除浮動(dòng)，觸發(fā)BFC的條件詳見MDN。
至于BFC為什么可以清除浮動(dòng)，就是形成BFC的盒子，其邊框會(huì)去查詢盒子里所有的正常布局文檔流，和浮動(dòng)的文檔流，然后將盒子的底部邊緣與盒子里最底部元素的盒子邊緣對(duì)齊（這么講會(huì)不會(huì)被警察關(guān)禁閉）。與clear區(qū)別的，這種清除浮動(dòng)由于是盒子自己觸發(fā)BFC，所以只能清除盒子里面的元素，而前面可以清除同一行所有左右兩邊的浮動(dòng)。

自此，清除浮動(dòng)的原理就講完了。但在這次參加面試前，一個(gè)問題自己也一直想搞懂，浮動(dòng)是否脫離了文檔流。MDN中是這樣定義的：float CSS屬性指定一個(gè)元素應(yīng)沿其容器的左側(cè)或右側(cè)放置，允許文本和內(nèi)聯(lián)元素環(huán)繞它。該元素從網(wǎng)頁的正常流動(dòng)中移除，盡管仍然保持部分的流動(dòng)性（與絕對(duì)定位相反）。這相反指的是什么，想知道。

重點(diǎn)強(qiáng)調(diào)：設(shè)置了float屬性的元素，其display是什么屬性。答案：block。inline元素設(shè)置為float后，其width和height都變成了可設(shè)置的屬性。其原因就是設(shè)置float觸發(fā)了BFC。是inline元素變成了一個(gè)塊級(jí)盒子。其同樣適用于設(shè)置position屬性為絕對(duì)定位或固定定位的內(nèi)聯(lián)元素。

學(xué)前端的，出去面試，浮動(dòng)和盒模型是必問。這里也不再說正常盒模型（W3C）與怪異盒模型（IE）的區(qū)別，重點(diǎn)談padding。

首先是說說單位。一般來說設(shè)定盒子某一屬性，有如下幾種單位可以設(shè)置：

padding ：20%；

padding ：2em；

padding ：5px;(最常見的)

padding ：2vh；

padding ：2rem;

px,vh,vw,rem這些絕對(duì)單位很好理解，但如果是em和%,你是否足夠留意，其是根據(jù)誰來作為參照來計(jì)算的。首先%，直接看代碼和效果圖：

 

     
這是子元素
 
    
.big{
  height:200px;
  width:1000px;
  background-color: yellowgreen;
}
.big .small{
  width:50%;
  height:50%;
  margin-top:5%;
  margin-left:5%;
  border-top: 5px solid red;
  border-left: 5px solid red;
  padding-top: 5%;
  padding-left: 5%;
  background-color: #0e8cf6;
}

從上面的圖可以看出，margin,padding無論是top還是left設(shè)置為5%都是50,算下來就是以父級(jí)元素的寬度來作為參照的。不要問為啥border不能設(shè)置百分比，我不知道，我也沒這種需求。
再看一下以em為單位是以誰做參照，HTML與上面一致，上css代碼：

.big{
  height:200px;
  width:1000px;
  font-size: 14px;
  background-color: yellowgreen;
}
.big .small{
  width:50%;
  height:50%;
  margin-top:2em;
  margin-left:2em;
  border-top: 5px solid red;
  border-left: 5px solid red;
  padding-top: 2em;
  padding-left: 2em;
  font-size: 20px;
  background-color: #0e8cf6;
}

從計(jì)算樣式盒子可以看出，margin,padding無論是top還是left設(shè)置為2em都是以元素自身的font-size來計(jì)算的，所以和百分比又不一樣。

如果知道這些，UI需求是讓你在一個(gè)盒子里畫一個(gè)正方形盒子，你就很自然的會(huì)想到。用padding的百分比特性來做。
如果再多想一些，當(dāng)我們用css3特性來做位移比如：transform：translate（50%，50%）,其又是相對(duì)誰來計(jì)算呢？這里直接給出答案：其參照值是元素本身的長和寬，和前面padding又不一樣。

自己寫了一年css,其實(shí)一直只關(guān)注了設(shè)置border-box與content-box盒子模型時(shí)padding表現(xiàn)的差別。但這個(gè)盒子的零點(diǎn)，及子元素固定定位相對(duì)的零點(diǎn)在哪里呢？還是先看代碼和效果圖：

    

        
        
這是絕對(duì)定位子元素
    
 

.small .normal{
  height:40px;
  background-color: #999;
}
.small .position{
  position: absolute;
  width: 90%;
  height:30px;
  //top:0; 
  //left:0;
  background-color: white;
}

上面是三幅圖，分別代表三種狀態(tài)。通過不斷遞進(jìn)，我們就可以回答上面那個(gè)問題了。其實(shí)不是padding-bottom仍然起作用，準(zhǔn)確來說是padding-bottom與padding-top都會(huì)起作用，只是起作用只是從表現(xiàn)上起作用，但并不占據(jù)文檔流。怎么理解？第一：父元素黃綠色背景區(qū)域的高度和子元素內(nèi)容高度一致，說明padding高度并沒有被計(jì)算在內(nèi)；第二：父元素沒有加margin-top來占位時(shí)，padding-top那塊區(qū)域是不可見的，所以內(nèi)聯(lián)元素padding是沒有在正常文檔流的。至于為什么，可以理解為內(nèi)聯(lián)元素沒有盒模型，其高度由內(nèi)容決定。由于其沒有盒模型，所以沒法控制padding-top和padding-bottom。

sf上面有這樣一個(gè)提問：為什么設(shè)置display:inline后，padding-bottom仍然起作用？如果一般看過css基礎(chǔ)知識(shí)的人，都知道內(nèi)聯(lián)元素設(shè)置margin-top、bottom,padding-top、bottom是不起作用的，所以日常開發(fā)，我們一般不會(huì)用這兩個(gè)屬性,要用時(shí)更多也是把內(nèi)聯(lián)元素轉(zhuǎn)換為inline-box。重現(xiàn)問題：

    
1505
    
計(jì)科
  

#fu{
  //  margin-top: 20px;
  //  background-color: yellowgreen;
}
#fu p{
  display: inline;
  margin: 20px;
  padding: 20px;
  border: 5px solid transparent;
  background-color: #0e8cf6;
}

上面四張圖片，分別展示了絕對(duì)定位時(shí)，設(shè)置top，left與不設(shè)置的差別。不設(shè)置時(shí)，其文檔流開始的起點(diǎn)是正常文檔流的位置，而設(shè)置了top，left的地方，其起點(diǎn)是父元素（padding+content）區(qū)域零點(diǎn)的位置。以上效果和父元素設(shè)置不設(shè)置box-sizing: border-box屬性無關(guān)，表現(xiàn)一致。

這一波面試，談css的技術(shù)面試官，基本都會(huì)提怎么垂直水平居中。這確實(shí)是一個(gè)老生常談的問題，以致于我越往后，回答的越含糊，如果你還不知道，可以看看這篇文章。基本就四種：table,flex,translate,定位加margin：auto。最后這一種很少人聽說，但在居中盒子長寬值確定時(shí)，適用性確實(shí)很高。具體怎么操作呢：

 

        

            這是一個(gè)居中
        
 

.item{
  width: 500px;
  height: 500px;
  position: relative;/*關(guān)鍵設(shè)置*/
  background-color: #999;
}  
.item-center{
    position: absolute; /*關(guān)鍵設(shè)置，也可fixed*/
    top:0; /*關(guān)鍵設(shè)置*/
    bottom: 0;/*關(guān)鍵設(shè)置*/
    left:0;/*關(guān)鍵設(shè)置*/
    right:0;/*關(guān)鍵設(shè)置*/
    height:300px;/*關(guān)鍵設(shè)置，也可其他單位*/
    width: 300px;/*關(guān)鍵設(shè)置，也可其他單位*/
    margin: auto;/*關(guān)鍵設(shè)置*/
    background-color: yellowgreen;
    border: 5px solid darkgray;
}  

上面的效果圖，可以看到這種水平垂直居中方案也是666啊，前提是width,height必須顯示設(shè)定，只兼容IE8+，其同樣也適用于position：fixed的情況，具體視UI需求。我們通常只知道針對(duì)于塊級(jí)元素，如果其定寬，可以使用margin：0 auto；來水平居中的，那這里又用auto實(shí)現(xiàn)了垂直居中，怎么實(shí)現(xiàn)的？本來想好好寫的，可又看見我張老師已經(jīng)做了一次剖析，自己只能仰望，獻(xiàn)上地址。基本上從兩個(gè)方面解釋，能稍微解釋同：
1：left,right,top,bottom設(shè)置為0，那么就說明item-center這個(gè)盒子，是會(huì)填滿整個(gè)父級(jí)容器item的；
2：margin：auto 默認(rèn)只會(huì)計(jì)算左右邊距，所以上下如果設(shè)置為auto時(shí)默認(rèn)是0；但對(duì)于脫離了正常文檔流的定位元素，這個(gè)auto對(duì)于上下也是有效的，會(huì)自動(dòng)均分左右兩邊的距離。所以這個(gè)盒子已經(jīng)顯示設(shè)定寬高，那么margin就會(huì)自動(dòng)計(jì)算均分，達(dá)到居中的效果。

下面是一些零碎的經(jīng)驗(yàn)分享，寫出來共勉。

字體圖標(biāo)出現(xiàn)以后，其實(shí)精靈圖的很多實(shí)用場景就被取代了，前端切圖仔又可以好好安心寫代碼了。但使用字體圖標(biāo)圖標(biāo)還是有需要注意的地方，比如上方那張圖，從正常到不正常（字體邊框模糊），其實(shí)也就是font-weight設(shè)置的問題，由于font的繼承性關(guān)系，所以很容易出現(xiàn)問題,所以字體圖標(biāo)樣式初始化的時(shí)候?qū)ont-style與weight置為important還是很有必要的。

.ued-components{

font-family:"fe-components" !important;  //引用字體圖標(biāo)庫
font-size:16px;
font-style:normal !important;  //設(shè)置字體樣式
font-weight:normal !important;  //設(shè)置字體加粗程度
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

}



以上是一個(gè)用css3 animation 做的一個(gè)演示動(dòng)畫，如果仔細(xì)看，可以感覺到那種車速和檔位不匹配的那種感覺，就是抖、抖、抖，看一下css代碼的實(shí)現(xiàn)：

.logo-animate {
    position: relative;
    line-height: 0;
    width: 240px;
    animation: move-float 8s linear 0s infinite;
}

@keyframes move-float {
    0% {
        margin-top:0;
    }
    50% {
        margin-top:-22px;
    }
    100% {
        margin-top:0;
    }
}

在過往依賴jQuery的animate做圖片輪播和列表輪播時(shí)，習(xí)慣于用margin來做位移。但是用純css來做得時(shí)候，發(fā)現(xiàn)實(shí)現(xiàn)有明顯的卡頓。后面一查看了一篇文章，發(fā)現(xiàn)css的animation實(shí)現(xiàn)最好依賴于transform來做，避免使用height,width,margin,padding等，具體原因在前面文章中有提到。所以代碼優(yōu)化一下，就是下面這樣：

@keyframes move-float {
    0% {
        transform: translate(95px, 0);
    }
    50% {
        transform: translate(95px, -22px);
    }
    100% {
        transform: translate(95px, 0);
    }
}  

一張比較官方的圖,出自HTML：

如上圖展示的那樣，當(dāng)我文字過多時(shí)，需要截?cái)辔淖郑褂檬÷蕴?hào)來保證正常的顯示效果。用css的實(shí)現(xiàn)基本都是下面這段代碼：

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;  

但是遇到table的情況，盡管你設(shè)置了td的width屬性，但還是不起作用。這是因?yàn)閠able布局的流體屬性，其會(huì)根據(jù)內(nèi)容再重新分配空間，所以還需要加上一個(gè)table-layout：fixed 這樣的屬性設(shè)置。其實(shí)除了單行可以用css做文字截取，多行也可以，只是在兼容性上和效果上還不足以在線上環(huán)境來使用。但是實(shí)現(xiàn)思路還是可以看一看：

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;  

SS擴(kuò)展屬性，該方法適用于WebKit瀏覽器及移動(dòng)端，但是要想做到兼容及顯示效果完美，還是用css配合js來做，單行css來做已足夠，但記得設(shè)置title屬性，保證hover能讀到完整的信息。        

作為一個(gè)寫CSS不到兩年的前端，在工作中吃了很多基礎(chǔ)不扎實(shí)的虧。學(xué)CSS也不如JS那樣簡單，知識(shí)成體系，所以除了看完一本CSS基礎(chǔ)知識(shí)的書以外，更多的還是寫、寫、寫，然后思考，嘗試用不同的思路來解決。