盒模型 内容区 内边距 边框 外边距

什么是盒模型，为什么要用盒模型

    影响盒模型的大小有哪些

    将一个内容放在页面合适的位置，需要考虑到这个内容大小，位置，形状，就相当于，买一个家具

    css将所有内容的形状统一成矩形，然后只需要考虑内容大小

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

      1:内容区(content)   比如  冰箱

     2、内边距（padding）  比如   泡沫

    3、边框（border）      比如  纸箱

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

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

       1、内容区  用来放具体内容

            默认情况下

            width: 设置内容区的宽度;

            height: 设置内容区的高度;

   

    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; 

 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

设置内边距

        1、padding:10px;  指的是盒子的内容区与盒子边框之间的距离

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

        3、单独设置一边内边距

        padding-xxx:  ;    top  right bottom left  

外边距  margin  用来控制元素与元素之间的距离

       1、 margin-top:;  正值元素向下移动 负值元素向上

        margin-left: ;正值元素向右移动，负值元素向左

        margin-bottom: ;元素自己不动，正值挤着下面的元素向下，负值下面的元素向上

        margin-right:  对于块元素，不生效

      2、 margin:; 可以跟多个值，规则跟border-width一样