精华内容
下载资源
问答
  • 行内元素和块级元素
    千次阅读
    2022-01-27 01:20:12

    一、在html中,元素主要分为行内元素和块级元素
    1.行内元素指的是书写完成后不会自动换行,并且元素没有宽和高。

    行内元素有:

    <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>定义变量

    2.块级元素写完后会自动换行,有宽高可以修改

    块级元素有:

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

    3.还有一种特殊的元素叫做行内块元素。
            行内块元素常见的有: img  input  td  

    注意一点:在p元素中可以放行内元素,但不能放块级元素

    更多相关内容
  • 精品资料欢迎下载
  • 元素按照显示方式主要可以分为块级元素和行内元素,元素的显示方式由display属性控制。 块级元素特点总结: 1、总是在新行上开始 2、宽度的默认为width+margin-left+margin-right+padding-left+padding-right刚好...
  • 行内元素和块级元素的具体区别

    千次阅读 2022-07-07 19:42:31
    2.块级元素可以包含行内元素和块级元素行内元素不能包含块级元素。3.行内元素块级元素属性的不同,主要是盒模型属性上行内元素设置width无效,height无效(可以设置line-height),margin上下无效,padding上下...

    一、行内元素与块级元素的三个区别

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

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

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

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

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

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

    二、行内元素转换为块级元素

    display:block (字面意思表现形式设为块级)

    三、行内元素与块级元素

    块级元素列表
    <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>定义表格中的行

    行内元素列表
    <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>定义变量

    可变元素列表--可变元素为根据上下文语境决定该元素为块元素或者内联元素
    <button>按钮
    <del>定义文档中已被删除的文本
    <iframe>创建包含另外一个文档的内联框架(即行内框架)
    <ins>标签定义已经被插入文档中的文本
    <map>客户端图像映射(即热区)
    <object>object对象
    <script>客户端脚本

     

    展开全文
  • 基本知识分类速览块级元素和行级元素的转换参考链接 欢迎大家来跟胖胖一起xio习! Hey,这里是胖胖的博客,目前正在学有关前端的知识,有时候会把一些遇到的问题记录下来和大家一起分享交流,有错误的话请大家指正~ ...
  • 一、行内元素和块级元素的区别

    千次阅读 2022-04-07 19:04:08
    行内元素和块级元素的区别

    一、行内元素和块级元素的区别

      1、 行内元素不会占据整行,在一条直线上排列,都是同一行,水平方向排列;

        块级元素会占据一行,垂直方向排列。

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

      3、 行内元素与块级元素属性的不同,主要是盒模型属性上,行内元素设置width无效,height无效(可以设置line-height),margin上下无效,padding上下无效。

    二、行内元素和块级元素的相互转换

      行内元素转化为块元素: display:block;

      块元素转化为行内元素: display:inline;

    块级元素列表

    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 定义表格中的行

    行内元素列表

    a 标签可定义锚

    abbr 表示一个缩写形式

    acronym 定义只取首字母缩写

    b 字体加粗

    bdo 可覆盖默认的文本方向

    big 大号字体加粗

    换行

    cite 引用进行定义

    code 定义计算机代码文本

    dfn 定义一个定义项目

    em 定义为强调的内容

    i 斜体文本效果

    img 向网页中嵌入一幅图像

    input 输入框

    kbd 定义键盘文本

    label 标签为 input 元素定义标注(标记)

    q 定义短的引用

    samp 定义样本文本

    select 创建单选或多选菜单

    small 呈现小号字体效果

    span 组合文档中的行内元素

    strong 语气更强的强调的内容

    sub 定义下标文本

    sup 定义上标文本

    textarea 多行的文本输入控件

    tt 打字机或者等宽的文本效果

    var 定义变量

    可变元素素列表

    --可变元素为根据上下文语境决定该元素为块元素或者内联元素

    button 按钮

    del 定义文档中已被删除的文本

    iframe 创建包含另外一个文档的内联框架(即行内框架)

    ins 标签定义已经被插入文档中的文本

    map 客户端图像映射(即热区)

    展开全文
  •  行内元素和块级元素不同,对于行内元素,只需在父元素中设置text-align=center即可;  对于块级元素有以下几种居中方式:   1.将元素放置在table中,再将table的margin-left和margin-right设置成auto,将table居中,使...
  • 行内元素和块级元素的区别

    千次阅读 2019-09-12 22:14:31
    一、行内元素和块级元素的区别 1、 行内元素不会占据整行,在一条直线上排列,都是同一行,水平方向排列; 块级元素会占据一行,垂直方向排列。 2、 块级元素可以包含行内元素和块级元素;行...

    一、行内元素和块级元素的区别

      1、 行内元素不会占据整行,在一条直线上排列,都是同一行,水平方向排列;

        块级元素会占据一行,垂直方向排列。

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

      3、 行内元素与块级元素属性的不同,主要是盒模型属性上,行内元素设置width无效,height无效(可以设置line-height),margin上下无效,padding上下无效。

    二、行内元素和块级元素的相互转换

      行内元素转化为块元素: display:block; 

      块元素转化为行内元素: display:inline; 

    三、问题延伸

      问题描述:为何img、input等行内元素可以设置宽、高?

      详细解答:

       元素是文档结构的基础,在CSS中,每个元素生成了一个包含了元素内容的框(box,也译为“盒子”)。但是不同的元素显示的方式会有所不同,例如<div>和<span>

       就不同,而<strong>和<p>也不一样。在文档类型定义(DTD)中对不同的元素规定了不同的类型,这也是DTD对文档之所以重要的原因之一。

     

       1. 替换和不可替换元素

      从元素本身的特点来讲,可以分为替换和不可替换元素。

        a) 替换元素

        替换元素就是浏览器根据元素的标签和属性,来决定元素的具体显示内容。

        例如浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来,而如果查看(X)HTML代码,则看不到图片的实际内容;又例如根据<input>标签的type属性来

        决定是显示输入框,还是单选按钮等。

        (X)HTML中的<img>、<input>、<textarea>、<select>、<object>都是替换元素。这些元素往往没有实际的内容,即是一个空元素,例如:

        <img src=”cat.jpg” />
        <input type="submit" name="Submit" value="提交" />

        浏览器会根据元素的标签类型和属性来显示这些元素。可替换元素也在其显示中生成了框。

     

        b) 不可替换元素

        (X)HTML 的大多数元素是不可替换元素,即其内容直接表现给用户端(例如浏览器)。例如:

        <p>段落的内容</p>

        段落<p>是一个不可替换元素,文字“段落的内容”全被显示。

     

      2. 显示元素

      除了可替换元素和不可替换元素的分类方式外,CSS 2.1中元素还有另外的分类方式:块级元素(block-level)和行内元素(inline-level,也译作“内联”元素)。

        a) 块级元素

        在视觉上被格式化为块的元素,最明显的特征就是它默认在横向充满其父元素的内容区域,而且在其左右两边没有其他元素,即块级元素默认是独占一行的。

        典型的块级元素有:<div>、<p>、<h1>到<h6>,等等。

        通过CSS设定了浮动(float属性,可向左浮动或向右浮动)以及设定显示(display)属性为“block”或“list-item”的元素都是块级元素。

        但是浮动元素比较特殊,由于浮动,其旁边可能会有其他元素的存在。而“list-item”(列表项<li>),会在其前面生成圆点符号,或者数字序号。

     

        b) 行内元素

        行内元素不形成新内容块,即在其左右可以有其他元素,例如<a>、<span>、<strong>等,都是典型的行内级元素。

        display属性等于“inline”的元素都是行内元素。几乎所有的可替换元素都是行内元素,例如<img>、<input>等等。

        不过元素的类型也不是固定的,通过设定CSS 的display属性,可以使行内元素变为块级元素,也可以让块级元素变为行内元素。

     

      3. 结论:

        替换元素一般有内在尺寸,所以具有width和height,可以设定。例如你不指定img的width和height时,就按其内在尺寸显示,也就是图片被保存的时候的宽度和高度。

       对于表单元素,浏览器也有默认的样式,包括宽度和高度。

     

    姿势引用原文:1.行内元素与块级元素比较全面的区别和转换  2.为何img、input等内联元素可以设置宽、高

    展开全文
  • 行内元素通过display:block改为块级元素 <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> , initial-scale=1.0"> <title>display:blocktitle> <style> body...
  • 1.行内元素块级元素直观上的区别二、行内元素块级元素的三个区别 行内元素会在一条直线上排列(默认宽度只与内容有关),都是同一行的,水平方向排列。 块级元素各占据一行(默认宽度是它本身父容器的100%...
  • 行内元素和块级元素的区别
  • 行内元素和块级元素

    2022-05-09 20:06:44
    1. 行内元素 行内元素又称内联元素(inline block)。在浏览器中可以与其它行内元素共占一行,只有当多个元素的总宽度大于浏览器的宽度时,才会换行显示。常见的行内元素如下表: 行内元素 说明 a ...
  • 下面小编就为大家带来一篇对行内元素和块级元素的一些认识。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 行内元素有哪些?块级元素有哪些? 空(void)元素有那些?行内元素和块级元素有什么区别?
  • 行内元素块级元素的区别
  • 1、行内元素:a img span b strong input select section 2、块级元素:div p table ul lo li h1-h6 dl dt ...3、块级元素可以设置marginpadding属性,行内元素padding-left、padding-right,margin-le...
  • NULL 博文链接:https://maoting.iteye.com/blog/1722563
  • 一,行内元素块级元素的区别:1...2.块级元素可以包含行内元素和块级元素行内元素不能包含块级元素,只能包含文本或者其它行内元素。3.行内元素块级元素属性的不同,主要是盒模型属性上:行内元素设置width无效,
  • 行内元素和块级元素分别有哪些?

    千次阅读 2021-05-09 16:33:17
    行内元素和块级元素分别有哪些? 行内元素: < a > 、 < em > 、 < strong > 、 < span > 、 < i > 、< label >、 < br > 块级元素: < div > 、 < p > ...
  • 三、行内元素示例HTMLCSSExample四、块级元素示例HTMLCSSExample五、行内元素的特点5.1 其他元素都在同一行上5.2 高,行高及外边距内边距不可改变5.3 宽度就是它的文字或图片的宽度,不可改变5....
  • 常用行内元素列表: <a>标签可定义链接 <b>字体加粗 <br>换行 <img>图像 <input>输入框 <var>定义变量 块级元素列表: ...一,从概念的角度解释块级元素和行内元素
  • html中的行内元素和块级元素有哪些 在html中,元素主要分为行内元素和块级元素行内元素指的是书写完成后不会自动换行,并且元素没有宽和高。 行内元素的特点:相邻的行内元素不换行,设置宽高无效,margin设置仅...
  • 块级元素可以包含行内元素和其它块级元素,且占据父元素的整个空间,可以设置 width 和 height 属性,浏览器通常会在块级元素前后另起一个新行。 常见块级元素: header,form,ul,ol,table,article,div,hr,aside,...
  • 块级元素的特点: 1.总是从新行开始 2.高度,行高、外边距以及内边距都可以控制。 3.宽度默认是容器的100% 4.可以容纳内联元素和其他块元素。 行内元素的特点: 1.和相邻行内元素在一行上。 2.高、宽无效,但水平...
  • 水平居中 行内元素和块级元素不同 ,对于行内元素 ,只需在父元素中设置 text-align=center 即可 ; 对于块级元素有以下几种居中方式 : 1.将元素放置在 table 中,再将 table 的 margin-left 和 margin-right 设置成 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 53,880
精华内容 21,552
关键字:

行内元素和块级元素