行盒

行盒

• 图片区域父元素

  figure父元素

  子元素figcaption和img

  <figure>
          <img src="../marvel_fans/movie_pic06.png" alt="" title="漫威">
          <!-- 图片分类子元素，补充说明图片并且将此块内容归类为一块 -->
          <figcaption>
              复仇者
          </figcaption>
      </figure>

   

• <!-- map父元素
          map的name值与img的usemap相同
          map父元素
          area划分可点击的区域 -->
      <map name="f74" id="f74">
          <!-- shape 形状
               coords 坐标（圆）圆心轴，半径 -->
          <area shape="circle" coords="697,337,40" href="https://www.baidu.com/" alt="">
          <area shape="circle" coords="203,89,40"
              href="https://act.daoju.qq.com/act/a20210119businies/index.html?e_code=507931" alt="">
          <!-- 矩形找对角线坐标-->
          <area shape="rect" coords="425,303,475,373" href="https://www.baidu.com/" alt="">
          <!-- 多边形包含其轮廓的坐标 -->
          <area shape="poly" coords="399,442,499,444,402,466,498,463,407,482,492,477,451,497"
              href="https://www.baidu.com/" alt="">
          </map>

• <!-- 视频 -->
      <div>
          <video src="./loop.mp4" controls autoplay muted loop>
              <source src="">
          </video>
      </div>
      <!-- 音频 -->
      <audio src="./gotime.mp3" autoplay controls></audio>

  音频，视频，图片，都是行内元素

  可替换元素设置宽高有效 img video audio

  非可替换元素不能设置宽高

• <!-- 行盒的特点 -->

  有文本类内容，必须包含在行盒内

  若文本内容的标签是非行盒，则内容包含在匿名行盒中

  文本类内容垂直方向是以基线对齐（baseline）

  topline顶线

  middleline 中线

  baseline基线【默认值】

  bottom底线

  行盒特点

  垂直方向上的padding margin无效

  行盒必定属于常规流

  只要给浮动和绝对定位就会变为块盒

  span {
      vertical-align:baseline;
  }

• /* 使用属性选择器取消多边形的轮廓 */
  area[shape="poly"]:focus {
      outline: none;
  }