Day6 盒模型

　　　　　　　　　　　　　　　　　　　　Day6  盒模型 

1.一.標準盒模型（w3c盒模型）
        1）組成部分：
        content + padding + border + margin
           內容          內邊距        邊框       外邊距

 

        2)content  內容
        width
        height

        3）border  邊框   ; 三要素 :  寬/ 樣式 / 顏色
        border-style: solid(實線) | dotted(點線) | dashed(虛線) | double(雙實線 最小3px)|none(不顯示); 

　　必須屬性: ( 3px  黑色）
        border-color:;    邊框顏色
        border-width:;    邊框寬度

        簡寫：border:1px solid red;  推薦 不區分先後順序
注意:  在Style 屬性爲空的狀況下,整個邊框是不會出現的,這不管是統一寫在border或是單獨設置都是這樣的.

 

        設置單邊邊框：

border-top:15px solid blue;  上邊框
            border-top-color: ;
            border-top-width: ;
            border-top-style: ; 　　　　　　
　　　　　　　　　　　　　　　　　　　　 
border-bottom:15px dotted plum;  下邊框  (dotted虛線)
            border-bottom-color: ;
            border-bottom-width: ;
            border-bottom-style: ;
　　　　　　　　　　　　　　　　　　　　

border-left:12px double bluevioled;  左邊框   (double雙實線)
            border-left-color: ;
            border-left-width: ;
            border-left-style: ;
　　　　　　　　　　　　　　　　　　　　

 border-right:12px dashed green;  右邊框     (dashed虛線)
            border-right-color: ;
            border-right-width: ;
            border-right-style: ;
　　　　　　　　　　　　　　　　　　　　　

　

　　　4)外邊距  margin  取值可取正值,負值(像素px),%,  auto       

• 　  與其餘元素之間的空白區域,也就是設置盒子之間的距離.
•       外邊距是透明的

        語法:
　　　　　margin:value;  四周
        　　   margin:value value;  上下   左右
　　　　   margin:value value value;  上   左右   下
      　　    margin:value value value value;  上   右   下   左  （順時針轉）　　　　　　

eg:margin: 50px 10px 20px 30px;
 (上邊距50px,右邊距10px,下邊距20px,左邊距30px)

        單邊屬性：
        margin-top:;  上外邊距
        margin-bottom:;  下外邊距
        margin-left:;  左外邊距
        margin-right:;  右外邊距

 　　①塊級元素水平居中： margin : 0 auto;

  div{
            width:;
            margin:0 auto;
        }

       

　　②垂直方向上外邊距合併問題

•         垂直方向上外邊距相撞，取較大值
•         浮動元素的外邊距不合並    float:left;

　　③margin-top問題 : 當一個父元素裏面有第一個塊級元素,父元素既沒有邊框,有沒有padding的狀況下,給它設置一個margin-top,它會跟着一塊兒走下來..

　　　　　　　　　　 注意第一個要是塊級元素.
        1)父元素加border:1px solid transparent;
        2)父元素加padding-top:1px;
        3)父元素加overflow:hidden;
        4)父元素或者子元素浮動

.parent{
            width: 400px;
            height: 400px;
            background-color: palegreen;
            /*border: 1px solid transparent;*/
            /*padding-top: 1px;*/
            /*overflow: hidden;*/
            /*float: left;*/
        }

　　5)內邊距  padding  取值 不能取負值和auto

•         設置內容距邊距的距離,
•         內邊距會撐大容器.

　　語法:( 同margin )

        padding:value;  四周        padding:value value;  上下   左右        padding:value value value;  上   左右   下        padding:value value value value;  上   右   下   左（順時針轉）        單邊屬性：        padding-top:;  上內邊距        padding-bottom:;  下內邊距        padding-left:;  左內邊距        padding-right:;  右內邊距