css入門003

標籤：line   position   order   clear   play   padding   isp   繼承   block   

盒子模型盒子盒子關係（標準文檔流）

• 行內元素：只可以設定左右外邊距，上下內邊距會影響相鄰的元素
• 塊狀元素：兩個垂直的margin會合并，大的margin起作用（margin塌陷 ）
• 元素嵌套的時候，設定在子項目上的margin會被父元素搶走，解決方案：設定父元素border或者父元素overflow

屬性的繼承問題

• 文本類，字型，顏色，子項目會繼承父元素的屬性
• 布局類，邊距，大小，邊距，背景不會繼承

定位相對定位

• 相對於自身原先的位置

絕對位置

• 相對於前面一個定位的祖先元素，直到html

固定定位

• 相對於螢幕

布局的相關屬性尺寸

• width
• max-width
• min-width
• height
• max-height
• min-height

內邊距（補白/內補白）

• padding
• padding-left
• padding-right
• padding-top
• padding-bottom

外邊距（邊距/外部白）

• margin
• ......

布局的相關屬性

• display none/block/inline/inline-block
• visibility hidden/visible/collapse
• overflow hidden/visible/auto/scroll
• overflow-x
• overflow-y
• float:left/right
• clear:清除浮動對後面的影響 both/left/right
  • 例：<br >
  • overflow:auto;

定位屬性

• position:static(預設值)/relative(相對定位)/absolute(絕對位置)/fixed(固定定位)

• 三個定位的優先順序一樣

• left
• right
• top
• bottom
• z-index 顯示優先順序。只能設定給已經定位的元素

隱藏元素

• visibility：hidden；隱藏了元素，但位置還在
• display:none;位置和元素均隱藏了

css入門003