css layout

主要參考自: http://learnlayout.com

disaply是在css layout中最基本的property,每一個element都有預設的display property

block: 從新的一行開始盡量佔據(<div>, <p>, <form>)
inline: 不會換行,忽略height, width, margin…etc屬性 (<span>, <a>, <img>)
inline-block: 兼具inline的特點(不換行),但又可以有寬高
none: 不顯示,不佔據空間 (<script> 。比較: visibility: hidden)

參考:
https://developer.mozilla.org/en-US/docs/Web/CSS/display

置中:
margin: 0 auto

position屬性:
預設值:static(等於沒有設定position)
relative必須配合其他屬性才有作用
fixed是保持在網頁的固定位置(relative to viewport),不會被scrollbar影響,適合做浮動的nav bar或是footer
absolute是相對於nearest positioned ancestor(positioned代表不是static)

float屬性: left / right /both 定義了float,會float在後面的div上,除非使用了clear屬性

This entry was posted in Front-end. Bookmark the permalink.

Leave a Reply