position替代部分float進(jìn)行網(wǎng)頁元素定位

2024-07-11 08:29:19

字體：大中小

供稿：網(wǎng)友

CSS 定位機(jī)制
CSS 有三種基本的定位機(jī)制：普通流、浮動(dòng)和絕對定位。

position 屬性值的含義：
static
元素框正常生成。塊級(jí)元素生成一個(gè)矩形框，作為文檔流的一部分，行內(nèi)元素則會(huì)創(chuàng)建一個(gè)或多個(gè)行框，置于其父元素中。
relative
元素框偏移某個(gè)距離。元素仍保持其未定位前的形狀，它原本所占的空間仍保留。
absolute
元素框從文檔流完全刪除，并相對于其包含塊定位。包含塊可能是文檔中的另一個(gè)元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會(huì)關(guān)閉，就好像元素原來不存在一樣。元素定位后生成一個(gè)塊級(jí)框，而不論原來它在正常流中生成何種類型的框。
fixed
元素框的表現(xiàn)類似于將 position 設(shè)置為 absolute，不過其包含塊是視窗本身。 (ie6秀逗了)

為什么使用定位
1.html代碼結(jié)構(gòu)簡單;
2.思路清晰;
3.減少reflow;
可能存在的問題
1.有人說耗性能;（沒覺得，也沒官方說明。）
2.經(jīng)常出現(xiàn)bug; （因人而異。）
寫代碼的時(shí)候，思路是非常重要的，整理好思路，然后寫代碼，效率會(huì)提高很多。
相反，你看到一堆東西要寫，思路不清晰，容易煩躁，寫出來的東西就跟那什么什么一樣，自己都看不下去，關(guān)鍵問題是，自己還懶的改，這就是傳說中的坑。

網(wǎng)頁制作 —> 前端重構(gòu)
一個(gè)是代碼上的重構(gòu)，還有一個(gè)是人自己思想上的重構(gòu)，
對于每個(gè)元素有自己的理解和感情。
如果千篇一律，寫著一樣的代碼，就跟一個(gè)沒感情的機(jī)器人一樣，本來前端的工作就比較枯燥，自己再不找個(gè)樂子，那就對不起自己了。

上一篇：css3制作動(dòng)態(tài)進(jìn)度條以及附加jQuery百分比數(shù)字顯示

下一篇：ie8中圖片設(shè)置max-width屬性滿足一定的條件會(huì)導(dǎo)致消失