盒子模型 基础

1、文档流

文档流（normal flow）

         网页是一个多层的结构,设置样式样式，也是一层一层的设置，最终我们看到的最上面的一层

           文档流是网页最底层

          我们创建的元素默认情况下，都在文档流中

          元素分为两种状态：在文档流中，脱离文档流

2、盒子模型

盒子模型：就是将页面所有的元素都统一设置为一个个盒子，一个个矩形，在布局时，就不用考虑

        元素的形状，只需要考虑元素的大小，大大的方便了页面的布局

盒模型、盒子模型、框模型（box model)

          内容区（content）       

          内边距（padding）                  

          边框  （border）                    

          外边距（margin）

影响盒模型大小是：内容区、内边距、边框，外边距不会影响到盒子的大小 

3、盒子模型-边宽

    边框（border）元素   设置边框

          边框属于盒子边缘，边框里面属于盒子内部，出了边框都是盒子的外部

            设置边框必须指定三个样式

            border-width   设置边框大小

               （1）、可以跟多个值，值与值之间用空格隔开

                  四个值   上  右  下  左

                  三个值   上  左右  下

                  二个值   上下  左右

                  一个值    上下左右

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

                        top right left  bottom

                border-XXXX-width:;

                （3）、有默认值，默认值大小是1-3px

          border-style    设置边框的样式

              (1)可选值：

                solid   实线

                double   双线

                dotted  圆点虚线

                dashed   虚线

               (2)可以单独设置某一边的样式

                border-XXX-style: ;

                  top  bottom  left  right

              （3）、没有默认样式，设置边框必须要设置

             

            border-color   设置边框的颜色

              （1）、可以放多个颜色值  四个，三个，两个，一个

                  规则跟border-width是一样的

               （2）、可以单独设置某一边颜色

                border-XXX-color: ;

                  top  bottom  left  right

              （3）、有默认值，默认值是黑色

     

border 简写

      (1)、 border: 边框的大小  边框的样式  边框的颜色;

       三个参数以空格隔开，不分先分后顺序

       （2）单独设置某一边边框

          border-xxx:边框的大小  边框的样式  边框的颜色;

            xxx：top  bottom  left  right

        (3):border:none;去除边框

4、盒子模型-内边距

内边距（padding）：

    内容区和边框之间的距离，它会影响到盒子的大小

    （1）、分别给每边设置内边距

        padding-top: ;

        padding-right: ;

        padding-bottom: ;

        padding-left: ;

2）padding简写

        padding后可以写多个值

padding :   top ,  right  ,  bottom  ,  left  ;

5、外边距

外边距 margin

    可以控制元素的位置，它不会改变盒子的大小

    （1）margin-top  正值，盒子是向下移动，负值，盒子是向上移动

        margin-right  设置是没有效果

        margin-left  正值，盒子是向右移动，负值，盒子是向左移动

        margin-bottom  盒子本身不动，盒子下方的元素，正值向下，负值向上

    (2)margin 简写  

       margin :   top ,  right  ,  bottom  ,  left  ;

由于页面中的元素都是靠左靠上摆放的，

  所以当我们设置上和左外边距时，会导致盒子自身的位置发生改变，

  而如果是设置右和下外边距会改变其他盒子的位置（挤别人）

外边距指的是当前盒子与其他盒子之间的距离，

  他不会影响可见框的大小，而是会影响到盒子的位置。

 盒子有四个方向的外边距：

  margin-top

      上外边距，设置一个正值，元素会向下移动

  margin-right

     默认情况下设置margin-right不会产生任何效果

  margin-bottom

      下外边距，设置一个正值，其下边的元素会向下移动，挤别人

  margin-left

      左外边剧，设置一个正值，元素会向右移动