<nav id="ujou4"></nav>
?
153-3238-7661

SEO優化、想做網絡推廣網站建設就找聯創互億網絡!

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

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

css網站布局定位方式

西安聯創互億?2017-03-17?網站建設?本文地址:http://www.008ao.cn/wzjs/261.html轉載請注明出處

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


      css網站布局:盒模型



  CSS中, Box Model叫盒模型(或框模型),Box Model規定了元素框處理元素內容(element content)、內邊距(padding)、邊框(border) 和 外邊距(margin) 的方式。這種方式基本類似于Android開發中的布局方式,所以對于Android developer學習前端布局方式可以很快的入門。但是有一點,在Android中設置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 相對布局,在原有基礎上偏離使框偏離某個方向固定距離。跟Android中的布局方式很像

  例子

  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 固定定位,相對于視窗來定位,這意味著即便頁面滾動,它還是會停留在相同的位置。相當于在Android開發中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網站布局定位方式的知識西安聯創互億小編就為大家分享完了,更多建站知識請關注西安聯創互億官網

 

文章關鍵詞標簽: css網站布局 css 網站建設
上一篇:上一篇:樹形結構網站和扁平結構網站的區別和選擇 下一篇:下一篇:沒有了
?
77099红姐图库610 兴文县| 伊宁县| 平山县| 迭部县| 翼城县| 博客| 冕宁县| 武城县| 锡林郭勒盟| 班戈县| 运城市| 灵山县| 吉隆县| 垣曲县| 申扎县| 合山市| 铜山县| 淮北市| 页游| 鄂托克前旗| 长治县| 巴东县| 武邑县| 泰兴市| 建阳市| 洪江市| 田林县| 宝应县| 伊金霍洛旗| 永年县| 波密县| 密云县| 马鞍山市| 乌恰县| 全南县| 瓮安县| 桂林市| 雅江县| 曲阳县| 新蔡县| 衡阳县| http://cp.gcc5l6.top http://v.8r4ke4.top http://so.q2fgg0.top http://m.sina3hxu.pw http://m5.goh910.top http://china.sinav6d5.pw