【Web 前端】元素分类>>

元素分类

块状元素

~<6>

      内联元素


      内联块状元素




      详解:

      >>块级元素

      设置display:block将元素显示为块级元素

      举个例子   a{display:block;} 将行内元素a转换为块级元素,使a元素有块级元素的特点

      >>>特点:每个块级元素都从新的一行开始,其后元素另起一行;

          元素宽度、高度、行宽、底和顶边距都可以设置、

          元素宽度在不设置的情况下,是它本身父容器的100%;


      例子 

      
      
      
      
      内联块状元素
      
      
      
      

      hahahha

      div1
      div2

      段落1段落1段落1段落1段落1


      显示:

      hahahha

      div1
      div2

      段落1段落1段落1段落1段落1


      >>行内元素

      块状元素可以由代码display:inline设置为行内元素

      >>>特点:

      1、和其他元素在一行上

      2、高度、宽度、行高、顶部底部边距不可以设置

      3、元素宽度是它包含的文字和图片的宽度,不可以改变


      行内元素之间会产生间隙bug问题的场景:

      1、当行内元素之间有“回车”、“tab”、“空格”时就会出现间隙。

      如下代码:

      1 2 33333 44444 555555

      解决方法:

       1、写在一行,之间不要有空格之类的符号。

      123333344444555555


      2、使用font-size:0

      div{font-size:0;}
      a,span,em{font-size:16px;}


      内联块状元素

      display :inline:block;

      >>特点:

      1、和其他元素在同一行上

      2、元素高度、宽度、行高、顶底间距可以设置

      
      
      
      
      内联块状元素
      
      
      
      1
      2
      3
      4
      
      









      你可能感兴趣的:(Web自学)