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

猜你喜欢