153-3238-7661

SEO優化、想做網絡推廣網站建設就找成版人快手app二维码網絡!

【十年專注】 實戰 專注 落地 服務  

您現在的位置:主頁 > 新聞資訊 > 網站建設 > css網站布局定位方式

css網站布局定位方式

西安快手成年版app破解版下载•2017-03-17•網站建設•本文地址:http://www.yzapr.com/wzjs/261.html轉載請注明出處

  在網站建設中要想實現某些樣式功能,那麽就必須有css網站布局基礎,這樣才能根據網站建設方案去做css網站布局,那麽css網站布局定位方式是什麽?今天西安網站建設小編為你分享.


      css網站布局:盒模型



  CSS中, Box Model叫盒模型(或框模型),Box Model規定了元素框處理元素內容(element content)、內邊距(padding)、邊框(border) 和 外邊距(margin) 的方式。這種方式基本類似於androids開發中的布局方式,所以對於androids developer學習前端布局方式可以很快的入門。但是有一點,在androids中設置margin和padding的順序是left、top、right、bottom,比如setMargin(10, 20, 30, 20)分別代表左上右下的間距分別為10px,20px,30px,20px;但是在CSS中的順序是top、right、bottom、left,比如margin: [10px, 20px, 30px, 20px]分別代表左上右下間距分別為20px,10px,20px,30px。

 

  

css網站布局方式

 

  網站布局定位定位基礎

 

  position定位

 

  position包括以下幾種類型的定位

  static 默認值。任意 position: static; 的元素不會被特殊的定位。一個 static 元素表示它不會被“positioned”,一個 position 屬性被設置為其他值的元素表示它會被“positioned”。

  relative 相對布局,在原有基礎上偏離使框偏離某個方向固定距離。跟androids中的布局方式很像

  例子

  1. .relative2 {

  2. position: relative;

  3. top: -20px; //在原有top位置上向上偏移-20px

  4. left: 20px; //在原有left位置上向左偏移20px

  5. background-color: white;

  6. width: 500px;

  7. }

  absolute 絕對布局,向上尋找使用過position定位過(除了默認值static外)的祖先元素,然後依據該元素進行定位。

 

  1. .relative {

  2. position: relative;

  3. width: 600px;

  4. height: 400px;

  5. }
 

  6. .absolute {

  7. position: absolute;

  8. top: 120px;

  9.. right: 0;

  10. width: 300px;

  11. height: 200px;

  12. }

  如圖

  

css網站布局方式

 

  fixed 固定定位,相對於視窗來定位,這意味著即便頁麵滾動,它還是會停留在相同的位置。相當於在androids開發中FrameLayout中的某個元素指定layout_gravity使其固定在根布局的某個固定的位置。

  例子

 

  1. .fixed {

  2. position: fixed;

  3. bottom: 0;

  4. right: 0;

  5. width: 200px;

  6. background-color: white;

  7. }

  該元素的位置始終在右下角保持不變。

 

  float浮動

 

  浮動的框可以向左或向右移動,直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。

  可以這樣理解,比如float: left就是向左移動,直到坐邊緣碰到根元素或者另外一個佛洞的邊框的邊緣。也就是說,如果好好幾個向左浮動的元素,那麽它們是從左到右依次排列的。

  如下麵的圖

  

css網站布局方式

 

  

css網站布局方式

 

  

css網站布局方式

 

  clear清除浮動

 

  clear 屬性定義了元素的哪邊上不允許出現浮動元素。

  具體的例子參考這裏

 

  三欄式布局

 

  ife其中的一個任務三欄式布局

  就是通過CSS的布局基礎知識來寫的。包括position和float。

  代碼在這裏三欄式布局

  demo demo


     那麽關於css網站布局定位方式的知識西安快手成年短视频破解版小編就為大家分享完了,更多建站知識請關注西安快手成年版app破解版下载官網

 

文章關鍵詞標簽: css網站布局 css 網站建設
上一篇:上一篇:樹形結構網站和扁平結構網站的區別和選擇 下一篇:下一篇:沒有了