2016年8月5日 星期五

Css-基本認知( 四 )_佈局方法

我們在上一篇有介紹 : 基本樣式

接下來要如何去佈局您的畫面
通常我們比較常拿 Div ( 塊狀模型 ) 來做區塊
然後再去 Div 的位置與大小
如下圖 :

















什麼是 Div ( 塊狀模型 ) ?
通常我們用來做不同的區塊特性
通常 Div 預設是直接佔用一整行

在網頁中,我們有幾種佈局的方法 ;

  • 流動模型 ( Flow )
  • 浮動模型 ( Float )
  • 層次模型 ( Layout )

浮動模型

剛剛有提到 Div 是直接佔用一整行
那如果我們要呈現像上方的圖( 樣式 )就可以用浮動模型 ( Float )
( * 如果有兩個以上的塊狀,要被調整的前一個塊狀要設定 )
例如上圖 : Div_2 要靠 Div_1 右邊,所以要對 Div_1 設置

用法說明備註
float:left;調整 Div 區塊對應位置left ( 靠左 )、right ( 靠右 )















層次模型

模型層用法說明
絕對位置position:absolute;模塊移動到對應的座標位置
相對位置position:relative;模塊移動到對應的座標位置
但實際是占用到原本的空間
固定位置position:fixed;模塊移動到對應的座標位置
不隨網頁的滾動產生移動

<!DOCTYPE html>
<html>
<style>
#box1{
    width:150px;
    height:150px;
    border:2px red solid;
    position:absolute; // 可更改參數看這三種的差異
    left:50px;
    top:50px;
}
</style>
<body>
    <div id="box1"></div>
    <div>Hello world !!!</div> 
</body>
</html>


























歡迎轉載,請註明出處。

沒有留言:

張貼留言