此次筆記內容主要為盒子模型製作中遇到的問題及解決方法。二、display：inline-block水平對不齊
三、float和inline-block的區別
四、去除超連結的下劃線
解析首先區分一下塊級元素和行內元素的區別
因為塊級元素是占領一整行，所以我們可以用兩種方法解決：float或display：inline-block
塊級元素特點：
行內元素特點：
float標籤
浮動可以理解為讓某個div元素脫離標準流，漂浮在標準流之上，和標準流不是乙個層次。
設定浮動後，假如某個div元素a是浮動的，如果a元素上乙個元素也是浮動的，那麼a元素會跟隨在上乙個元素的後邊(如果一行放不下這兩個元素，那麼a元素會被擠到下一行）；如果a元素上乙個元素是標準流中的元素，那麼a的相對垂直位置不會改變，也就是說a的頂部總是和上乙個元素的底部對齊。（靠近頁面邊緣的一端是前，遠離頁面邊緣的一端是後。）
舉例：設定div2右浮動
設定div2、div3左浮動
設定div2、div3、div4左浮動
設定div2、div3、div4右浮動
display標籤
屬性值
為了不讓div元素獨佔一行，需要使用display：inline標籤使其擁有不換行特性，但是display：inline不能設定高寬，所以使用display：inline-block使其保持不換行特性，又可以設定高寬屬性。
vertical—align標籤
屬性值：top 頂線, middle 中線,baseline 基線, bottom 底線（只在元素屬於inline或inline-block時才起作用）
1.inline文字元素預設對齊方式為baseline
2.inline-block空元素對齊方式為bottom
如圖inline-block對齊方式為邊框下邊緣
設定vertical—align：top後
相同之處：在某程度上達到一樣的效果
區別：float的侷限性
從圖可以看出浮動的侷限性在於，若要元素排滿一行，換行後還要整齊排列，就要子元素的高度一致才行，不然就會出現圖一的效果，而inline-block就不會。
inline-block間隙問題
a.間隙產生的原因
間隙的產生是換行引起的，我們寫標籤時通常會在標籤結束符後順手打個回車，回車會產生回車符，回車符相當於空白符，通常情況下，多個連續的空白符會合併成乙個空白符，而產生「空白間隙」的真正原因就是這個讓我們並不怎麼注意的空白符。
b.去除空隙的方法
對父元素新增，，即將字型大小設為0，那麼那個空白符也變成0px，從而消除空隙
在css中設定text-decoration文字裝飾標籤
屬性值：
none：沒有裝飾（正常文字預設值）
underline：下劃線
overline：上劃線
line-through：刪除線
若要去掉下劃線則屬性值設定為none即可。
盒子模型及浮動
效果圖 效果圖 有很多的布局效果，標準流沒有辦法完成，此時就可以利用浮動布局。浮動可以讓多個塊元素一行排列顯示。網頁布局第一準則 多個塊級元素縱向排列找標準流，多個元素橫向排列找浮動 浮動特性一 浮動的元素會脫離標準流 脫標 浮動的元素會一行內顯示並且元素頂部對齊的。浮動的元素會具有行內塊元素的特性...
盒子模型及DOCTYPE文件型別
1 盒子模型簡述 盒子模型是css布局中最基本組成部分，在頁面上每個元素都以乙個矩形的表現形式存在，每個矩形由元素的內容 content 內補丁 padding 邊框 border 和外補丁 margin 組成。乙個元素的盒子模型有多大，那麼該元素在頁面中所佔的空間也將有多大。盒子模型有兩種，分別是...
盒子模型及box sizing的理解
部落格 盒子模型 標準盒子模型和怪異 ie 盒模型 寬度 width content內容區寬度 width 高度 height 也是內容區的高度 width 盒子的大小 margin paading border width 兩個盒子的之間的padding值的計算 上面盒子的padding bott...