html頁面的一些小結

 

一般初學者對網頁的布局總是覺得不屑一顧，在學的 時候感覺很簡單，當真的要簡單的設計一個頁面的時候，總是會遇到這樣那樣的困難，和不解

首先，用最簡單的方法去控制。

如果要橫排  用span  如果要豎排，那就用div         簡單吧  不變應萬變

通常div  設定一個大的位置  而span呢  較小的布局

 

 

“無意義”的元素div和span  沒有內容的意義   只是用來布局      有意義的標籤去掉意義再布局

 

div  屬於塊級

 

一般頁面上的div 有兩種  一種是絕對位置定位的 可以這麼寫

#id

{

 height:200px;

width:300px;

position:absolute;

left:50%;

top:50%;

margin-left:-150px;

margin-top:-100px

}

這樣 這麼個div  無論頁面這麼縮小 變化  都在頁面中間；

Position 用於定義一個元素是否absolute（絕對），relative（相對），static（靜態），或者fixed（固定）
Top 層距離頂點縱座標的距離
Left 層距離頂點橫座標的距離
Width 層的寬度，可以用一個長度或“auto”值來指定其寬度，不允許使用負值
Height 層的高度，可以用一個長度或“auto”值來指定其高度，不允許使用負值
z-index 決定層的先後順序和覆蓋關係，值高的元素會覆蓋值比較低的元素
Display 是一個顯示內容，設定block值是以塊狀顯示，在元素後面添加分行符號，既其他元素不能在其後面並列顯示。如果設定inline值則內聯顯示，在元素後面刪除分行符號，多個元素可以在一行內並列顯示。使用值none將關閉指定元素及其子項目的顯示
Visibility 這個屬性是針對嵌套層的設定，如果存在嵌套的層（子層）和被嵌套的層（父層）時，可以使用inherit值設定子層繼承父層的可見度，如果父層可見，子層也可見。當使用visible值時，無論父層是否可見，子層都可見。而值為hidden時，無論父層是否可見，子層都隱藏
Overflow 用於設定層內的內容超出層所能容納的範圍處理方式，為該屬性設定visible值時，無論層的大小，內容都會顯示出來。當設定hidden值時，會隱藏超出層大小的內容。當設定值為scroll時，不管內容是否超出層的範圍，選中此項都會為層添加捲軸。而值使用auto值時，只在內容超出層的範圍時才顯示捲軸

 

 

Margin(注) 是定義區塊外邊界與上階項目距離的屬性，用1到4個值來設定元素的邊界，每個值都是長度、百分比或者auto，百分比值參考上階項目的寬度，允許使用負值邊際。如果四個值都給出了，它們分別被應用於上、右、下和左邊界。如果只給出一個值，它被應用於所有邊界。如果兩個或三個值給出了，省略了的值與對邊相等。注意如果邊界在垂直方向鄰接(重疊)了，會改用其中最大的那個邊界值。而水平方向則不會。也可以選擇使用上邊界margin-top、下邊界margin-bottom、左邊界margin-left和右邊界margin-right屬性分別設定與上階項目的外邊距。
padding 用於設定區塊的內邊距屬性，是邊框和元素內容之間的間隔距離。與margin屬性相返，但使用的是相同屬性值。是上補白padding-top、右補白padding-right、下補白padding-bottom和左補白padding-left屬性的略寫
float 設定區塊漂浮屬性，允許網頁製作者將文本環繞在一個元素的周圍，可以使用左漂浮left值，右漂浮right值
clear 清除屬性指定一個元素是否允許有元素漂浮在它的旁邊。值left移動元素到在其左邊的漂浮的元素的下面；同樣的值right移動到其右邊的漂浮的元素下面。其他的還有預設的none值，和移動元素到其兩邊的漂浮的元素的下面的both值

 

 

 

在進行頁面配置時，經常需要設定多個區塊框並列在一行中排列。最常見的方式就是使用float屬性，再通過left或right值移動區塊框向左或向右浮動。但當前面並列的多個區塊框總寬度不足包含框的100%時，就會在行框中留出一定的寬度，而下面的某個區塊框又恰好滿足這個寬度，則很可能會向上提，和上一行並列的區塊框在同一行排列。而這不並是我們想要的結果，所以可以使用clear屬性解決這一問題，該屬性的值可以是 left、right、both 或 none，它表示框的哪些邊不應該挨著浮動框。