[請益] 正確/好的float寫法?

作者: Funitory (不如憐取眼前人)   2015-08-16 00:17:48
最近在寫CSS的時候覺得自己只是在鬼畫符
就雖然寫是寫得出來 可是感覺好像就亂寫一通
想要知道有沒有哪邊有教
"什麼時候應該用float、float該怎麼分配適合"
例如說  logo link link link
     左  右  右  右
換成   左  左  左  左 
其實也可以寫的視覺上看起來一樣 但是就是不知道哪種寫法比較好
然後float元素一排寫完之後下面的東西好像margin就有點難抓@ @
是不是該加個 <div style"clear:both;">
"一直用relative、absolute來定位,網頁是不是很危險"
這個還蠻好用的可是怕用太多會混亂
"什麼時候應該用padding、margin"
因為很多時候一個沒有底色的東西 
用padding跟margin外表看起來是一樣的..
買的書大多是一項一項教,比較沒有教整個排起來應該怎麼寫得"好"的
(寫出來我會,但是就是怕寫的差)
想請教大家能否推薦有什麼好的學習網站可以把這些觀念學好呢?
還請大家多多指教,謝謝~~~ m(__ __)m
作者: HwangTW (谷歌翻譯王)   2015-08-16 00:53:00
margin 是邊界 padding 是內距http://goo.gl/NlxA2Y relative、absolute的教學看起來是不會太危險拉
作者: hanconquer (I love IU)   2015-08-16 06:09:00
有同感,常常為了元素定位很頭大
作者: ericdoctor (小黑)   2015-08-16 07:39:00
想了解+1
作者: HwangTW (谷歌翻譯王)   2015-08-16 07:54:00
所以樓上兩位是想瞭解定位元素的啥東東?
作者: alog (A肉哥)   2015-08-16 08:02:00
float 用在 display 屬性為 inline 或 inline-block的元素上position 用在 block or inline-block 元素上危險這件事情 應該先問怎樣為什麼會讓你覺得危險另外也有為了建立一個較為彈性的grid用float技巧構成也不是說沒有至於要不要clear float設定 可以去找clearfix
作者: oToToT (屁孩)   2015-08-16 09:46:00
一直用position還是會有問題,我記得我之前有個網站就是這樣,結果明明cssreset了,還是各家瀏覽器會有偏差,最後只能再重寫
作者: alog (A肉哥)   2015-08-16 09:58:00
那有可能是不熟悉元素特性跟用了不該用的不然position是相當精準的東西
作者: Ageis (Ageis)   2015-08-16 12:22:00
@alog position 沒有限用在 block | inline-blockfloat 也沒有限用在 inline | inline-block套用 float 的元素,會自動變成 block (可設 width/height)回原po 在float的外層加clear是為了讓外層size可自動調整margin 的問題你可能要確定是不是margin collapsing造成的用position並不會危險,用錯才會危險常見的錯誤像用 position 做2(多)欄式排版padding 就是內距,常見的問題是因不了解 box-model 造成的
作者: oToToT (屁孩)   2015-08-16 15:03:00
疑,所可能以是我當時做錯了什麼喔
作者: alog (A肉哥)   2015-08-16 16:36:00
float 本身就是文繞圖的功能 一直以來沒有人很明確講該用在什麼元素上但是今天有人問了 當然只能根據使用的經驗 給點建議另外上了float並不會變成block元素那是有另外上屬性為block或inline-block順便再補充好了刻版面上 相較於 float, position 在複雜UI上的有更多充分發揮能力的空間因為只要配合 width height 以及 top left bottom right 其中兩組再配合 margin 屬性就能做到很完美的水平跟垂直的定位單用利用float 文繞圖排版的做法是沒辦法直接做到垂直定位你得需要配合其他的屬性才能刻出來而這方面position較為輕鬆一點 程式碼比較清醒清晰*只是position 事先要定義好明確的數值跟屬性 以及跟父元素的定位關係 若你沒有處理好 是比較容易出現不如預期的結果此外 position 也不是不能做多欄的grid 我認為這不算什麼危險或錯誤只是在最佳解上float有更好的優勢在相較於 float,position 就我剛講的 設定上會麻煩很多 因為必須定義清楚每一個欄之間的距離或大小float 則是本身的一些運作特性可以省略很多功夫而且在維護上 一樣的目標 float 刻出來的比較漂亮從susy 或是 960 grid 會用float 來實踐就表示那是真的最佳實踐position 若要挑缺點 其實除了上述的部分我是覺得維護上要挑對工具position 在複雜ui下的 若是用純粹的css維護可能在辨別父子元素之間的定位關係 跟設定屬性、計算上會很複雜光維護那段code你看到一堆數字就受不了用scss 來撰寫 利用mixin、變數跟巢狀的code來描述元素樣式 可以大幅減輕這個問題
作者: kattte (誠實面對自己吧!)   2015-08-16 23:46:00
可以請原po 整理一下 alog 大大的回應嗎 不然好大一串XD
作者: eggimage (目前沒有名片)   2015-08-17 17:08:00
本人不太喜歡用float, 有需要的地方我盡量都用inline-block代替 或是乾脆用別的排版方式
作者: Ageis (Ageis)   2015-08-17 21:11:00
@alog http://goo.gl/oxizaU"When you float an element it becomes a block box"@eggimage float 很好啊,幹嘛排擠它 XD原po:我的啟蒙書是這本 http://goo.gl/zmQTk4 可以參考一下對觀念會有很大的幫助
作者: alog (A肉哥)   2015-08-17 21:39:00
@Ageis 對一個已經是Block的區塊做Float 本身就是Block我覺得他舉的例子可以換別的不過的確已經變成Block

Links booklink

Contact Us: admin [ a t ] ucptt.com