文章出處：
http://zh-tw.learnlayout.com/
很高興由前端大神 Will保哥 翻譯的一篇文章~~
這篇對於初入html,css開始寫網頁的設計師們很有幫助(以前我自學時都沒有...)
而且還追加說明了很多css3新奇的功能
簡直就是替現在作網頁設計的人解決了好多問題(box model阿...column阿...flex box阿...這些新的屬性在過去都沒有，都需要"經驗"才能獲知解決方案...)
總而言之，針對這篇文我想補充幾點~
依過去我的經驗作幾點分享(好像我是個老人似的....)
Display&Flaot
我幾乎都是使用float來作版面配置，而不使用display來作的原因有二因為display有跨瀏覽器標準的議題(IE大魔王)，容易產生誤差，變的需要那邊寫一點hack這邊寫一點hack
而容易解決的方案就是float，瀏覽器沒什麼相關誤差，完美呈現(只要你對flaot很熟悉)！相關diaply議題可以參考這裡或這裡還有我曾經寫過的文章
當然也不是沒解，只是會有點傷腦筋，除非我必須要使用瀑布流排版或是我很確定不支援哪些瀏覽器時我才會使用display，或有時使用display只是用來做某一區塊內的layout才作
也許有人會說可以使用一些css framework來作...熟不知...有時候客戶出的版面可不是只是用framework就能解決的....
總之，我自認為沒有切不出的版，什麼視覺版面來我絕對切得出來，用不用framework我倒是沒什麼意見，好用就用囉
再來float在排版時都要去clear float，但只要你能"確定父層元素"的高，然後float內容不超過高度，你就可以不用清除囉，不過這牽扯到html結構上的排版，不太好解釋....不過也有人說那不是通則，所以也不是多好的撇步...
Clear
一般clear用來清除浮動的效果，而網路上很多神人寫出了clearfix hack來完美清除，而且我也用了好多年，方法就是使用偽元素:after加一個clear:both，其他還必須加content:"";，但我最近改用overfloat:hidden了(也可以auto)，而且效果一樣，語法可是節省很多不過依據我的經驗，並不是完美可解，因為如果你需要在一個有高度數值的div內容設定overfloat:hidden的話，就會爆爆爆...不過我忘了我那時遇到的問題是什麼了(好不負責)，那時候就會使用clearfix，依照判斷在去取捨
Box model
上一篇文章有稍微提到過(真的只是提到而已)文章中，他提醒你使用margin跟padding的問題
而我依據自己經驗的解釋來提供理解
假如要設定500x500正方形的div，還需要有上下左右20px的padding內距
那就可以這樣算：500的div寬=500-20(左邊距)+20(右邊距)=設定寬460
高度同理
會影響到box model的還有border-width，等於會直接加上你設定的寬度
例如你上面減掉padding後得到了460寬，但你想要在加上10px的邊框，那麼你就要在將你的寬度減掉20，才會等於你心目中有內距、有邊框，然後總共500寬的div
但!!是!! 你只要設定了box-size:border-box，以上問題一勞永逸，但還是有跨瀏覽器議題...
Margin
margin有時候會影響到父元素，尤其是在往上頂的時候，會連父元素一起頂，我自己也還沒找到原因，通常我就不設定子元素的margin-top，而是去設定父元素的padding-top我後來想想我自己做的時候，要頂的時候都是margin-bottom而已，還真的比較少用top
另外margin可以設定負值(padding不可設定負值)，很多人利用他來作lightbox的垂直左右居中(前提是必須設定寬高)
千萬不用使用負值來排版，看過幾個案例，真的很慘...
Flexbox
這個是我認為最棒的屬性喔喔喔喔喔~~~如果以後都能支援他多棒阿，頁面一下子就咻咻休切完囉~~~
期待他能夠普及化，目前還是有跨瀏覽器的議題存在....
根本就完勝float跟display(排版而言)
(其實我覺得那篇文章根本不是初學者阿~~)
沒有留言:
張貼留言