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 時，將以父元素進行定位。

 

/*.box一、.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;
}