Css box model block type, part characteristic line box model, boxes line block

1. Block box model

Definitions: display attribute of the element block

1. Comparative cassette type

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

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

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

Part 2. The cassette block

• Content content

  Definition: content portion commonly called the entire contents of the cartridge box content.box

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

• Padding padding
  Definition: The contents of the box into the box from the border

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

• Border border
  Definition: The box model frame styles

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

• Margin 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. Run box model

Definitions: display properties for inline elements

• Line box Features

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

``

3. The box model line block

Defined: display attribute element is inline-block box

• Characteristic line block box

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