7月17號=》221頁-225頁

標籤：使用   os   width   io   html   代碼   

10.1.1　　通過float屬性實現多欄布局

　　　　通過使用float屬性，可以非常方便地基於<div>元素來設定導覽功能表、多欄布局

　　　　等效果。代碼示範：

　　　　　　//為div元素設定左浮動，如果多個div元素的總寬度未超過父元素的寬度

　　　　　　　　則在一行顯示多個div

　　　　　　div{

　　　　　　　　float:left;

　　　　　　}

 

10.1.2　　使用clear屬性實現換行

　　　　clear屬性用於設定HTML組件的左、右是否允許出現“浮動”組件，如果該

　　　　屬性指定為left，則左邊不允許出現“浮動”組件；如果指定為right，則右邊

　　　　不允許出現“浮動”組件；如果指定為both，則兩邊都不允許出現“浮動”

　　　　組件。藉助於clear屬性可以讓“浮動”組件換行。

　　　　代碼示範：

　　　　　　//設定div元素的左邊不允許出現浮動組件，如果有浮動組件div元素將換行顯示

　　　　　　div{

　　　　　　　　clear:left;

　　　　　　}

 

10.1.3　　使用clip屬性控制裁剪

　　　　CSS還提供了一個clip屬性來控制對元素的裁剪，clip屬性可通過rect()指定一個矩形。

　　　　需要指出的是為了看到clip屬性的作用，該元素的position必須設定為absolute，並將

　　　　overflow設定為hidden。

　　　　代碼示範：

　　　　　　//設定div元素裁剪後的樣式

　　　　　　div{

　　　　　　　　position:absolute;

　　　　　　　　width:500px;

　　　　　　　　overflow:hidden;

　　　　　　　　clip:rect(16px 400px auto 30px)

　　　　　　}