網站設計中很重要的概念div+浮動

 在網站建設中,總會遇到html和css各種各樣的問題,打開網站http://www.hualai.net.cn首頁,查看源代碼,滿屏全是html標籤,不下幾十個div。

html中包括兩種元素 內聯元素(行內元素) 和 塊元素 ,怎麼理解呢?

  • 行內元素就是不換行的元素,並且大小可以自適應.  例如  a img  font  span,當我們建設一個網站的時候,裏面的文字內容就是行內元素。
  • 塊元素就是不論內容多少 寬度高度多少都會換行顯示  例如  div  p  li,一般用在網站的佈局上。

行內元素和塊元素的相互切換用到display: inline      block這兩個 css屬性.. 

對於行內元素 如果內部還包含塊元素 那麼就用display:inline-block ;

 inline 只用於內部包含inline元素的時候使用 。。

行內元素內部可以包含行內元素 儘量不要包含塊元素。

塊元素 內部可以嵌套行內元素和塊元素 。 

在網站中浮動float 就是將自己漂移到父元素邊框,或者前一個浮動元素的邊框爲止,浮動很有用 在利用 ul li做menu的時候可以用到

在用div做menu的時候也可以使用浮動 。

float:right ;

浮動rigth可以使浮動框拋棄原來的位置 後面的浮動會緊跟過來 浮動到父親元素邊框的右邊界停止最好是如果我們利用浮動做網站菜單,一組menu最好全部浮動或者全部不浮動 如果中間有一個不浮動就會出現奇怪的顯示效果空間不夠大了可以往下自適應 。直到填充完了離開父元素 。

float:left ;

float left 和right其實是一樣的,只不過一個向左邊 一個向右邊 . 他們的浮動都會到父親邊框位置或者前一個浮動塊爲止, 如果在您的網站裏面,一對div中有一個height高度大於其他div那麼後即浮動div會被卡在他的後面,直到有足夠空間 。

對於行內元素 如果浮動 就會將樣式設置成塊元素並可以設置 width 和height  ..否則 這兩個屬性無效,但是這裏雖然是塊元素 但是他會讓出同行右邊的位置,並且可以顯示其他內容 例如很多網站排版時的文字包圖就是這個原理  ///

清除浮動.就是清除浮動效果 。

浮動的關鍵就在於 讓出位置 和緊接着 前一個浮動 快 。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章