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

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

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

我所不注意的那些CSS冷知識，卻阻止了我做項目的速度

關于CSS樣式動態注入，你不知道的那些冷知識

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

clear：both(不準確，后面會講)

觸發BFC

前面因為沒咋搞明白，就沒有說為什么，最近因為偶然在sf上有人提問，就順著這個問題去搜了相關資料，找了點答案。

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

    

        這是左邊浮動元素
    
    

        
這是右側浮動元素
        
這是正常布局文檔流元素。
    
  

css代碼

.float-left{
  float: left;
  width: 100px;
  height: 100px;
  background-color: lightpink;
}
.clear-box{
  margin-top: 50px; //這個沒有用
  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清除浮動之前，得知道BFC的概念：
塊格式化上下文（Block Formatting Context，BFC） 是Web頁面的可視化CSS渲染的一部分，是布局過程中生成塊級盒子的區域，也是浮動元素與其他元素的交互限定區域。其作用簡單來講就是，保證整個文檔流中盒子與盒子之間的布局不相互干擾，這里其實已經很顯示的說明BFC一大功效就是清除浮動，觸發BFC的條件詳見MDN。
至于BFC為什么可以清除浮動，就是形成BFC的盒子，其邊框會去查詢盒子里所有的正常布局文檔流，和浮動的文檔流，然后將盒子的底部邊緣與盒子里最底部元素的盒子邊緣對齊（這么講會不會被警察關禁閉）。與clear區別的，這種清除浮動由于是盒子自己觸發BFC，所以只能清除盒子里面的元素，而前面可以清除同一行所有左右兩邊的浮動。

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

重點強調：設置了float屬性的元素，其display是什么屬性。答案：block。inline元素設置為float后，其width和height都變成了可設置的屬性。其原因就是設置float觸發了BFC。是inline元素變成了一個塊級盒子。其同樣適用于設置position屬性為絕對定位或固定定位的內聯元素。

學前端的，出去面試，浮動和盒模型是必問。這里也不再說正常盒模型（W3C）與怪異盒模型（IE）的區別，重點談padding。

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

padding ：20%；

padding ：2em；

padding ：5px;(最常見的)

padding ：2vh；

padding ：2rem;

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

 

     
這是子元素
 
    
.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設置為5%都是50,算下來就是以父級元素的寬度來作為參照的。不要問為啥border不能設置百分比，我不知道，我也沒這種需求。
再看一下以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;
}

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

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

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

    

        
        
這是絕對定位子元素
    
 

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

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

sf上面有這樣一個提問：為什么設置display:inline后，padding-bottom仍然起作用？如果一般看過css基礎知識的人，都知道內聯元素設置margin-top、bottom,padding-top、bottom是不起作用的，所以日常開發，我們一般不會用這兩個屬性,要用時更多也是把內聯元素轉換為inline-box。重現問題：

    
1505
    
計科
  

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

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

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

 

        

            這是一個居中
        
 

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

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

下面是一些零碎的經驗分享，寫出來共勉。

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

.ued-components{

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

}



以上是一個用css3 animation 做的一個演示動畫，如果仔細看，可以感覺到那種車速和檔位不匹配的那種感覺，就是抖、抖、抖，看一下css代碼的實現：

.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做圖片輪播和列表輪播時，習慣于用margin來做位移。但是用純css來做得時候，發現實現有明顯的卡頓。后面一查看了一篇文章，發現css的animation實現最好依賴于transform來做，避免使用height,width,margin,padding等，具體原因在前面文章中有提到。所以代碼優化一下，就是下面這樣：

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

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

如上圖展示的那樣，當我文字過多時，需要截斷文字，使用省略號來保證正常的顯示效果。用css的實現基本都是下面這段代碼：

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

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

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

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

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