CSS元素分類

快級元素：在html中<div>,<p>,<h1>,<form>,<ul>,<li>就是塊級元素。
               設置display:block就是將元素顯示爲塊級元素。
    將行內元素a轉換爲塊級元素，從而使a元素具備塊級元素特色
      a{display:block;}

行內元素：在html中，<span>,<a>,<label>,<input>,<img>,<strong>,<em>就是典型的行內元素
     display:inline

 

內聯塊狀元素：同時具有內聯元素，塊狀元素的特色，代碼：display:inline-block
                   <img>,<input>標籤就是這種內聯塊狀標籤

 

盒模型：
   邊框：就是圍繞着內容及補白的線，這條線能夠設置它的粗細，樣式和顏色（邊框三個屬性）
           div{
                 border:2px solid red;
            }
           注意：
              border-style(邊框樣式)常見形式：
                     dashed(虛線)  dotted(點線) solid(實線)
              border-color(邊框顏色)顏色能夠設置爲十六進制顏色
        若想爲p標籤單獨設置下邊框,而其餘三邊都不設置邊框樣式：
             div{border-bottom:1px solid red;}

   寬度和高度：css定義的寬和搞指的是填充以裏的內容範圍。
              一個元素實際寬度=左邊界+右邊界+左填充+內容寬度+右填充+右邊框+右邊界
 
元素的實際長度爲：10px+1px+20px+200px+20px+1px+10px=262px

填充：元素內容與邊框之間是能夠設置距離的，稱之爲「填充」；填充也可分爲上，右，下，左（順時針）
div{padding:20px 10px 15px 30px;}
四個方向分別爲 padding-top padding-right padding-bottom padding-left

邊界：元素與其它元素之間的距離可使用邊界（margin）來設置，邊界也是能夠分爲上，右，下，左
div{margin:20px 10px 25px 30px;}
四個方向分別爲：margin-top margin-right margin-bottom margin-left