css 块盒模型的类型，组成部分、行盒模型特点，行块盒

1.块盒模型

定义:display属性为block的元素

1.盒子类型对比

    (1)行盒在页面中不换行，块盒独占一行

    (2) 默认浏览器样式表设置的块盒：容器元素，h1-h6,p

        默认浏览器样式表设置的行盒：span,a,img,video,audio

2.块盒的组成部分

• 内容 content

  定义：内容部分通常叫做整个盒子的内容盒 content.box

    (1) width、height，设置的是盒子内容的宽高
  

• 内边距 padding
  定义：盒子边框到盒子内容的距离

   (1) padding-left padding-right padding-top padding-bottom   (简写 padding: top right bottom left)      【分别对应左、右、上、下内边距】
  

• 边框 border
  定义: 盒子模型外框的样式

         （1）边框(border) = 边框样式(border-style)+边框宽度(border-size)+边框颜色(border-color) 
  
         （2） border-style和border-size都是速写属性，有top right bottom left四个值
  

• 外边距 margin

        （1）margin属性为给定元素设置所有四个(上下左右)方向的外边距属性， 这是四个外边距属性设置的简写
  
               四个外边距属性设置分别是： margin-top， margin-right， margin-bottom 和 margin-left（指定的外边距允许为负数
  
        （2） margin属性的取值顺序是：（上右下左 ）    如下是简写的四种情况：
  
                margin:10px 5px 15px 20px;               //上外边距是 10px 右外边距是 5px下外边距是 15px左外边距是 20px
                margin:10px 5px 15px;                    //上外边距是 10px右外边距和左外边距是 5px下外边距是 15px
                margin:10px 5px;                         //上外边距和下外边距是 10px右外边距和左外边距是 5px
                margin:10px;                             // 所有 4 个外边距都是 10px
  
        （3）边框到其他盒子的距离，常规流两个盒子的margin重叠
  
        （4）margin的top和bottom属性对非替换内联元素无效，例如<span>和<code>
  
  
  
  

2. 行盒模型

定义：display属性为inline的元素

• 行盒特点

   （1）盒子沿着内容延伸
  
   （2）行盒不能设置宽高        // 调整行盒的宽高，应该使用字体大小，行高，字体类型，间接调整
  
   （3） 内边距(填充区)        //水平方向有效，垂直方向仅仅会影响背景，不会占据空间，会覆盖别的盒子，而不是挤走
  
   （4）边框                 //水平方向有效，垂直方向仅仅会影响背景，不会占据空间，会覆盖别的盒子，而不是挤走
  
    (5)外边距                 //水平方向有效，垂直方向完全无效
  

``

3.行块盒模型

定义：元素的display属性为inline-block的盒子

• 行块盒特点

  （1）不独占一行
    
  （2）块盒模型中所有尺寸全部有效
  
  （3）空白折叠            // 空白折叠，发生在行盒内部 或 行盒之间，原因是存在换行符(br)
  
  （4）可替换元素 和 非可替换元素
  
         大部分元素，页面上显示的结果，取决于元素内容，称为非可替换元素（div a p）
         少部分元素，页面上显示的结果，取决于元素属性，称为可替换元素（img video audio）
               <video> 标签定义视频，比如电影片段或其他视频流。
               <audio> 标签定义声音，比如音乐或其他音频流。
  
   (5) 绝大部分的可替换元素都为行盒，类似于行块盒，盒模型中所有尺寸都有效
  
        例：  img元素->图片自动适应宽高，object-fit(css3属性)：fill(默认取值，填充满盒子) 
  
              contain(不打破比例显示，以宽高中最短的为标准) 
  
              cover(不打破比例，又要填充满盒子，牺牲图片信息)