PTT數位生活區 / Web_Design

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

看板Web_Design作者 (不如憐取眼前人)時間8年前 (2015/08/16 00:17), 編輯推噓14(14推 0噓 62→)
留言76則, 10人參與, 最新討論串1/1
最近在寫CSS的時候覺得自己只是在鬼畫符 就雖然寫是寫得出來　可是感覺好像就亂寫一通 想要知道有沒有哪邊有教 "什麼時候應該用float、float該怎麼分配適合" 例如說 　logo link link link 　　　　　左　　右　 右　　右 換成　　　左　　左　 左　 左　 其實也可以寫的視覺上看起來一樣　但是就是不知道哪種寫法比較好 然後float元素一排寫完之後下面的東西好像margin就有點難抓@ @ 是不是該加個 <div style"clear:both;"> "一直用relative、absolute來定位，網頁是不是很危險" 這個還蠻好用的可是怕用太多會混亂 "什麼時候應該用padding、margin" 因為很多時候一個沒有底色的東西　 用padding跟margin外表看起來是一樣的.. 買的書大多是一項一項教，比較沒有教整個排起來應該怎麼寫得"好"的 （寫出來我會，但是就是怕寫的差） 想請教大家能否推薦有什麼好的學習網站可以把這些觀念學好呢？ 還請大家多多指教，謝謝～～～ m(__ __)m -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 36.224.223.4 ※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1439655470.A.F03.html
推
08/16 00:53, , 1F
margin 是邊界 padding 是內距
08/16 00:53, 1F
推
08/16 00:59, , 2F
http://goo.gl/NlxA2Y relative、absolute的教學
08/16 00:59, 2F
→
08/16 00:59, , 3F
看起來是不會太危險拉
08/16 00:59, 3F
推
08/16 06:09, , 4F
有同感，常常為了元素定位很頭大
08/16 06:09, 4F
推
08/16 07:39, , 5F
想了解+1
08/16 07:39, 5F
推
08/16 07:54, , 6F
所以樓上兩位是想瞭解定位元素的啥東東？
08/16 07:54, 6F
推
08/16 08:02, , 7F
float 用在 display 屬性為 inline 或 inline-block的元素上
08/16 08:02, 7F
→
08/16 08:02, , 8F
position 用在 block or inline-block 元素上
08/16 08:02, 8F
→
08/16 08:02, , 9F
危險這件事情 應該先問怎樣為什麼會讓你覺得危險
08/16 08:02, 9F
→
08/16 08:03, , 10F
另外也有為了建立一個較為彈性的grid
08/16 08:03, 10F
→
08/16 08:03, , 11F
用float技巧構成也不是說沒有
08/16 08:03, 11F
→
08/16 08:04, , 12F
至於要不要clear float設定 可以去找clearfix
08/16 08:04, 12F
推
08/16 09:46, , 13F
一直用position還是會有問題，我記得我之前有個網站就是這
08/16 09:46, 13F
→
08/16 09:46, , 14F
樣，結果明明cssreset了，還是各家瀏覽器會有偏差，最後只
08/16 09:46, 14F
→
08/16 09:46, , 15F
能再重寫
08/16 09:46, 15F
推
08/16 09:58, , 16F
那有可能是不熟悉元素特性跟用了不該用的
08/16 09:58, 16F
→
08/16 09:59, , 17F
不然position是相當精準的東西
08/16 09:59, 17F
→
08/16 12:22, , 18F
@alog position 沒有限用在 block | inline-block
08/16 12:22, 18F
→
08/16 12:23, , 19F
float 也沒有限用在 inline | inline-block
08/16 12:23, 19F
→
08/16 12:24, , 20F
套用 float 的元素，會自動變成 block (可設 width/height)
08/16 12:24, 20F
→
08/16 12:27, , 21F
回原po 在float的外層加clear是為了讓外層size可自動調整
08/16 12:27, 21F
→
08/16 12:27, , 22F
margin 的問題你可能要確定是不是margin collapsing造成的
08/16 12:27, 22F
→
08/16 12:28, , 23F
用position並不會危險，用錯才會危險
08/16 12:28, 23F
→
08/16 12:29, , 24F
常見的錯誤像用 position 做2(多)欄式排版
08/16 12:29, 24F
→
08/16 12:31, , 25F
padding 就是內距，常見的問題是因不了解 box-model 造成的
08/16 12:31, 25F
→
08/16 15:03, , 26F
疑，所可能以是我當時做錯了什麼喔
08/16 15:03, 26F
推
08/16 16:36, , 27F
float 本身就是文繞圖的功能 一直以來沒有人很明確講該用在
08/16 16:36, 27F
→
08/16 16:36, , 28F
什麼元素上
08/16 16:36, 28F
→
08/16 16:36, , 29F
但是今天有人問了 當然只能根據使用的經驗 給點建議
08/16 16:36, 29F
→
08/16 16:37, , 30F
另外上了float並不會變成block元素
08/16 16:37, 30F
→
08/16 16:38, , 31F
那是有另外上屬性為block或inline-block
08/16 16:38, 31F
推
08/16 17:16, , 32F
順便再補充好了
08/16 17:16, 32F
→
08/16 17:16, , 33F
刻版面上 相較於 float， position 在複雜UI上的有更多充分
08/16 17:16, 33F
→
08/16 17:16, , 34F
發揮能力的空間
08/16 17:16, 34F
→
08/16 17:17, , 35F
因為只要配合 width height 以及 top left bottom right 其
08/16 17:17, 35F
→
08/16 17:17, , 36F
中兩組
08/16 17:17, 36F
→
08/16 17:17, , 37F
再配合 margin 屬性就能做到很完美的水平跟垂直的定位
08/16 17:17, 37F
→
08/16 17:17, , 38F
單用利用float 文繞圖排版的做法是沒辦法直接做到垂直定位
08/16 17:17, 38F
→
08/16 17:17, , 39F
你得需要配合其他的屬性才能刻出來
08/16 17:17, 39F
→
08/16 17:18, , 40F
而這方面position較為輕鬆一點 程式碼比較清醒
08/16 17:18, 40F
→
08/16 17:18, , 41F
清晰*
08/16 17:18, 41F
→
08/16 17:19, , 42F
只是position 事先要定義好明確的數值跟屬性 以及跟父元素
08/16 17:19, 42F
→
08/16 17:19, , 43F
的定位關係 若你沒有處理好 是比較容易出現不如預期的結果
08/16 17:19, 43F
→
08/16 17:19, , 44F
此外 position 也不是不能做多欄的grid 我認為這不算什麼危
08/16 17:19, 44F
→
08/16 17:19, , 45F
險或錯誤
08/16 17:19, 45F
→
08/16 17:19, , 46F
只是在最佳解上float有更好的優勢在
08/16 17:19, 46F
→
08/16 17:20, , 47F
相較於 float，position 就我剛講的 設定上會麻煩很多 因為
08/16 17:20, 47F
→
08/16 17:20, , 48F
必須定義清楚每一個欄之間的距離或大小
08/16 17:20, 48F
→
08/16 17:21, , 49F
float 則是本身的一些運作特性可以省略很多功夫
08/16 17:21, 49F
推
08/16 17:23, , 50F
而且在維護上 一樣的目標 float 刻出來的比較漂亮
08/16 17:23, 50F
→
08/16 17:24, , 51F
從susy 或是 960 grid 會用float 來實踐就表示那是真的最佳
08/16 17:24, 51F
→
08/16 17:24, , 52F
實踐
08/16 17:24, 52F
→
08/16 17:25, , 53F
position 若要挑缺點 其實除了上述的部分
08/16 17:25, 53F
→
08/16 17:25, , 54F
我是覺得維護上要挑對工具
08/16 17:25, 54F
→
08/16 17:25, , 55F
position 在複雜ui下的 若是用純粹的css維護
08/16 17:25, 55F
→
08/16 17:26, , 56F
可能在辨別父子元素之間的定位關係 跟設定屬性、計算上會很
08/16 17:26, 56F
→
08/16 17:26, , 57F
複雜
08/16 17:26, 57F
→
08/16 17:26, , 58F
光維護那段code你看到一堆數字就受不了
08/16 17:26, 58F
→
08/16 17:27, , 59F
用scss 來撰寫 利用mixin、變數跟巢狀的code來描述元素樣
08/16 17:27, 59F
→
08/16 17:27, , 60F
式 可以大幅減輕這個問題
08/16 17:27, 60F
→
08/16 23:46, , 61F
可以請原po 整理一下 alog 大大的回應嗎 不然好大一串XD
08/16 23:46, 61F
→
08/17 17:08, , 62F
本人不太喜歡用float, 有需要的地方我盡量都用
08/17 17:08, 62F
→
08/17 17:08, , 63F
inline-block代替 或是乾脆用別的排版方式
08/17 17:08, 63F
→
08/17 21:11, , 64F
08/17 21:11, 64F
→
08/17 21:11, , 65F
"When you float an element it becomes a block box"
08/17 21:11, 65F
→
08/17 21:13, , 66F
@eggimage float 很好啊，幹嘛排擠它 XD
08/17 21:13, 66F
→
08/17 21:17, , 67F
原po:我的啟蒙書是這本 http://goo.gl/zmQTk4 可以參考一下
08/17 21:17, 67F
→
08/17 21:18, , 68F
對觀念會有很大的幫助
08/17 21:18, 68F
→
08/17 21:39, , 69F
@Ageis 對一個已經是Block的區塊做Float 本身就是Block
08/17 21:39, 69F
→
08/17 21:39, , 70F
我覺得他舉的例子可以換別的
08/17 21:39, 70F
→
08/17 21:40, , 71F
不過的確已經變成Block
08/17 21:40, 71F
推
08/20 09:31, , 72F
各家瀏覽器會有偏差... 會不會是沒有 <!DOCTYPE>?
08/20 09:31, 72F
推
08/24 00:43, , 73F
我也不喜歡用 float，寧願用 relative position
08/24 00:43, 73F
推
08/24 00:47, , 74F
float 用了真的就是 block 耶!
08/24 00:47, 74F
→
08/24 00:47, , 75F
08/24 00:47, 75F
→
08/24 00:47, , 76F
受教了！
08/24 00:47, 76F
‣ 更多 Funitory 的文章
文章代碼(AID): #1LpsOky3 (Web_Design)
Web_Design 近期熱門文章
更多 近期熱門文章 >>
PTT數位生活區 即時熱門文章
更多 即時熱門文章 >>
‣ 更多 Funitory 的文章
文章代碼(AID): #1LpsOky3 (Web_Design)