盒模型内容

网页的最底层叫文档流，元素分类的特点前提是在文档流中，一旦元素脱离文档流，就不会再区区分块、行内、行内块

盒模型、盒子模型、框模型

1:内容区(content)     冰箱【比喻】

            2、内边距（padding）   泡沫

            3、边框（border）      纸箱

            4、外边距（margin）   控制位置

影响盒模型大小：内容区，内边距，边框

2:边框（border）元素设置边框

/* background-color: rgb(222, 255, 170); */

        /* 设置边框大小 */

         /* border-width: 10px; */

        /* border-bottom-width: 40px; */

        /* 设置边框样式 */

        /* border-style:solid; */

       /* border-top-style: dashed; */

        /* 设置边框的颜色 */

        /* border-color:transparent red  transparent transparent; */

        /* border-top-color:black ;

        border-right-color:transparent ;

        border-bottom-color:transparent ;

        border-left-color: transparent; */

        /* 简写方式 */

        border: 15px solid  black;

        /* border-color: red transparent transparent transparent; */

        /* border-left: 10px solid blue; */

       border-bottom: none;

1、  border-width:;

        4个值  上  右  下  左

        3个值   上  左右   下

        2个值  上下  左右

        1个值  上下左右

    2、 可以单独设置某一边的宽度

       border-xxx-width:;   top  right  bottom  left

     3、 border-width:; 选写的   有默认值：1.5px左右

     -->

     <!--1、 border-style: ;

            可选值：

                   none  默认值，没有样式

                  solid  实线

                  dashed  虚线

                  double  双线

                  dotted  圆点虚线

         2、单独设置某一边的边框样式

         border-XXX-style: ;  top  right  bottom  left

         3、border-style：；也可跟多个值，规则跟border-width一样

    -->

    <!--

      1、 border-color:;  也可跟多个值，规则跟border-width一样

      2、单独设置某一边的边框样式

         border-XXX-color: ;  top  right  bottom  left

      3、自定义小箭头

        border-color:transparent red  transparent transparent;

    -->

    <!--

    border简写

   1、 border: 10px solid blue;

   2、可以单独设置某一边的边框

     border-xxx    top  right  bottom  left

   3 、border：solid；  

   4、border-XXX: none;  top  right  bottom  left

    -->