塊元素與內聯元素

塊元素

1. 獨佔一行,預設情況下，其寬度自動填滿其父元素寬度
2. 可以設定width，height屬性
3. 可以設定margin和padding屬性

內聯元素

1. 相鄰的行內元素會排列在同一行裡，直到一行排不下，才會換行，其寬度隨元素的內容而變化
2. 不支援設定width，height
3. 除了margin-top、margin-bottom`，不支援外其它的內外邊距都是支援的。

• 常用塊元素：

<div>   <h1>    <h2>    <h3>    <h4>    <h5>    <h6>
<p>     <ul>    <ol>  <table> <tr>  <tbody> <tfoot> <pre> ...
 

• 常用內聯元素

<a>   <s>   <b>    <input>  <i>   <span> 
<select>    <sub>   <sup> ...

• 修改標籤型別: display

  • display:block; 指定物件為塊元素
  • display:inline; 指定物件為內聯元素

• 內聯塊：display:inline-block;

  • 塊元素在一行顯示。
  • 內嵌元素支援寬高。
  • 不設定寬高時內容撐開寬高。
  • 換行會被解析為一個空格。
  • 在IE6，IE7下不支援塊標籤。

要去除 display:inline-block;元素間的間隙有兩種方式：1. 刪除換行和空格。2. 設定父級元素 font-size: 0;,然後再單獨設定當前字型大小。

/* 去除 內聯塊 元素間 間隙示例*/
ul{
    font-size: 0;
}
ul>li{
    font-size: 16px;
    display: inline-block;
    background: gray;
    color: #fff;;
}

顯示/隱藏元素

標籤元素顯示或隱藏有三種方式

1. display:none; 隱藏元素,不保留元素所佔的空間。
2. visibility:hidden;
   隱藏元素，保留元素所點空間。
   • visible：visible 設定元素可見。
3. opacity：<number>; 設定元素透明度。 取值 0~1。0全透明，1不透明。

opacity:0也可以使元素隱藏，但需要它只是通過調整元素的透明度來實現，元素還在，還是可以點選的，而上面兩種則不可以點選，使用時需要注意。

元素滾動行為：overflow

標籤元素處理溢位內容的方式

1. overflow: hidden; 當內容超出時隱藏超出部分。
2. overflow: scroll; 設定元素有滾動條。無論是否超出內容滾動條都會出現
3. overflow: auto; 當內容超出時呈現滾動條，反之則沒有滾動條。相比於 overflow: scroll;使用者體驗更好。
4. overflow: visible overflow的預設取值，對超出部分不作任何處理。

也可以c通過overflow-x,overflow-y設定X,Y軸的滾動行為。

浮動

最初，引入 float 屬性是為了能讓 web 開發人員實現簡單的佈局，包括在一列文字中浮動的影象，文字環繞在它的左邊或右邊。你可能在報紙版面上看到過。但 Web 開發人員很快意識到，任何東西都可以浮動，而不僅僅是影象，所以浮動的使用範圍擴大了。浮動曾被用來實現整個網站頁面的佈局，它使資訊列得以橫向排列

想要將元素排列到一行可以使用display:inline-block; 但是內聯塊會存在間隙的問題。這裡可以選擇浮動的方式將元素排列到一行。

浮動為左浮動float:left;和右浮動float:right;

浮動的特點

1. 塊元素在一行顯示。
2. 內嵌元素支援寬高。
3. 不設定寬高時內容撐開寬高。
4. 脫離文件流。
5. 按照給定的方向移動位置。
6. 直到遇到父級元素邊界或另外一個浮動元素停止移動。
7. 提升元素層級(浮動元素後面的元素就佔用了浮動元素的位置,但元素中內容不會移動)

清浮動

清浮動是由於浮動時提升元素的層級，脫離了文件流破壞了文件流結構。
清浮動有以上6種常用方式：

• 給父級也新增浮動

  父級元素中如果有margin: 0 auto;左右居中的效果將失去作用

• 給父級新增display: inline-block;

  父級元素中如果有margin: 0 auto;左右居中的效果也將失去作用。

• 在浮動元素下新增空標籤清除浮動

  <style>
      .box1{width: 100px;margin: 0 auto;border: 5px solid red;}
      .box2{width: 100px;height: 100px;background: blue; float: left;}
      .clear{clear:both;}
  </style>
  <div class="box1">
      <div class="box2"></div>
      <div class="clear"></div>
  </div>
  

  IE6下會有最小高度問題（IE6下高度小於19px的元素，高度會被設定為19px，解決方案設定font-size:0,但仍然會有2px的高度。），IE5下margin: 0 auto;不起作用。

4. 浮動元素下新增
   標籤清除浮動

   <style>
       .box1{width: 100px;margin: 0 auto;border: 5px solid red;}
       .box2{width: 100px;height: 100px;background: blue; float: left;}
   </style>
   
   <div class="box1">
       <div class="box2"></div>
       <br clear='all'>
   </div>
   

   這樣寫不符合工作中：結構、樣式、行為三者分離的原則。程式碼有耦合。

5. ::after偽類清除浮動

   <style>
       .box1{width: 100px;margin: 0 auto;border: 5px solid red;}
       .box2{width: 100px;height: 100px;background: blue; float: left;}
       .clear:after{content: '';display: block;clear: both;}
       .clear{zoom:1; }
   </style>
   
   <div class="box1 clear">
       <div class="box2"></div>
   </div>
   

   IE5/6/7下不支援:after偽類。但IE5/6/7下只要觸發hasLayout就不需要清除浮動。使用zoom:1;觸發 hasLayout 這樣會對其它程式碼造成的干擾降到最低。

   hasLayout介紹

6. overflow: hidden;清浮動

   <style>
       .box1{width: 100px;margin: 0 auto;border: 5px solid red;overflow: hidden;}
       .box2{width: 100px;height: 100px;background: blue; float: left;}
   </style>
   
   <div class="box1">
       <div class="box2"></div>
   </div>
   

   IE5/6下不支援。解決為法：配合zoom:1;使用

定位 position

position 定位允許您從正常的文件流佈局中取出元素，並使它們具有不同的行為，例如放在另一個元素的上面，或者始終保持在瀏覽器視窗內的同一位置。

定位分類

1. position: static; 靜態定位
   • 物件遵循常規流，預設定位選項
2. position: relative; 相對定位
3. position: absolute; 絕對定位
   • 定位上下文：絕對定位元素的父元素的position屬性。
4. position: fixed; 固定定位
   • 定位上下文：偏移定位是以視窗為參考。

移動位置

top, bottom, left, 和 right 來精確指定要將定位元素移動到的位置。

定位層級

使用z-index屬性，可以更改定位堆疊順序。

z-index 的值為數字，數字越大堆疊在頂層，數字越小堆疊在底層。

偽類

偽類只有在一定的條件下才能作用到標籤上。

超連結的4種狀態

• a:link {color:#FF0000;} /* 未訪問的連結 */
• a:visited {color:#00FF00;} /* 已訪問的連結 */
• a:hover {color:#FF00FF;} /* 滑鼠劃過連結 */
• a:active {color:#0000FF;} /* 已選中的連結 */

注意： 在CSS定義中，a:hover 必須被置於 a:link 和 a:visited 之後，才是有效的。
注意： 在 CSS 定義中，a:active 必須被置於 a:hover 之後，才是有效的。

• E:focus 設定物件在成為輸入焦點時的樣式。
• E:first-child 匹配第一個子元素
• E:last-child 匹配最後一個子元素

CSS(Sprites)精靈圖（雪碧圖）

CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片檔案中，再利用CSS的background-image,background-repeat,background-position的組合進行背景定位，background-position可以用數字精確地定位出背景圖片的位置。

優點：

1. 減少網頁的http請求，從而加快了網頁載入速度，提高使用者體驗。
2. 減少圖片的體積，因為每個圖片都有一個頭部資訊，把多個圖片放到一個圖片裡，就會共用同一個頭資訊，從而減少了位元組數。
3. 解決了網頁設計師在圖片命名上的困擾，只需對一張集合的圖片上命名就可以了，不需要對每一個小元素進行命名。
4. 更換風格方便，只需要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就可以改變。

缺點：

1. 在寬屏，高解析度的螢幕下的自適應頁面，你的圖片如果不夠寬，很容易出現背景斷裂。
2. CSS Sprites在開發的時候，要通過photoshop或其他工具測量計算每一個背景單元的精確位置。
3. 在維護的時候比較麻煩，如果頁面背景有少許改動，一般就要改這張合併的圖片。
4. 精靈圖不能隨意改變大小和顏色。改變大小會失真模糊，降低使用者體驗，現在一般用字型圖示代替精靈圖。

精靈圖使用屬性

• background-image 使用影象作為背景
• background-repeat 背景影象如何填充
• background-position 指定背景影象在元素中出現的位置

字型圖示庫

可以像使用字型一樣使用圖片。可以通過font-size設定圖片大小。通過color設定圖片顏色。

cssreset

重置HTML標籤的預設樣式。HTML標籤會有預設情況下不同瀏覽器中都會有一定的樣式屬性這些樣式也可能會因為不同的瀏覽器所不同，這些樣式並不是程式所需要的，所以在程式一開始就需要先將這些預設樣式給清除掉。