【學習筆記之CSS+DIV】CSS盒子模型

CSS設計徹底研究第3章筆記

*紅色標記的為預設值

• border（邊框）：border-top，border-bottom， border-left，border-right

     1.border-color（邊框顏色）；

     2.border-width（邊框粗細）：medium|thin| thick|數值；

     4.border-style（邊框樣式）：none|hidden（隱藏）|dotted（虛線）|dashed（點線）|solid（實線）|double（雙實線）|groove（IE不支援）|ridge（IE不支援）|inset（IE不支援）|outset（IE不支援）。

• padding（內邊距）：padding-top，padding-bottom ，padding-left，padding-right
• margin（外邊距）：margin-top，margin-bottom ，margin-left，margin-right
  當margin設為負數時，會使被設為負數的塊向相反的方向移動，甚至覆蓋在另外的塊上。當塊之間是父子關係時，通過設定子塊的margin參數為負數，可以將子塊從父塊中“分離”出來。
• background-color（背景顏色）
  1.在給元素設定background-color背景色時，IE作用的地區為content+padding，而Firefox則是content+padding+border。
  2.body是一個特殊的盒子，它的背景色會延伸到margin的部分。
• 屬性值的簡寫形式 

     1.如果給出2個屬性值，前者表示上下的屬性，後者表示左右的屬性；

     2.如果給出3個屬性值，前者表示上的屬性，中間的數值表示左右的屬性，後者表示下的屬性；

     3.如果給出4個屬性值，依次表示上、右、下、左的屬性，即順時針排序。

• 標準流
  所謂“標準流”，就是指在不使用其他的與排列和定位相關的特殊CSS規則時，各種元素的排列規則。
• 元素的分類

     1.區塊層級元素（block）：佔一行

     區塊層級元素div1和div2之間的垂直margin=MAX(div1的margin-bottom , div2的margin-top)。

     2.行內元素（inline）

     行內元素span1和span2之間的水平margin=span1的margin-right + span2的margin-left。

• 盒子的浮動

     1.設定浮動：float:none|left|right

     2.清除浮動：clear:none|left|right|both

• 擴充盒子的高度

實際效果

希望實現的效果

     一個div的範圍是由它裡面的標準流內容決定的，與裡面的浮動內容無關。

     【解決方案】在其後添加一個div，並設定樣式如下：

     .father .clear{

     margin:0;

     padding:0;

     border:0;

     clear:both;

     }

     *注意：這裡必須指定其父div，並覆蓋原來對margin,padding和border的設定。

• 盒子的定位
  position:static|relative|absolute|fixed
  1.static：這是預設的屬性值，也就是該盒子按照標準流（包括浮動方式）進行布局。
  2.relative：相對定位。
  （1）除了將position屬性設定為relative之外，還需要指定一定的位移量，水平方向通過left（向右）或者right（向左）屬性來指定，豎直方向通過top（向下）或者bottom（向上）屬性來指定。
  （2）使用相對定位的盒子，會相對於它原本的位置，通過位移指定的距離，到達新的位置；
  （3）使用相對的盒子仍在標準流中，它對父親和兄弟盒子都沒有任何影響。
  3.absolute：絕對位置。
  （1）使用絕對位置的盒子以它的“最近”一個“已經定位”（position屬性被設定，並且被設定的不是static）的“祖先元素”為基準進行位移。如果沒有已經定位的祖先元素，那麼會以瀏覽器視窗為基準進行定位；
  （2）使用絕對位置的盒子從標準流中脫離，這意味著它們對其後的兄弟盒子的定位沒有影響，其他的盒子就好像這個盒子不存在一樣；
  （3）如果設定了絕對位置，而沒有設定位移屬性，那麼它仍將保持在原來的位置。這個性質可以用於需要使某個元素脫離標準流，而仍然希望它保持在原來的位置的情況；
  （4）IE6的BUG：錯誤的位置和正確的位置相差了父div的padding的寬度。
  【解決方案】給父div（定位的基準盒子）增加一條CSS樣式：height:1%;
  4.fixed（IE6不支援）：稱為固定定位，它和絕對位置類似，只是以瀏覽器視窗為基準，進行定位。
• 盒子的display屬性
  display : inline|block|none