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標籤就沒有發生任何改變

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

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