zoukankan      html  css  js  c++  java
  • ##HTML行内块元素好迷啊!!

    一:body里面分为两类标签:块级标签和内联标签。

      1、块级标签:<p><h1><table><ol><ul><form><div>

      2、内联标签:<a><input><img><sub><sup><textarea><span>

    二:块级标签元素的特点
      ① 总是在新行上开始;
      ② 高度,行高以及外边距和内边距都可控制;
      ③ 宽度缺省是它的容器的100%,除非设定一个宽度。
      ④ 它可以容纳内联元素和其他块元素

    三:内联标签元素的特点
      ① 和其他元素都在一行上;
      ② 高,行高及外边距和内边距不可改变;
      ③ 宽度就是它的文字或图片的宽度,不可改变
      ④ 内联元素只能容纳文本或者其他内联元素
    四:对行内元素,需要注意如下 
      设置宽度width 无效。
      设置高度height 无效,可以通过line-height来设置。
      设置margin 只有左右margin有效,上下无效。
      设置padding 只有左右padding有效,上下则无效。注意元素范围是增大了,但是对元素周围的内容是没影响的。

    五:行内元素列表:

      <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. 块级元素,一般都是从新行开始,它可以容纳行内元素和其他块元素,常见块级元素比如div/p等。“form”这个快元素比较特殊,他只能来容纳其他块元素

      2. 行内元素:也叫做内联元素,一般都是语义级别的基本元素,内联元素已办只能容纳文本或者其他内联元素

          块元素(block element)和内联元素(inline element)都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都是从新行开始的。

          而当加了css控制以后,块元素可以变为内联元素,内联元素也可以变为块元素。

    二,块级元素和内联元素的区别

      1. 块级元素会独占一行,其宽度自动填满其父元素宽度

       行内元素不会独占一行,相邻的行内元素会排列到同一行里,直到一行排不下,才会换行,其宽度随元素的内容变化而变化,

      2. 一般情况下,块级元素可以设置width,height属性,行内元素设置width,height无效

        (注意,块级元素设置了width宽度属性后仍然是独占一行的)

      3. 块级元素可以设置margin,padding属性

       行内元素的水平方向的padding-left和padding-right都会产生边距效果,但是竖直方向上的padding-top和padding-bottom都不会产生边距效果

  • 相关阅读:
    关于IE高级设置里取消“禁用脚本调试”勾选无效的解决方式
    使用NetworkStream收取数据不全问题讨论,列举目前方式,求最佳解决方式
    EntityFramework学习笔记2ORM及EntityFramework简介
    Asp.Net MVC4.0 官方教程 入门指南之一 入门介绍
    EntityFramework学习笔记4实体数据模型及增、删、改操作
    EntityFramework学习笔记3VS2010安装EF5.0
    如果页面引用了外部JS代码,会被IE缓存的解决方法
    EntityFramework学习笔记1写在学习之前
    【专题】概率dp求期望
    金华网赛G(最大费用最大流)&hdu4406
  • 原文地址:https://www.cnblogs.com/liurui-bk517/p/11074092.html
Copyright © 2011-2022 走看看