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

來源:互聯網
上載者:User

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
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.