行内元素有哪些，块级元素有哪些，空(void)元素有哪些?-千锋教育

行内元素有哪些，块级元素有哪些，空(void)元素有哪些?

发布时间:2023-10-13 10:25:00

发布人:xqq

一、行内元素有哪些，块级元素有哪些，空(void)元素有哪些

行内元素: a、b、span、img、input、strong、select、label、em、button、textarea 。块级元素: div、ul、li、dl、dt、dd、p、h1-h6、blockquote 。空元素: 即系没有内容的HTML元素，例如: br、meta、hr、link、input、img 。

二、块级元素、行内元素、行内块元素的区别

1、块级元素 block

块级元素，顾名思义，该元素呈现“块”状，所以它有自己的宽度和高度，也就是可自定义 width 和 height。除此之外，块级元素比较霸道，它独自占据一行高度（float浮动除外），一般可以作为其他容器使用，可容纳块级元素和行内元素。块级元素有以下特点：

每个块级元素都是独自占一行；高度，行高，外边距（margin）以及内边距（padding）都可以控制；元素的宽度如果不设置的话，默认为父元素的宽度（父元素宽度100%；多个块状元素标签写在一起，默认排列方式为从上至下。

   // 定义地址    // 定义表格标题        // 定义列表中定义条目       // 定义文档中的分区或节      // 定义列表       // 定义列表中的项目    // 定义一个框架集    // 创建 HTML 表单      // 定义最大的标题     // 定义副标题 
     // 定义标题      // 定义标题 
     // 定义标题 
     // 定义最小的标题 
     // 创建一条水平线     // 元素为 fieldset 元素定义标题      // 标签定义列表项目     // 为那些不支持框架的浏览器显示文本，于 frameset 元素内部 <noscript>    // 定义在脚本未被执行时的替代内容 <ol>     // 定义有序列表 <ul>    // 定义无序列表 <p style="text-indent: 2em;">     // 标签定义段落 <pre>     // 定义预格式化的文本 <table>     // 标签定义 HTML 表格 <tbody>     // 标签表格主体（正文） <td>    // 表格中的标准单元格 <tfoot>     // 定义表格的页脚（脚注或表注） <th>    // 定义表头单元格 <thead>    // 标签定义表格的表头 <tr>     // 定义表格中的行</code></pre><p style="text-indent: 2em;"><strong>2、行内元素 inline</strong></p><p style="text-indent: 2em;">行内元素不可以设置宽（width）和高（height），但可以与其他行内元素位于同一行，行内元素内一般不可以包含块级元素。行内元素的高度一般由元素内部的字体大小决定，宽度由内容的长度控制。 行内元素有以下特点：</p>不会独占一行，相邻的行内元素会排列在同一行里，直到一行排不下才会自动换行，其宽度随元素的内容而变化；高宽无效，对外边距（margin）和内边距（padding）仅设置左右方向有效 上下无效；设置行高有效，等同于给父级元素设置行高；元素的宽度就是它包含的文字或图片的宽度，不可改变；行内元素中不能放块级元素，a 链接里面不能再放链接。<pre class="wp-block-preformatted"><code> <a>     // 标签可定义锚  <abbr>     // 表示一个缩写形式  <acronym>     // 定义只取首字母缩写  <b>     // 字体加粗  <bdo>     // 可覆盖默认的文本方向  <big>     // 大号字体加粗  <br>     // 换行  <cite>     // 引用进行定义  <code>    // 定义计算机代码文本 <dfn>     // 定义一个定义项目 <em>     // 定义为强调的内容 <i>     // 斜体文本效果 <kbd>     // 定义键盘文本 <label>     // 标签为 input 元素定义标注（标记） <q>     // 定义短的引用 <samp>     // 定义样本文本 <select> // 创建单选或多选菜单 <small>     // 呈现小号字体效果 <span>     // 组合文档中的行内元素 <strong> // 加粗 <sub>     // 定义下标文本 <sup>     // 定义上标文本 <textarea>     // 多行的文本输入控件 <tt>     // 打字机或者等宽的文本效果 <var>    // 定义变量</code></pre><p style="text-indent: 2em;"><strong>3、行内块级元素 inline-block</strong></p><p style="text-indent: 2em;">行内块级元素，它既具有块级元素的特点，也有行内元素的特点，它可以自由设置元素宽度和高度，也可以在一行中放置多个行内块级元素。比如：input、img就是行内块级元素，它可设置高宽以及一行多个。具体特点如下：</p>高度、行高、外边距以及内边距都可以控制；默认宽度就是它本身内容的宽度，不独占一行，但是之间会有空白缝隙，设置它上一级的 font-size 为 0，才会消除间隙。<pre class="wp-block-preformatted"><code><button> <input>   <textarea> <select> <img></code></pre><p style="text-indent: 2em;"><strong>4、元素类型转换 display</strong></p><strong>display：block</strong> ，定义元素为块级元素<strong>display : inline </strong>，定义元素为行内元素<strong>display：inline-block</strong>，定义元素为行内块级元素<p style="text-indent: 2em;"><strong>5、总结</strong></p><p style="text-indent: 2em;">不管块级元素还是行内元素，区别：一是排列方式，二是宽高边距设置，三是默认宽度。</p>块级元素会独占一行，而内联元素和内联块元素则会在一行内显示；块级元素和内联块元素可设置 width、height 属性，而内联元素设置无效；块级元素的 width 默认为 100%，而内联元素则是根据其自身的内容或子元素来决定其宽度；<p style="text-indent: 2em;">而行内块级元素又同时拥有块级元素和行内元素的特点。</p><p style="text-indent: 2em;"><strong><em>延伸阅读1：CSS简介</em></strong></p><p style="text-indent: 2em;">层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。</p>        </div>


                <a id="tag_click" href="http://wap.mobiletrain.org/tag-0-1.html"><span>#</span>it技术干货</a>
                <div class="content-link clearfix">
                    <div>
            <span class="listiconfont listicon-shangyipian"></span><span>上一篇</span><a href="http://wap.mobiletrain.org/about/BBS/206146.html">在app定制开发开发过程中有哪些需要注意的事项和问题?</a><br />
          </div>
                    <div>
            <span class="listiconfont listicon-xiayipian"></span><span>下一篇</span><a href="http://wap.mobiletrain.org/about/BBS/206148.html">MySQL InnoDB聚簇索引B+树的阶(m)是怎样决定的?</a>
          </div>
                  </div>
        <div class="swiper-container ad-swiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <a href="javascript:;" onclick="open53_2()" rel="nofollow">
                <img src="http://wap.mobiletrain.org/images/lists/banner1.jpg" alt="" /></a>
            </div>
            <!-- <div class="swiper-slide">
              <a href="javascript:;" onclick="open53_2()" rel="nofollow">
                <img src="http://wap.mobiletrain.org/images/lists/banner2.png" alt="" /></a>
            </div>
            <div class="swiper-slide">
              <a href="javascript:;" onclick="open53_2()" rel="nofollow">
                <img src="http://wap.mobiletrain.org/images/lists/banner3.png" alt="" /></a>
            </div>
            <div class="swiper-slide">
              <a href="javascript:;" onclick="open53_2()" rel="nofollow">
                <img src="http://wap.mobiletrain.org/images/lists/banner4.png" alt="" /></a>
            </div> -->
          </div>
          <div class="swiper-pagination swiper-pagination-ad"></div>
        </div>
        <div class="rela-article">
          <h3 class="art-tit">相关文章</h3>
                    <a href="http://wap.mobiletrain.org/about/BBS/206208.html" class="rela-article-item">
            <img src="/tywzt/ty35.jpg" alt="两个人同时操纵数据库，怎么处理并发问题?" />
            <div>
              <p>两个人同时操纵数据库，怎么处理并发问题?</p>
              <span>2023-10-13</span>
            </div>
          </a>
                    <a href="http://wap.mobiletrain.org/about/BBS/206207.html" class="rela-article-item">
            <img src="/tywzt/ty35.jpg" alt="美国seer数据库怎么用?" />
            <div>
              <p>美国seer数据库怎么用?</p>
              <span>2023-10-13</span>
            </div>
          </a>
                    <a href="http://wap.mobiletrain.org/about/BBS/206206.html" class="rela-article-item">
            <img src="/tywzt/ty41.jpg" alt="一个事务提交时，redo log和undo log以及bin log的生成流程是怎么样的?" />
            <div>
              <p>一个事务提交时，redo log和undo log以及bin log的生成流程是怎么样的?</p>
              <span>2023-10-13</span>
            </div>
          </a>
                    <a href="http://wap.mobiletrain.org/about/BBS/206205.html" class="rela-article-item">
            <img src="/tywzt/ty64.jpg" alt="MYSQL中on duplicatekey update有什么优缺点?" />
            <div>
              <p>MYSQL中on duplicatekey update有什么优缺点?</p>
              <span>2023-10-13</span>
            </div>
          </a>
                  </div>
		 <div class="rela-article">
          <h3 class="art-tit">最新文章</h3>
                    <a href="http://wap.mobiletrain.org/interview/wlaq/201971.html" class="rela-article-item">
            <img src="/tywzt/ty65.jpg" alt="常见网络安全面试题:Windows常用的命令有哪些？" />
            <div>
              <p>常见网络安全面试题:Windows常用的命令有哪些？</p>
              <span>2023-10-09</span>
            </div>
          </a>
                    <a href="http://wap.mobiletrain.org/interview/wlaq/201970.html" class="rela-article-item">
            <img src="/tywzt/ty60.jpg" alt="常见网络安全面试题:根据设备告警如何展开排查？" />
            <div>
              <p>常见网络安全面试题:根据设备告警如何展开排查？</p>
              <span>2023-10-09</span>
            </div>
          </a>
                    <a href="http://wap.mobiletrain.org/interview/wlaq/201969.html" class="rela-article-item">
            <img src="/tywzt/ty40.jpg" alt="常见网络安全面试题:mysql加固呢？（数据库加固）" />
            <div>
              <p>常见网络安全面试题:mysql加固呢？（数据库加固）</p>
              <span>2023-10-09</span>
            </div>
          </a>
                    <a href="http://wap.mobiletrain.org/interview/wlaq/201967.html" class="rela-article-item">
            <img src="/tywzt/tongyong4.jpg" alt="常见网络安全面试题:windows和linux加固？（操作系统加固）" />
            <div>
              <p>常见网络安全面试题:windows和linux加固？（操作系统加固）</p>
              <span>2023-10-09</span>
            </div>
          </a>
                  </div>
      </div>
    </div>
    <div class="hot-channel">
  <div class="box">
    <h3 class="tit">热门频道</h3>
    <ul class="hot-channel-lists">
      <a href="http://wap.mobiletrain.org/training/" class="hot-channel-item">
        <div class="hot-channel-item-left">
          <i class="listiconfont listicon-toutiao-1"></i>
        </div>
        <div class="hot-channel-item-right">
          <h3>IT培训机构</h3>
          <p>培训费用、培训周期你关心的都有</p>
        </div>
      </a>
      <a href="http://wap.mobiletrain.org/zcjy/" class="hot-channel-item">
        <div class="hot-channel-item-left bg2">
          <i class="listiconfont listicon-tiku"></i>
        </div>
        <div class="hot-channel-item-right">
          <h3>就业前景</h3>
          <p>学会能干什么，IT培训就业前景介绍</p>
        </div>
      </a>
      <a href="http://wap.mobiletrain.org/ljc/" class="hot-channel-item">
        <div class="hot-channel-item-left bg3">
          <i class="listiconfont listicon-fabujishu"></i>
        </div>
        <div class="hot-channel-item-right">
          <h3>零基础学习</h3>
          <p>零基础学习IT，大神也是零基础起步</p>
        </div>
      </a>
      <a href="http://wap.mobiletrain.org/interview/" class="hot-channel-item">
        <div class="hot-channel-item-left bg4">
          <i class="listiconfont listicon-minzhengtubiao1-46"></i>
        </div>
        <div class="hot-channel-item-right">
          <h3>面试题</h3>
          <p>常见经典面试题及答案解析</p>
        </div>
      </a>
      <a href="http://wap.mobiletrain.org/wenwen/" class="hot-channel-item">
        <div class="hot-channel-item-left">
          <i class="listiconfont listicon-toutiao-1"></i>
        </div>
        <div class="hot-channel-item-right">
          <h3>千锋问问</h3>
          <p>搜集常见技术关键点，高效答疑</p>
        </div>
      </a>
      <a href="http://wap.mobiletrain.org/sitemap.html" class="hot-channel-item">
        <div class="hot-channel-item-left">
          <i class="listiconfont listicon-toutiao-1"></i>
        </div>
        <div class="hot-channel-item-right">
          <h3>网站地图</h3>
          <p>明晰网站布局，快速定位学习内容</p>
        </div>
      </a>
    </ul>
  </div>
