盒模型--标准盒模型---怪异盒模型

盒模型:

.demo{
    overflow:hidden;/*超出隐藏*/
    width:300px;
    hight:300px;
    padding:
    background-color:blue;
    
    
}

1. 盒模型:

   1. 复合属性:

      1. border:大小 样式 颜色 :border的样式必须要写,不可少
      2. 注意:不给边框颜色,默认颜色就是内容字体的颜色
      3. 当不给边框大小的时候,默认边框大小为3px

   2. 分样式:

      1. border-width: 大小
      2. border-style: 样式 { solid 实线 dashed 虚线 dotted 圆点虚线 double双边框 }
      3. border-color: 颜色—单词 rgb rgba transparent(透明色) 十六进制(#fff白色 #000黑色 #aabbcc简写为#abc)

   3. 标准盒模型

      1. 一个盒子占据这个网页的总体宽度:

         1. width(总)=margin(左右)+border(左右)+padding(左右)+width(内容)

      2. 一个盒子占据这个网页的总体高度:

         1. width(总)=margin(上下)+border(上下)+padding(上下)+height(内容)

      3. 一个盒子的组成:

         1. content(内容)

             width:300px;
              hight:300px;
            

      宽和高定义了一个元素内容区域大小,元素的内容从宽和高的左上角开始排列内容

      2. padding(内边距)

      盒子变大—所占空间位置变大–撑大盒子(撑大多少,在对应的宽高减去多少)

      padding区域的颜色和内容区颜色一致

      padding —用于设置盒子的边框和内容区的距离—复合样式:

      一个值:上右下左 
      
      两个值:上下 左右
      
      三个值:上 左右 下
      
      四个值:上 右 下 左
      

      分样式:padding-top padding-right padding-bottom padding-left

   4. border(边框线)

   5. margin(外边距)

      margin : 盒子与盒子之间的距离

        1. 一个值:上右下左
      
        2. 两个值:上下 左右
      
        3. 三个值: 上 左右 下
      
        4. 四个值:上 右 下 左
      
        5. 特殊值:auto (自适应左右居中--左右有效 上下无效)
      
           ```
           margin:0 auto;
           ```
      

      5. 盒子–块级元素:不设置宽高 默认颜色是100%

   6. 怪异盒模型
      box-sizing:border-box;

      1. .box{
             width:250px;
             height:250px;
             padding:50px;
             background-color:blue;
             box-sizing:border-box;
         }
         

      2. 怪异盒模型:

         1. 空间宽度=width-padding(左右)-border(左右)
         2. 空间高度=width-padding(上下)-border(上下)

      3. 外边距合并现象:

         1. 相邻两个盒子:

            解决方案:

            1. 两个盒子之间加入一个空盒子(不建议这样:中间加元素(加div 设置边框 border:1px solid transparent; :伪元素)

         2. 当两个盒子嵌套(父子级关系)

            解决方案:

            1. 给父亲设置:overflow:hidden;
            2. 给父亲设置:padding
            3. 给父亲设置:border :1px solid red;