zoukankan      html  css  js  c++  java
  • html中的行内元素和块级元素小结

    一.首先我们总结下行内元素和块级元素有哪些:

    行内元素:

    <a>标签可定义锚
    <abbr>表示一个缩写形式
    <acronym>定义只取首字母缩写
    <b>字体加粗
    <bdo>可覆盖默认的文本方向
    <big>大号字体加粗
    <br>换行
    <cite>引用进行定义
    <code>定义计算机代码文本
    <dfn>定义一个定义项目
    <em>定义为强调的内容
    <i>斜体文本效果
    <img>向网页中嵌入一幅图像
    <input>输入框
    <kbd>定义键盘文本
    <label>标签为
    <input> 元素定义标注(标记)
    <q>定义短的引用
    <samp>定义样本文本
    <select>创建单选或多选菜单
    <small>呈现小号字体效果
    <span>组合文档中的行内元素
    <strong>语气更强的强调的内容
    <sub>定义下标文本
    <sup>定义上标文本
    <textarea>多行的文本输入控件
    <tt>打字机或者等宽的文本效果
    <var>定义变量

    块级元素:

    <address>定义地址
    <caption>定义表格标题
    <dd>定义列表中定义条目
    <div>定义文档中的分区或节
    <dl>定义列表
    <dt>定义列表中的项目
    <fieldset>定义一个框架集
    <form>创建 HTML 表单
    <h1>定义最大的标题
    <h2>定义副标题
    <h3>定义标题
    <h4>定义标题
    <h5>定义标题
    <h6>定义最小的标题
    <hr>创建一条水平线
    <legend>元素为
    <fieldset>元素定义标题
    <li>标签定义列表项目
    <noframes>为那些不支持框架的浏览器显示文本,于 frameset 元素内部
    <noscript>定义在脚本未被执行时的替代内容<ol>定义有序列表
    <ul>定义无序列表
    <p>标签定义段落
    <pre>定义预格式化的文本
    <table>标签定义 HTML 表格
    <tbody>标签表格主体(正文)
    <td>表格中的标准单元格
    <tfoot>定义表格的页脚(脚注或表注)
    <th>定义表头单元格
    <thead>标签定义表格的表头
    <tr>定义表格中的行

    二.然后我们再来看看行内元素和块级元素的区别:

    1.行内元素与块级元素直观上的区别

    行内元素会在一条直线上排列,都是同一行的,水平方向排列

    块级元素各占据一行,垂直方向排列。块级元素从新行开始结束接着一个断行。

    2.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。

    3.行内元素与块级元素属性的不同,主要是盒模型属性上

    行内元素设置width无效,height无效(可以设置line-height),margin上下无效,padding上下无效

    三.行内元素和块级元素的转化:

    把块级元素转换成行内元素:display:inline;

    将行内元素转换成块级元素:display:block;

    行内块元素:display:inline-block;

  • 相关阅读:
    三级菜单的实现方式
    简单登录接口实践
    C++中的set和java的hashset有何区别?
    css 利用文档结构给列表添加样式
    谈谈我对JS中this的理解
    谈谈我对JS原型的理解
    使用node.js,实现简单的JS文件合并小工具
    谈谈我对JS闭包的理解
    谈谈我对JS作用域的理解
    模拟实现 百度翻译 右下方的可折叠的分享按钮列表
  • 原文地址:https://www.cnblogs.com/czh1994/p/7079597.html
Copyright © 2011-2022 走看看