CSS 之 核心篇

標籤：div   css   html   xml   

前提：

    區塊層級元素：div標籤為為區塊層級元素，在網頁上表示為佔滿一行的
    行內元素：span標籤為行內元素，的長度只和字元的長度有關

    小例子：

    

<span style="font-size:18px;"><div  class="menu">阿貓</div>    <span class ="menu">阿狗</span>    <span class="menu">阿兔</span><span class="title">f阿牛</span></span>

    效果：

    行內元素轉換為區塊層級元素的方法，例：將span標籤的美容轉換成也橫跨一整行的方法
 

<span style="font-size:18px;"><span class ="menu ttt " >阿狗</span></span>

    小例子：

<span style="font-size:18px;">.ttt{    display:block;}</span>

    

    效果：

標準流    概念：標籤的相片順序，顯示的時候按照書寫的順序進行排列。比如上例中的阿貓和阿狗的顯示順序以及樣式頁的

優先順序都和標準流相關。

盒子模型

    我們在網頁設計中常聽的屬性名稱：內容(content)、填充(padding)、邊框(border)、邊界(margin)， CSS盒子模式都具備這些屬性。這些屬性我們可以把它轉移到我們日常生活中的盒子（箱子）上來理解，日常生活中所見的盒子也就是能裝東西的一種箱子，也具有這些屬性，所以叫它盒子模式。

    盒子模型分為外邊距：border(top，bottom，left，right)，內邊距：padding（top，bottom，left，right），內容：content(width,height)，畫框：margin（top，bottom，left，right）

    每個標籤就相當於一個盒子。通過盒子模型來設定每個標籤的內外邊距。

    小例子（1）：

<span style="font-size:18px;">.menu{                              /*欄目樣式*/    color:#00f;                             /*文字顏色*/    background-color :#ffd800;    border-width:5px;    border-color :#0ff;    border-style:solid;}</span>

    效果：

    小例子（2）

<span style="font-size:18px;">內邊距屬性寫法  /*padding-top: 5px;    padding-left : 5px;    padding-bottom : 5px;*/    /*padding: 5px;*/                      /*如果據上下左右的邊距一樣的話可以這樣寫*    padding:5px  6px  7px  8px;     /*預設的是逆時針上右下左的順序*/      </span>

    外邊距（margin）和內邊距的寫法相同寫法（注意上下兩個欄目都有外邊距時，則兩個之間的距離取最大值）

    效果：

    注意：行內樣式對邊距，長等即盒子模型都是沒有響應的。

浮動    浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。由於盒子模型是針對塊級

元素的，通過浮動可以讓區塊層級元素排成一行。脫離了標準流。

    小例子：

<span style="font-size:18px;">float:left ;         /*盒子向左浮動*/</span>

    效果：

<span style="font-size:18px;">clear:left;         /*清除浮動*/</span>

    給大家推薦一個對浮動介紹的比較詳細的網址：http://www.w3school.com.cn/css/css_positioning_floating.asp

定位    relative，相對定位。定位某一個區塊層級元素，沒有脫標準流。相對於原來的位置。所以阿貓的位置還是相對於原來阿狗的位置。

<span style="font-size:18px;">position:relative;   /*相對定位*/    top:20PX;</span>

    absolute,絕對位置。相對於盒子之外更外一層盒子，脫離了標準流。

    點睛：盒子模型是一個偉大的模型，通過和實際生活相結合，我們在網頁設計的格式掌握的更加透徹和簡單。

CSS 之 核心篇