[请益] 正确/好的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