盒子模型

盒子

盒子關系（標準文檔流）

• 行內元素：只可以設置左右外邊距，上下內邊距會影響相鄰的元素
• 塊狀元素：兩個垂直的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