佈局相關屬性

opacity:0; /透明度 1完全顯示0 完全隱藏/

1.display :修改元素性質 (display: block)

我們不能為行內元素設定width、height,我們可以通過修改display來修改元素的性質

-block : 設定元素為塊元素       在元素後面換行，顯示下一個元素 ，多新增一個就會到下一行顯示【Div】

-inline : 設定元素為行內元素  多個塊可以顯示在一行內【span】

-inline-block : 設定元素為行內塊元素

-none : 隱藏元素(元素將在頁面中完全消失)

內聯元素和塊級元素轉換：

<style>
     .display-div{    background-color: red;    width: 200px;/*可定義寬度*/    display: inline;/*轉換為內聯元素*/}
     .display-span {    background-color: green;    width: 200px;/*無法定義寬度*/    display: block
 
; /*程式設計塊級元素就可以定義寬度了*/}
</style>

2.visibility 設定元素是否可見

和display不同，使用visibility隱藏一個元素，隱藏後其在文件中所佔的位置會依然保持，不會被其他元素覆蓋。

-visible ： 可見的

-hidden : 隱藏的

3.overflow:控制內容溢位

當標籤內容超出樣式的寬高時，瀏覽器就會讓內容溢位盒子。通過overflow來控制溢位的情況

-visible ： 預設值

-scroll : 新增滾條

-auto : 根據需要新增滾動條

-hidden : 超出盒子內容隱藏

4.float 浮動

使元素脫離原來的文字流，在父元素中浮動起來，浮動使用float屬性.

- none : 不浮動

- left : 左浮動

- right : 右浮動

①塊級元素和行內元素都可以浮動，當一個行內元素浮動以後將會自動變為一個塊級元素。

②當一個塊級元素浮動以後，寬度預設被內容撐開，所以當浮動一個塊級元素時，我們要為其制定一個寬度。

③當元素浮動後，其下方的元素會上移，元素中的內容將會圍繞在元素的周圍。

④浮動會使元素脫離文字流，即不在文件中佔用位置。

⑤元素設定浮動後，會一直向上漂浮直到遇到父元素的邊界或者其他浮動元素

⑥元素浮動後完全脫離文件流，這時不再影響父元素的高度，也就是浮動元素不會撐開父元素。

⑦浮動元素預設會變為塊元素，即使設定display:inline依然是個快元素。

清除浮動

clear 清除元素周圍的浮動對元素的影響。(元素不會因為上方出現了浮動元素而改變位置)

- left 忽略左浮動

- right 忽略右浮動

- both 忽略全部浮動

- none 不忽略浮動，預設值

5.position 定位：

控制瀏覽器在何處顯示特定的元素。可以使用position屬性把一個元素放置到網頁中的任何位置。

-static 沒有定位

-relative（相對定位）

-absolute（絕對定位）

-fixed   根據瀏覽器視窗進行定位

left ,right ,top ,bottom 離頁面頂點的距離

相對定位：relative

每個元素在文件流都有一個自然位置，相對於這個位置對元素進行移動，周圍的元素完全不受此影響。

將position屬性設定為relative時，則開啟了元素的相對定位。

當開啟相對定位後，可以使用top、right、bottom、Left四個屬性對元素進行定位。

特點：

①如果不設定元素的偏移量，元素位置不會發生改變。

②相對定位不會是元素脫離文字流，元素在文字流中的位置不會改變。

③相對定位不會改變元素原來的屬性。

④相對定位使元素的層級提升，使元素可以覆蓋文字流中的元素。

絕對定位：absolute

絕對定位使元素相對於離他最近的父級定位元素進行定位。

當開啟絕對定位後，可以使用top、right、bottom、Left四個屬性對元素進行定位。

特點：

①使元素脫離文字流，不受其他元素的影響和影響其他元素。

②塊元素的寬度會被內容撐開。

③使行內元素變為塊級元素。

④absolute和relative一般成對使用。

固定定位：fixed

設定後，該元素被鎖定在螢幕的某個位置上，滾動網頁時，固定元素會在螢幕上保持不動。

同樣可以使用top、right、bottom、Left四個屬性對元素進行定位。

6.z-index 提升定位元素所在的層級，值越大，優先順序越高。

相容問題及高效開發工具

<!--①相容性測試工具 ： IE Tester 和 Multibrowser-->
<!--②常用的瀏覽器 Google chrome Firefox opera-->
<!--③高效的開發工具：-->
<!--Notepad + + 、 subline Text 、記事本 輕量級的-->
<!--WebStorm  Dreamweaver 重量級的-->
<!--④網頁設計工具：fireworks 、Photoshop-->
<!--⑤判斷IE的方法：只有在IE瀏覽器下才能執行-->
<!--<!—[if 條件版本]> 那麼顯示 <![endif]—> 條件判斷格式-->
<!--除了IE8都可以顯示 [if !IE 8]不等於-->
<!--如果IE 瀏覽器版本小於5.5的顯示 [if lt IE 5.5] 小於-->
<!--如果IE瀏覽器版本大於5的顯示   [if gt IE 5] 大於-->
<!--如果IE瀏覽器版本小於6的顯示  [if lte IE 6]  小於或者等於-->
<!--如果IE瀏覽器版本小於7的顯示  [if gte IE 7]  大於或等於-->
<!--如果IE瀏覽器版本大於IE5小於7的顯示  [if (gt IE 5)&(lt IE 7)]  大於和小於之間-->
<!--如果是IE6或者IE7顯示  [if (IE 6)|(IE 7)] 或-->
<!--如果是IE8  &lt;!&ndash;[if IE 8]>  僅-->