</div>
  </div>

  <div class="seo-form" style="display: none;">
  <div class="con">
    <div class="form-con">
      <i class="listiconfont listicon-renshu"></i>
      <input type="text" name="name" placeholder="请输入您的姓名" />
    </div>
    <div class="form-con">
      <i class="listiconfont listicon-shoujitianchong"></i>
      <input type="text" name="mobile" placeholder="请输入您的手机号" />
    </div>
    <div class="form-pri">
      <i class="listiconfont listicon-xuanze"></i>
      <a href="http://wap.mobiletrain.org/privacyPolicy.html" target="_blank">我已阅读并同意《千锋教育用户隐私协议》</a>
    </div>
    <a href="javascript:;" class="submit-btn" onclick="BASE.seoData('name', 'mobile', '', '')">提交领14天试学名额</a>
  </div>
</div>
  <style>
  .footer {
    background-color: #01133d;
    padding-top: 0.6667rem;
    margin-bottom: -0.52rem;
    position: relative;
    /* 24px */
  }

  .footer .footer-logo {
    display: flex;
    justify-content: space-between;
    width: 8.6667rem;
    margin: 0 auto;
  }

  .footer .footer-logo img {
    height: 0.36rem;
  }

  .footer .footer-tel {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
  }

  .footer .footer-tel .icon-dianhua {
    font-size: 0.4533rem;
  }

  .footer .footer-tel .footer-tel-txt {
    font-size: 0.3467rem;
    margin-left: 0.3067rem;
    margin-right: 0.2267rem;
  }

  .footer .footer-tel .footer-tel-num {
    font-size: 0.5067rem;
    color: #ffffff;
  }

  .footer .footer-copyright {
    height: 1.753rem;
    background: linear-gradient(#01133d, #01133d), linear-gradient(#011035, #011035);
    padding-top: 0.5867rem;
  }

  .footer .footer-copyright p {
    font-size: 0.2133rem;
    line-height: 1.7;
    color: #ffffff;
    opacity: 0.4;
    text-align: center;
  }

  .footer .footer-link {
    text-align: center;
    margin-top: 0.3rem;
  }

  .footer .footer-link a {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.2133rem;
  }
</style>
<div class="footer">
  <div class="footer-tel">
    <span class="iconfont icon-dianhua"></span>
    <span class="footer-tel-txt">全国咨询热线</span>
    <a class="footer-tel-num" href="tel:400-811-9990">400-811-9990</a>
  </div>
  <div class="footer-link">
    <a href="http://wap.mobiletrain.org/sitemap.html">网站地图&nbsp;|&nbsp;</a>
    <a href="http://wap.mobiletrain.org/about/BBS/">技术干货&nbsp;|&nbsp;</a>
    <a href="http://wap.mobiletrain.org/about/info/">行业资讯&nbsp;|&nbsp;</a>
    <a href="http://wap.mobiletrain.org/about/" rel="nofollow">关于千锋</a>
  </div>
</div>
  <style>
  body {
    padding-bottom: 0 !important;
  }

  .seo-fixed-bottom {
    display: none !important;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1.1733rem;
    background-color: #326cf6;
    display: flex;
    align-items: center;
    z-index: 10;
  }

  .seo-fixed-bottom .seo-fixed-bottom-item {
    position: relative;
    flex: 1;
    height: 0.5067rem;
    border-right: 1px solid #ffffff;
    font-size: 0.3733rem;
    color: #fff;
    text-align: center;
  }

  .seo-fixed-bottom .seo-fixed-bottom-item:last-child {
    border: none;
  }

  .seo-fixed-bottom .seo-fixed-bottom-item:first-child::after {
    position: absolute;
    top: -0.1333rem;
    right: 0.1867rem;
    content: "5";
    width: 0.3733rem;
    height: 0.3733rem;
    line-height: 0.3733rem;
    text-align: center;
    background-color: #fe5133;
    border-radius: 50%;
    font-size: 0.2667rem;
    color: #ffffff;
    animation: aniop 1s infinite;
  }

  @keyframes aniop {
    0% {
      opacity: 1;
    }

    50% {
      opacity: 0.3;
    }

    100% {
      opacity: 1;
    }
  }

  .seo-fixed-bottom .seo-fixed-bottom-item i {
    font-size: 0.4rem;
    margin-right: 0.1333rem;
  }
</style>
<div class="seo-fixed-bottom">
  <a class="seo-fixed-bottom-item" href="javascript:;" onclick="open53_2()" rel="nofollow">
    <i class="listiconfont listicon-zaixianzixun"></i>在线咨询
  </a>
  <a class="seo-fixed-bottom-item" href="javascript:;" onclick="open53_2()" rel="nofollow">
    <i class="listiconfont listicon-a-46mianfei"></i>免费试学
  </a>
  <a class="seo-fixed-bottom-item" href="javascript:;" onclick="open53_2()" rel="nofollow">
    <i class="listiconfont listicon-shipinjiaocheng"></i>教程领取
  </a>
</div>
  <script src="http://wap.mobiletrain.org/js/jquery.min.js"></script>
  <script src="http://wap.mobiletrain.org/js/swiper4.5.0.min.js"></script>
  <script src="http://wap.mobiletrain.org/js/common.js?4"></script>
  <script src="/js/highlight.min.js"></script>
  <script>
    hljs.highlightAll();
  </script>
  <script>
    // new Swiper(".ad-swiper", {
    //   autoplay: true,
    //   loop: true,
    //   pagination: {
    //     el: ".swiper-pagination-ad",
    //   },
    // });
    $(document).ready(function () {
      var href = $('#tag_click').attr('href');
      if (href.indexOf("-0-") != -1) {
        var tag_code = $('#tag_click').html();
        $.ajax({
          url: "http://app.mobiletrain.org/tags.php",
          type: "get",
          dataType: "json",
          data: { "tag_code": tag_code },
          success: function (data) {
            $('#tag_click').attr('href', 'http://wap.mobiletrain.org/tag-' + data + '-1.html');
          }
        })
      }
    });
    if (
      location.href.indexOf("/about/info/") > -1 ||
      location.href.indexOf("/about/news/") > -1 ||
      location.href.indexOf("/about/BBS/") > -1
    ) {
      $(".links a").eq(6).addClass("active").siblings().removeClass("active");
    }
  </script>
</body>

</html>

校区精品课程

互联网前瞻热门课程从入门到成神

全国旗舰校区