塊狀標籤行內標籤的區別
對於很多新人學習前端在html和css上面關於預設樣式了解不是很明白，我今天就來說下我的經驗。
塊級標籤（標準盒子）
1.預設寬度100%（所在容器內容的寬度），獨佔一行，預設兩個 塊級標籤不能在同一行併排排列。
2.可以給塊狀標籤設定寬高（width/height）
3.塊標籤可以設定margin左右是auto，這樣塊標籤會在容器水平居中的位置
行內標籤（類似於文字）
1.行內標籤預設寬度auto（自身內容撐開的寬度），不會獨佔一行，預設兩個行內標籤會在同一行併排展示
2.行內標籤設定寬高無效
3.行內標籤不具備margin左右是auto控制水平居中的效果，但是可以通過讓其所在容器設定text-align：center；把其作為文字水平居中
行內塊級標籤（同事具備行內標籤和塊級標籤的某些特點）
1.繼承行內標籤特點，寬高預設是auto（內容撐開），預設同一行併排排列
2.繼承了塊級標籤的特點，寬高可以手動設定
3.水平居中也是靠所在容器text-align：center控制
display
對齊方案
1.第一種水平對齊方案：讓原色變為行內塊級標籤
display：inline-block
問題：會把每乙個原色之間的換行和空格當做白元素（也相當於文字），導致元素和元素之間存在間隙，我們需要取消這個間隙
解決方案：讓其所在父容器的文字大小為零，這樣可以讓空白文字不佔任何位置，即可解決（為了防止當前元素字型也沒大小，還需要單獨設定）
2.第二種水平對齊方案：基於浮動方式實現水平排列
float：left / right
問題：預設情況下，子元素當做內容會撐開父元素的高度（因為盒子的高度預設是auto）；但是一旦子元素設定浮動，則當前浮動的元素脫離文件流（和父元素不在同乙個平面中了），導致父元素的高度變為零；
解決方案：給父元素末尾追加乙個虛擬元素，並且設定celer：both 屬性，來清除子元素浮動對父元素的影響
塊級標籤，行內標籤，行內塊標籤
行內元素 塊標籤行內塊標籤 巢狀規則 塊級元素 獨佔一行，對寬高的屬性值生效 如果不給寬度，塊級元素就預設為瀏覽器的寬度，即就是100 寬 行內元素 可以多個標籤存在一行，對寬高屬性值不生效，完全靠內容撐開寬高！行內塊元素 結合的行內和塊級的優點，不僅可以對寬高屬性值生效，還可以多個標籤存在一行顯示...
行內標籤的實現
在最近的專案中需要實現行內標籤，我原來覺得挺簡單的後來,後來試了很多方式發現並沒有那麼簡單。比如想到的幾種實現方式和最終的效果如下圖，本著辛苦我乙個方便千萬家的思想，我把我的tagutil抽取出來了，並上傳到github上了。1.首先需要乙個tag的布局檔案 2.手動的填充布局檔案，生成乙個text...
前端之標籤分類塊標籤和行內標籤
一 塊級元素 1 塊級元素的特徵 1 塊級元素獨佔一行，之後的元素也只能另起一行，相鄰的兩個塊級元素不能共用一行。2 塊級元素其元素的高度，寬度，行高和頂部底部邊距都是可以設定的。3 元素的寬度如果不設定的話，預設為父元素的寬度。4 塊級元素對應的屬性為display block 2 常見塊級元素 ...