塊級元素與內聯元素

原由：

在模擬大衆點評時，發現佈局紊亂的問題圖片一直到不了我理想的位置。詢問組長後，知道問題多是關於塊元素和內聯元素的；

內聯元素：

定義：只佔據它對應標籤的邊框所包含的空間。只能容納文本或者其餘內聯元素元素。

代碼：

效果：

塊級元素：

定義：佔據其父元素（容器）的整個空間，所以建立了一個「塊」。一般瀏覽器會在塊級元素先後另起一行。能容納其餘塊元素或者內聯元素。

代碼：

效果：

區別：

塊元素	內聯元素
老是在新行上開始	和其餘元素在一行
能容納其餘塊元素或者內聯元素	只能容納文本或其餘內聯元素
高度，行高以及頂和底邊距均可以控制	高，行高及頂和底邊距不可改變

注：塊元素寬度默認是它容器的100%，除非設定一個寬度。

塊級元素和內聯元素之間的轉換：

1.display  
塊元素默認display:block;行內非替換元素(a,span)默認爲display：inline;行內替換元素(input)默認爲display:inline-block;  
display:none;不顯示該元素，也不會保留該元素原先佔有的文檔流位置。  
display:block;轉換爲塊級元素。  
display:inline;轉換爲行內元素。  
display:inline-block;轉換爲行內塊級元素。  
2.float  
當把行內元素設置完float:left/right後，該行內元素的display屬性會被賦予block值，且擁有浮動特性。行內元素去除了之間的莫名空白。  
3.position  
當爲行內元素進行定位時，position:absolute與position:fixed.都會使得原先的行內元素變爲塊級元素。

總結：

1.遇到問題本身能夠先試30分鐘左右，若是仍是不行的話必定要請教他人，由於我將近40分鐘沒解決的問題學長一會就給我弄好了。但也千萬不要遇到問題就問必定也要先思考，不然就算你問了也記不深入，還浪費了兩我的的時間。
2.作事要規範。
3.最重要的事必定要學會表述問題。

版權聲明
本文保留全部權利，版權歸河北工業大學夢雲智軟件開發團隊全部。未經團隊及做者事先書面贊成,您不得以任何方式將文本內容進行商業性使用或經過信息網絡傳播文本內容。本文做者：李友學