盒子模型及布局

• 盒子模型

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

     -css将页面汇总所有的元素的都设置为一个个矩形的盒子

     -将元素设置为矩形的盒子后，对页面的布局就变成了将不同的盒子摆放到不同的位置

     -每一个盒子，都有以下几个部分

                         内容区（content）

                         内边距（padding）

                         边框（border）

                         外边距（margin） 决定是盒子和盒子的距离

内容区  

                 使用width设置盒子内容区的宽度

                 使用height设置内容的高度

                  width和height只是决定内容区的大小，而不是盒子的整个大小

边框（border）：边框属于盒子的边缘，边框里面是内容，出了边框就是盒子的外部，边框会影响我们盒子的大小

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

                    border-width:边框的宽度

                    border-color:边框的颜色

                    border-style:边框的样式

border-width

                  设置边框的宽度  默认值 一般2-3px

                  可以分别设置四个边 边框的宽度

                       如果设置四个值  上 右 下 左 (顺时针方向)

                          设置三个值   上  左右  下

                          设置两个值   上下  左右

                          设置一个值   上下左右

                    border-xxxx-width  可以设置某一边框的宽度

border-style：设置边框的样式  设置边框的必选项

                  可选值：

                      none  默认值 没有边框

                      solid  实线

                      dashed 虚线

                      double 双线

                      dotted  点线  

            border-xxxx-style  可以设置某一边框的样式

 border-color

                  浏览器默认的是黑色，和边框宽度，样式一样，可分别设置

                  border-xxxx-color  可以设置某一边框的颜色  

border 的简写方式

               参数：width  color  style  顺序都可以

               可以分别设置四边边框，border-left    ······

               哪一边不需要可以设为border-xxx: none; ······     

内边距（padding）指的是盒子的内容和边框之间的距离

            一共有四个方向

               padding-top

               padding-right

               padding-left

               padding-bottom

          注意：

            1:内边距会影响盒子的可见框的大小,元素的背景色会延伸到内边距

          盒子的大小是由内容区，内边距和边框共同决定

外边距（margin）指的是当前盒子和其他盒子之间的距离

             外边距不会影响盒子可见框的大小，而是影响的是盒子的位置

             盒子有四个方向的外边距

              margin-top: ;  

                    上边距，可设置正值，元素会向下移动

                                  也可以设置负值，元素向上移动

              margin-right

                   默认情况下不会产生效果

             margin-bottom

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

              margin-left

                   左外边距  设置正值，元素向右移动

        总结：

          由于页面中的元素默认下是靠左靠上摆放

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

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

可以通过box-sizing 用来设置盒子尺寸的计算方式  也就是width，height指的是谁

            box-sizing

               可选值：

                 content-box  内容区  默认值

                 border-box  宽高设置的就是整个可见框的大小  包含内容区，边框，内边距

• 水平布局 

     元素的水平布局有几个属性共同决定

        margin-left  border-left paddin-left width  padding-right border-right margin-right

        一个元素在其父元素中，水平方向的等式

        margin-left + border-left+ paddin-left+ width + padding-right +border-right +margin-right

            =父元素宽度

        0 + 0 + 0 + 100+ 0 + 0 +0=400  ？？

        以上等式满足，如果不满足，则浏览器会自动调整，这个叫过度约束

        --浏览器调整

          1:如果七个值没有auto  ，那么浏览器会自动调整margin-right使我们等式满足

          2:这七个值，width，margin-left，margin-right 可以设置auto

               如果有设置auto，浏览器会自动调整auto的值

                如果设置margin-left为auto

                例子： 300 +0+0+100+0+0+0=400

          3:如果同时设置width  margin  为auto，只调整width宽度

          4:如果设置宽度固定，设置margin为auto

              则两边的外边距会设置为相同的值，让元素在父元素中居中

• 垂直方向

          1:不设置高度，默认被内容撑开

          2:设置了，就听设置  

          元素如果溢出

          overflow  处理溢出内容

           可选值：

                 visible 溢出的内容会正常显示

                 hidden  溢出的内容会被裁减，不会显示

                 scroll  出现双侧滚动条

                 auto   根据溢出内容，出现滚动条

• 内联元素的盒子

       行内元素的盒子

             1:不能设置宽高

             2:padding可以设置,但不会改变页面垂直的布局

             3:border可以设置，也不会改变页面垂直的布局

             4:margin可以设置水平方向的外边距，垂直方向的不生效

                  两个行内元素的水平外边距，不会重叠，而是求和

       display  属性  用来设置元素的显示类型

           可选值：

             block   将元素设置为块元素

             inline  将元素设置为行内元素

             inline-block  行内块元素（即可设置宽高，也不会独占一行）

             none   将元素隐藏

             table  将元素设置为一个表格

• 轮廓和圆角

     box-shadow  设置元素的阴影效果，不会影响到页面的布局

                 参数：

                   1:水平偏移量  可正可负 必填

                   2:垂直偏移量   可正可负 比填

                   3:模糊半径   可填

                   4:颜色  一般用rgba

                   模糊半径设置比水平和垂直偏移量大时，四周都会出现阴影效果

     border-radius: 设置圆角  

              可以写四个值

              border-radius: 50%; 设置圆形

              四个属性值顺序  左上  右上  右下  左下

                                  3个  左上  右上左下   右下

                                  2个  左上右下   右上左下

                                  1个  共用

               可以给单独一角设置圆角：border-xxx-xxx-radius