Box Model

box 由內部的 content 、內縮的 padding、邊線的 border、外圍的margin組成
boxdim

* box width = content width + padding width + border width

設計時必須把一般的 box width 拿去計算 content width 寫進CSS

* overflow 屬性有四種包括  visible / auto / hidden / scroll

overflow : visible

預設的樣式、超出邊界依然直接顯示

overflow : auto

超出邊界加上scrollbar

overflow : hidden

超出邊界的部分直接看不到

overflow : scroll

無論如何都有scrollbar

* position 屬性有四種包括 statics / relative / absolute / fixed

position: statics

預設的位置

position: relative

預設的位置經過 top, bottom, left, right 調整

position: absolute

瀏覽器固定的位置,下拉會移動

position: fixed

瀏覽器固定的位置,下拉也不會移動

* z-index
位置重疊的時候,決定重疊的順序
z-index值大的會在上面,一樣或沒有設定則已html code後出現的在上面

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s