1. 程式人生 > >有關定位、內外邊距、浮動、寬度的幾點

有關定位、內外邊距、浮動、寬度的幾點

定位

  • 絕對定位、固定定位都會將行內元素轉換為行內塊元素,都會脫標,而相對定位不會
  • 未巢狀時,絕對定位和固定定位一樣,均從瀏覽器出發。固定定位無論是否巢狀均從瀏覽器出發,絕對定位看父盒子
  • 相對定位從自身位置出發

padding和margin

  • padding:繼承的盒子一般不會被撐大(子盒子未定義寬度時,水平不會,垂直會),當子盒子設定寬度時,padding值大於父盒子,則子盒子會溢位(不會掉出來),類似以下圖

 

  • padding:若沒有巢狀,自身內容有padding時,會撐大
  • margin:垂直方向外邊距會合並
  • margin:巢狀時,子盒子設定垂直方向margin時,外邊距會塌陷
  • margin: 行內元素可定義左右外邊距,不能定義上下,若要設定上下,加上display:block;;

浮動

  • 浮動的盒子要設定寬度

a標籤

  • a標籤之間有3px的距離,計算時要去掉

寬度

  • 父級元素的盒子會繼承盒子的寬
  • 塊級                    會
  • 浮動                  不會
  • 行內塊              不會