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:;  右内边距