CSS的元素显示模式(块元素、行内元素、行内块元素和显示模式转换)

目录

  • 1. 块元素
  • 2. 行内元素
  • 3. 行内块元素
  • 4. 转换为块元素
  • 5. 转换为行内元素
  • 6. 转换为行内块元素

1. 块元素

常见的有


    1. 特点如下:

      • 独占一行
      • 可以设置高度、宽度、外边距、内边距
      • 宽度默认是父级的100%
      • 里面可以放行内元素或块级元素
      • 注意:文字类的块元素,如

        ~

        ,里面不能放块元素

      2. 行内元素

      常见的有

      特点如下:

      • 一行可以放多个行内元素,父元素宽度不够则自动换行
      • 不可以设置宽度、高度
      • 默认宽度是内容的宽度
      • 里面只能放文本或行内元素
      • 注意:里面不能放

      3. 行内块元素

      常见的有

      同时具有块元素和行内元素的特点

      4. 转换为块元素

      
      
      
          
          test title
      
          
      
      
      
      
      链接一
      链接二
      
      
      
      

      显示如下:
      CSS的元素显示模式(块元素、行内元素、行内块元素和显示模式转换)_第1张图片

      5. 转换为行内元素

      
      
      
          
          test title
      
          
      
      
      
      
      
      盒子一
      盒子二

      显示效果如下:
      CSS的元素显示模式(块元素、行内元素、行内块元素和显示模式转换)_第2张图片

      6. 转换为行内块元素

      
      
      
          
          test title
      
          
      
      
      
      
      
      盒子一
      盒子二

      显示效果:
      CSS的元素显示模式(块元素、行内元素、行内块元素和显示模式转换)_第3张图片

      你可能感兴趣的:(CSS3,css块元素,css行内元素,css行内块元素,css显示模式转换,css元素显示模式)