display、 float 、position

1. display(元素顯示模式)

display 屬性用來設置元素的顯示方式。

block 塊對象指的是元素顯示為一個方塊，默認顯示狀態下將占據整行，其它的元素只能另起一行顯示。

inline 行間對象與block剛好相反，它允許其它元素在同一行顯示。

none 隱藏對象

 

CSS Display - 塊和內聯元素

塊元素是一個元素，占用了全部寬度，在前后都是換行符。

塊元素的例子：

<h1>、<p>、<div>

內聯元素只需要必要的寬度，不強制換行。

內聯元素的例子：

<span>、<a>

 

div{display:block}

 

2. float

屬性值

　　　　left 向左浮動

　　　　right 向右浮動

　　　　none 不浮動

　　　　說明： 浮動的時候元素的顯示屬性也變化了 變為 “行內元素”

div{ float:left;}

 

清除浮動

 

none :默認值。允許兩邊都可以有浮動對象

left :不允許左邊有浮動對象

right: 不允許右邊有浮動對象

both :不允許有浮動對象

 

 

3. position(元素的定位)

 

static : 無定位，默認值

absolute：絕對定位

relative ： 相對定位

fixed：固定定位

absolute 說明：

1.脫離文檔流。

2.通過 top,bottom,left,right 定位。

3.如果父元素position 為 static 時，將以body坐標原點進行定位。

4.如果父元素 position 為 relative 時，將以父元素進行定位。

 

/*.box1、.box2都是以#position父元素進行定位的。*/
#position {
    position: relative;
    width: 200px;
    height: 200px;
    background: green;
}
.box1{
      width:100px;
      height:100px;
      background:red;
      position:absolute;
      top:50px; 
      left:110px;


}
.box2{
      width:100px;
      height:100px;
      background:blue;
      position:absolute;
      top:100px; 
      left:120px;
}

效果如下：

 

relative說明 ：

1.相對定位（相對自己原來的位置而言）

2.不脫離文檔流

3.參考自身靜態位置通過 top,bottom,left,right 定位。

 

/*相對定位相對自己原來的位置而言往left=100px，top=100px定位，本來的位子是top=0px，left=0px的*/
#position {
    position: relative;
        left:100px;
         top:100px;
    width: 100px;
    height: 100px;
    background: green;
}

 

 

 

 

fixed說明：

元素的位置相對於瀏覽器窗口是固定位置。

即使窗口是滾動的它也不會移動：

 

div { position: fixed; right:0; bottom:0;}

z-index(元素的層疊關系）

元素的定位與文檔流無關，所以它們可以覆蓋頁面上的其它元素

z-index屬性指定了一個元素的堆疊順序（哪個元素應該放在前面，或后面）

 

注意： 如果兩個定位元素重疊，沒有指定z - index，最后定位在HTML代碼中的元素將被顯示在最前面。

 

#position {
    position: relative;width: 200px;height: 200px;background: green;
}
.box1{
      width:100px; height:100px; background:red;position:absolute;top:50px; left:110px;z-index:99;

}
.box2{
      width:100px; height:100px; background:blue; position:absolute; top:100px;  left:120px;
}