CSS高階

 塊級元素：block element

 1.  每個塊級元素預設佔一行高度，一行內新增一個塊級元素後無法一般無法新增其他元素（float浮動後除外）;

 2.  兩個塊級元素連續編輯時，會在頁面自動換行顯示。塊級元素一般可巢狀塊級元素或行內元素 ;

 常見塊級元素：

　<1> div - 常用塊級容易，也是css layout的主要標籤

　<2> dl - 定義列表  

　<3> h1 - h6 標題標籤 

　<4> hr - 水平分隔線  

　<5> menu - 選單列表  

　<6> ol - 排序表單  

　<7> p - 段落  

　<8> table - 表格  

    <9> ul - 非排序列表  

行內元素：inline element 

 1. 也叫內聯元素、內嵌元素等；行內元素一般都是基於語義級(semantic)的基本元素，只能容納文字或其他內聯元素，常見內聯元素 “a”

常見的行內元素：

　a - 錨點

　b - 粗體(不推薦)  

　br - 換行  

　em - 強調  

　i - 斜體  

　img - 圖片  

　input - 輸入框  

　label - 表格標籤  

　select - 專案選擇  

　span - 常用內聯容器，定義文字內區塊  

　strong - 粗體強調  

　sub - 下標  

　sup - 上標  

　textarea - 多行文字輸入框  

　u - 下劃線

 文件流

1.  將窗體自上而下分成一行行, 並在每行中按從左至右的順序排放元素,即為文件流 ；

2.    CSS的定位機制有3種：普通流、浮動和定位 ;

3.    文件流：從上到下，從左到右，一個挨一個的簡單或者叫正常佈局 ;

4.    定位：（position）

Static：保持文件流 ;

Relative：相對本身的原始位置發生位移且保持文件流，佔空間 ;

Absolute：脫離文件流，不佔空間且相對於其包含塊來定位 ;

5.     浮動：（float）脫離文件流，不佔空間 ; 

6.    以前總是覺得position：static這個屬性很多餘，它的作用就是讓元素保持文件流的;

 我們預設是按流體佈局

css定位機制 普通流：自上而下（有些行內元素預設從左至右的也算普通流）  浮動：從左至右或從右至左對齊 定位 position  Static：保持文件流 Relative：相對本身的原始位置發生位移且保持

浮動脫離文件流，不佔空間；

顯示：display 

1.  none - 此元素不會被顯示 ;

2.  block - 顯示為塊級元素，此元素前後會帶有換行符 ;

3.  inline -  預設 , 此元素會被顯示為內聯元素，元素前後沒有換行符 ;

 CSS overflow屬性

1.   overflow 屬性規定當內容溢位元素框時發生的事情 ;

2.  這個屬性定義溢位元素內容區的內容會如何處理。如果值為 scroll，不論是否需要使用者代理都會提供一種滾動機制 ;

3.  有可能即使元素框中可以放下所有內容也會出現滾動條 ;

兩列布局

1.兩列自適應寬度

2.由於div為塊狀元素，預設情況下佔據一行的空間，想要下面的div跑到右側就需要藉助css的浮動來實現

3.兩列固定寬度

4.兩列固定寬度居中

 三列布局 

1.   三列自適應寬度 （左列和右列固定，中間列根據瀏覽器寬度自適應）;

2.   三列固定寬度 ;

3.   三列固定寬度居中 ;

 定位佈局 position

 透明：opacity

1.  opacity:0.9;filter:alpha(opacity=90) ;

2.filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#BFFFFFFF',endColorstr='#BFFFFFFF'；）

background: rgba(255,255,255,.75);

3. background-color: rgba(0,0,0,0.5);

body{background:url("images/1.png") top center;} 上下居中對齊 opacity:0.5;(0~1) filter:alpha(opacity=50);(1~100)（相容寫法，與上面的opacity對應） background