css float /position

  • 1235
  • 0
  • css
  • 2019-03-20

float 以及 position 是我老是在撰寫css時,每次都頭昏眼花。因為略懂的關係所以導致耗費多餘的時間在調整。

因此利用兩個簡單的div 來進行觀念上的調整,希望之後就可以一次成功啦~~


 

首先,我們先來看當我們設了兩個div 並且將長寬都設為50後,畫面會長這樣,,他會呈現垂直的狀況

 

<style>
        #oneDiv{
            border: 1px solid black;
            width:50px;
            height:50px;
            /*float:left;*/
        }
        #twoDiv{
            border: 1px solid red;
            width:50px;
            height:50px;
            /*float:left;*/
        }
    </style>
//這是html的地方
<div id = "oneDiv">
</div>
<div id = "twoDiv">
</div>

 Float : left , right ,none (預設)

float 其實就是浮動的意思,若我們將oneDiv 設為 靠左浮動,會長下面這樣

你會發現紅色框框怎麼不見了,主要是因為當我們oneDiv 浮起來時,紅色框框因為沒有上方原本黑色框框頂住,所以他會往上到最上面,但又因為黑色框框浮在紅色框框上面所以整個就覆蓋住紅色框框

那若兩個div 都浮動在上方呢??如同下圖,因為兩者都浮在上面又指定他靠左,所以紅色框框又被黑色框框抵住所以他會出現在黑色框框的右邊。

position: absolte relative

position 是我最容易搞混然後也不知道怎辦的一個屬性。relatie 表示我們的父 absolute 則是根據父呈現相對位置

最常使用的是水平垂直 置中 以及 水平置中

水平置中較為簡單,

我們將一個div 的position : absolute 且將left : 50 %,如下圖。你會發現奇怪怎麼還沒有正中間的感覺,主要是因為他是根據左上角正方形的那個點當作測量,所以我們必須再透過margin- right 去左調整


那水平垂直置中呢?? 我們將top 也50% 呢~~他一樣會是以左上角的角為測量點,所以都必須再利用margin-right去調整