Width Height -- (1)

Width和Height應該是我們學習CSS時，最先接觸到的屬性了，一寬一高。

我們知道頁面當中的標簽分為塊級元素和行內元素，它們最大的區別就在於，塊級元素可以設置寬高，行內元素不能設置寬高。

舉例說明，我們塊級元素、行內元素各舉一例

塊級元素我們以div為例，div標簽是我們編寫頁面最常用的標簽了，我們稱它為盒子。定義寬高在它身上甚至有種親切的感覺。

<div></div>

div{
    border:1px solid black;
}

給div一個邊框我們可以看見它，否則即使標簽出來了，也是透明的(行內塊元素除外)

可以看到，div是塊級元素，塊級元素獨占一行，所以在未設置寬高的時候，我們看到的是一條直線。

行內元素我們以span為例，span標簽被稱為行內標簽，在它當中寫入的內容也會在同一行顯示

<span></span>

span{
    border: 1px solid black;
}

行內元素是沒有寬高的，他們的寬高是由其中的文本決定

我們一開始看到的是預設文本大小的高度，行內元素可以多個元素同占一行，所以寬為零，我們能看到的是與文本等高的一條豎線

一開始我們說到，行內元素和塊級元素最大的區別就是行內元素不能設置寬高，塊級元素可以設置寬高。設置寬高是改變元素占位大小的過程，使我們可以隨心所欲的去佈置頁面，實現我們對頁面的美化。

下麵我們來看看行內元素和塊級元素在規定寬高時是什麼樣子。

首先是塊級的div

<div></div>

div{
  border: 1px solid black;
  width: 200px; /* 寬 */
  height: 200px; /* 高 */
}

我們可以看到，div的形狀從原先的一條從左到右的直線，變成了現在的矩形

由此可見塊級元素是接受寬高屬性所發生的改變的。

接下來是行內元素中的span

<span></span>

span{
    border: 1px solid black;
    width: 200px; /* 寬 */
    height: 200px; /* 高 */
}

span標簽就沒有發生任何改變

所以說行內元素是不接受寬高屬性所發生的改變的。

寬高是我們排版佈局的最重要的手段，一定要好好學習哦:)