1.1兩種基本的盒模型
block型別：這種盒模型的元素不會佔據一行，允許通過css為display屬性提供了block和inline兩個屬性值，用於改變html元素預設的盒模型，例如**如下：css設定寬度、高度。例如
、元素。
inline元素：這種盒模型的元素不會佔據一行（預設允許在一行放置許多元素），即使通過
css設定高度和寬度也不會起作用。例如,。
div元素一
div元素一
span元素一
span元素二
1.2 none值和
vivibility
屬性display 屬性值可以定義為
none
，用於設定目標物件隱藏，其占用的頁面空間也會釋放，與此類似的還有
visibility
屬性，該屬性也可以對目標物件設定是否顯示。與
dispaly
屬性不同，當通過
visibility
屬性隱藏某個
html
元素後，該元素占用的頁面空間依然會被保留。
visibility
屬性的兩個值為
hidde
和visible
，分別用於控制目標物件的隱藏和顯示。
通過diaplay來控制
通過visibility來控制
1.3 inline-block型別的盒模型
css還提供了一種
inline-block
型別的盒模型，通過為
display
屬性設定
inline-block
即可實現這種盒模型，他是
inline
型別和block
型別的綜合體，
inline-block
型別的元素既不會佔據一行，同時也支援通過
width
、height
指定寬度和高度。通過
inline-block
型別的盒模型可以非常方便的實現多個
div元素的並列顯示，也就是說，
inline-block
型別的盒模型可以實現多欄布局，在預設的情況下，多個
inline-block
型別的盒模型的元素將會採用底部對齊的方式，也就是它們的低端會位於同一水平線上，這可能不是多欄布局期望的結果。為了讓多個
inline-block
型別的盒模型在頂部對齊，為它們增加
vertical-align:top
；即可。
**
京東阿里巴巴
1.4 inline-table型別的盒模型
在預設的情況下，table屬於
block
型別的盒模型，該元素預設佔據一行，它的左邊不允許出現其他內容，它的右邊也不允許出現其他內容，它可以設定寬度和高度。
css為
table
元素提供了乙個
inline-table
型別的盒模型，這個盒模型允許**通過
width
、height
來改變它的寬度和高度，而且它的左邊和右邊允許出現其他內容。
前面內容
** 京東
阿里巴巴
後面內容
1.5使用
table
型別的盒模型實現**
css還為
display
提供以下屬性值：
table：將目標html
元素顯示為**。
table-caption:將目標
html
顯示設定為**標題
table-cell:將目標
html
元素顯示為單元格
table-column:將目標
html
元素顯示為**列
table-column-group:將目標
html
元素顯示為列組
table-header-group:將目標
html
元素顯示為**頭部分
table-footer-group: 將目標
html
元素顯示為**頁尾部分
table-row:將目標
html
元素顯示為**行
table-row-group:將目標
html
元素顯示為**行組
這是標題
**
京東阿里巴巴
1.6 list-iten型別的盒模型
list-item模型可以將目標元素轉換為類似
的列表元素，也可以同時在元素前面新增列表標誌。
**
1.7run-in型別的盒模型
run-in型別的盒模型的行為取決於它周圍的元素。通常瀏覽器會分為一下三種情況：
a. 如果run-in型別的元素包含乙個block
型別的元素，那麼該
run-in
型別的元素會自動轉換為
block
型別的元素。
b. 如果run-in型別的元素的相鄰兄弟元素是
block
型別的元素，那麼
rin-in
型別的元素將變成
inline
行為，被自動插入作為其兄弟元素的第乙個元素。
c. 在其他情況下，run-in 型別的元素會被當作
block
型別的元素。
run-in
block
run-in
inline
CSS布局之 盒模型與聖杯布局
盒模型 在css布局的編寫中，盒模型的概念必須要搞清楚，才能更好的體現出前端 的能力。在此之前，我們需要弄清楚幾個名詞。包含塊包含塊對於浮動元素來說，定義為最近的塊級祖先元素，但對於定位來說，情況則沒有這麼簡單，css2.1定義了一下行為 根元素 的包含塊 也稱為初始包含塊 由使用者 建立，在htm...
css學習筆記 盒模型，布局
1 外邊距疊加 當乙個元素出現在另乙個元素上面時第乙個元素的底邊距與第二個元素的上邊距發生疊加，元素被包含時也有可能會發生疊加 如果沒有內邊距和邊框 如果乙個空元素沒有內邊距和邊框本身也會發生上下邊距的疊加。只有普通文件流中塊框的垂直外邊距才會發生疊加，行內框 浮動框或絕對定位框之間的外邊距不會發生...
css 彈性盒模型Flex 布局
參考文章 flex 布局是什麼 採用flex布局的元素，稱為flex容器 flex container 簡稱 容器 它的所有子元素自動成為容器成員，稱為flex專案 flex item 簡稱 專案 容器預設存在兩根軸 水平的主軸 main axis 和垂直的交叉軸 cross axis 如下 fle...