終於可以知道視覺表現的實現方式，而不是一個一個的具體實現了，突然感到自己能夠把握頁面的整體布局了呢，似乎學到了表現背後的東西？

以下是一個突然發現自己見識如此少的女漢子的嘶吼

啊啊啊，剛剛註意到width設置的是內容區的寬度，增加 padding 或 margin 後會增加總體寬度

啊啊啊啊，今天才知道只有內容區和左右外邊距可以設置為 auto ！！！！

1 相關術語

• 流 ： 所有元素都被放置在流中， 頁面在顯示時， 元素一個一個的流到屏幕上， 當然也有脫離流的情況。如果一個元素浮動或定位，那麽它就會從流裏脫離出來

• 非替換元素 ： 如段落，還是用例子比較好

• 替換元素 ： 如圖片

• 塊級元素 ： 段落、標題、 div 等，流入後會產生一個換行。 使用 display: block; 可以讓元素生成塊級框

• 行內元素 ： strong 、 span 等， 不會換行。 使用 display : inline; 可以讓元素生成一個框

• 根元素 ： html
  
  

2 auto

2.1　橫向：只有內容區 width 以及左右外邊距可以設為 auto

• 一個 auto ： 會占用所有剩余空間

• 兩個auto ： 一般是外邊距，則內容區居中

• 三個auto ： margin 為 0， 內容區會盡量占據到最寬

2.2　縱向 ： 只有內容區 height 以及上下外邊距可以設為 auto

• 正常流中上下外邊距設置為 auto 會自動計算為 0 ，而不是像橫向那樣居中
  
  

3 margin

　　在 padding 、 margin 、 border 中只有 margin 可以設為負值，而且要註意，margin 設為負值時要滿足 padding + margin + border 的總和為父元素的 width， 這是十分重要的。

　　沒錯，這個我之前也不知道....鬼知道為嘛我會漏了這麽多重要的知識點沒學....還好現在補起來了，感謝權威指南~~

4 顯示角色轉換

• 想要將列表元素作為一個橫條用豎線隔開的導航條

  display: inline; 

　　再為所有列表元素加上右邊框，第一個列表元素加上左邊框即可

• 將幾個鏈接放到 div 中，想要布局為垂直邊欄

  display: block;

　　再增加些樣式即可顯示為漂亮的豎直導航欄

• 在一行中想要插入一個塊結構

  display: inline-block;

　　會把外觀類似於一個豎直導航條的東西插到行中，如果沒有設置這個塊的 width ，會自適應為一行

• run-in

  display: run-in;

　　當然，使用這個是有限制的，只有其後的一個元素為塊級元素時，才會轉換為那個塊級元素開始處的行內元素。

　　似乎不太支持，我測試的時候只有 IE 和 Safari 成功了，chrome、 Opera、Firefox 均不支持

END~~~≥ω≤

視覺表現理論知識