精华内容
下载资源
问答
  • Html行内元素与块级元素有哪些及区别详解 文章目录Html行内元素与块级元素有哪些及区别详解一、HTML常见的行内元素有:二、HTML常见的块级元素有:三、==区别==·块级元素·行内元素四、==转换==使用display属性能够...

    Html行内元素与块级元素有哪些及区别详解


    提示:以下是本篇文章正文内容,下面案例可供参考

    一、HTML常见的行内元素有:

    <span>、<a>、 <img>、 <input>、<textarea>、<select>、<label>
    
    还有包括一些文本元素如:<br>  、<b>、 <strong>、<sup> 、<sub>、 <i> 、<em> 、<del> 、 <u>等。
    不能只回答<img>和<a>吧!
    

    二、HTML常见的块级元素有:

    <div>、<table>、<form>、<p>、<ul>、
    
    <h1>......<h6>、<hr>  、<pre>、<address>、<center>、<marquee> 、<blockquote>  等。
    
    要是只回答<div>那就说不过去了吧。
    

    三、区别

    ·块级元素

    1. 总是从新的一行开始,即各个块级元素独占一行,默认垂直向下排列;
    2. 高度、宽度、margin及padding都是可控的,设置有效,有边距效果;
    3. 宽度没有设置时,默认为100%;
    4. 块级元素中可以包含块级元素和行内元素。

    ·行内元素

    1. 和其他元素都在一行,即行内元素和其他行内元素都会在一条水平线上排列;
    2. 高度、宽度是不可控的,设置无效,由内容决定。
    3. 根据标签语义化的理念,行内元素最好只包含行内元素,不包含块级元素。

    四、转换

    当然块级元素与行内元素之间的特性是可以相互转换的。HTML可以将元素分为行内元素、块状元素和行内块状元素三种。

    使用display属性能够将三者任意转换:

    1. display:inline;转换为行内元素;
    2. display:block;转换为块状元素;
    3. display:inline-block;转换为行内块状元素。

    行内块状元素综合了行内元素和块状元素的特性:

    1. 不自动换行,与其他行内元素都会在一条水平线上排列;
    2. 高度、宽度、margin及padding都是可控的,设置有效,有边距效果;
    3. 默认排列方式为从左到右。
    展开全文
  • 想起之前工作面试时,面试官问的一个问题:行内元素有哪些,和块级元素有什么区别?这是一道蛮基础的面试题,但是很多初学者平时只注重标签语义,忽视了标签行内和块级的特性, 因此对于上述问题很有可能答不上来...
  • 想起之前工作面试时,面试官问的一个问题:行内元素有哪些,和块级元素有什么区别?这是一道蛮基础的面试题,但是很多初学者平时只注重标签语义,忽视了标签行内和块级的特性, 因此对于上述问题很有可能答不上来...

    想起之前工作面试时,面试官问的一个问题:行内元素有哪些,和块级元素有什么区别?这是一道蛮基础的面试题,但是很多初学者平时只注重标签语义,忽视了标签行内和块级的特性, 因此对于上述问题很有可能答不上来或者答不全。

    HTML常见的行内元素有:

    、、 、 、、、

    还有包括一些文本元素如:
    等。

    要是只回答那就说不过去了吧。

    HTML常见的块级元素有:

    ......

    、 、
    、、
    、 、
    等。

    要是只回答

    那就说不过去了吧。

    那它们之间的区别是什么呢?

    ·块级元素

    1.总是从新的一行开始,即各个块级元素独占一行,默认垂直向下排列;

    2.高度、宽度、margin及padding都是可控的,设置有效,有边距效果;

    3.宽度没有设置时,默认为100%;

    4.块级元素中可以包含块级元素和行内元素。

    ·行内元素

    1.和其他元素都在一行,即行内元素和其他行内元素都会在一条水平线上排列;

    2.高度、宽度是不可控的,设置无效,由内容决定。

    设置margin左右有效,有边距效果;

    设置margin上下会撑大空间但是不会产生边距效果(即盒模型margin-top/bottom有值,但页面上没有边距效果)。

    设置padding左右有效,设置padding上下会撑大空间但是不会产生边距效果(同上)。

    padding效果如下展示:

             
    块级元素
    行内元素 行内元素
    块级元素
    de4e33070194ea6f5652d2fe7572a513.png

    3.根据标签语义化的理念,行内元素最好只包含行内元素,不包含块级元素。

    转换

    当然块级元素与行内元素之间的特性是可以相互转换的。HTML可以将元素分为行内元素、块状元素和行内块状元素三种。

    使用display属性能够将三者任意转换:

    (1)display:inline;转换为行内元素;

      (2)display:block;转换为块状元素;

      (3)display:inline-block;转换为行内块状元素。

    行内块状元素综合了行内元素和块状元素的特性:

    (1)不自动换行,与其他行内元素都会在一条水平线上排列;

    (2)高度、宽度、margin及padding都是可控的,设置有效,有边距效果;

    (3)默认排列方式为从左到右。

    121cc040535ad06be326d3913ee86e37.png
    展开全文
  • 想起之前工作面试时,面试官问的一个问题:行内元素有哪些,和块级元素有什么区别?这是一道蛮基础的面试题,但是很多初学者平时只注重标签语义,忽视了标签行内和块级的特性, 因此对于上述问题很有可能答不上来...

    想起之前工作面试时,面试官问的一个问题:行内元素有哪些,和块级元素有什么区别?这是一道蛮基础的面试题,但是很多初学者平时只注重标签语义,忽视了标签行内和块级的特性, 因此对于上述问题很有可能答不上来或者答不全。

    HTML常见的行内元素有:

    、、 、 、、、

    还有包括一些文本元素如:
    等。

    要是只回答那就说不过去了吧。

    HTML常见的块级元素有:

    ......

    、 、
    、、
    、 、
    等。

    要是只回答

    那就说不过去了吧。

    那它们之间的区别是什么呢?

    ·块级元素

    1.总是从新的一行开始,即各个块级元素独占一行,默认垂直向下排列;

    2.高度、宽度、margin及padding都是可控的,设置有效,有边距效果;

    3.宽度没有设置时,默认为100%;

    4.块级元素中可以包含块级元素和行内元素。

    ·行内元素

    1.和其他元素都在一行,即行内元素和其他行内元素都会在一条水平线上排列;

    2.高度、宽度是不可控的,设置无效,由内容决定。

    设置margin左右有效,有边距效果;

    设置margin上下会撑大空间但是不会产生边距效果(即盒模型margin-top/bottom有值,但页面上没有边距效果)。

    设置padding左右有效,设置padding上下会撑大空间但是不会产生边距效果(同上)。

    padding效果如下展示:

             
    块级元素
    行内元素 行内元素
    块级元素
    96c711db693c2ccf986bba24f4bb035a.png

    3.根据标签语义化的理念,行内元素最好只包含行内元素,不包含块级元素。

    转换

    当然块级元素与行内元素之间的特性是可以相互转换的。HTML可以将元素分为行内元素、块状元素和行内块状元素三种。

    使用display属性能够将三者任意转换:

    (1)display:inline;转换为行内元素;

      (2)display:block;转换为块状元素;

      (3)display:inline-block;转换为行内块状元素。

    行内块状元素综合了行内元素和块状元素的特性:

    (1)不自动换行,与其他行内元素都会在一条水平线上排列;

    (2)高度、宽度、margin及padding都是可控的,设置有效,有边距效果;

    (3)默认排列方式为从左到右。

    58c2e8bf22ce9c8fafcf6702eb36f48d.png
    展开全文
  • 希望大家补充一下常见的块级元素与行内元素~如错误,请大家在评论区指出,一起进步!一、区别二、常见的块级元素:p:段落标签div:把DIV看作是一容器,容器专门用来包含内容h1、h2… …:标题form:表单ul:无序...

    1b3b8784bece897520e0c8a7c81d7740.png
    希望大家补充一下常见的块级元素与行内元素~
    如有错误,请大家在评论区指出,一起进步!

    一、区别

    cb9d471a0575ef0a58938682ca047a83.png

    二、常见的块级元素:

    p:段落标签
    div:把DIV看作是一容器,容器专门用来包含内容
    h1、h2… …:标题
    form:表单
    ul:无序列表,与li绑定
    ol:有序列表,与li绑定
    hr:分隔

    三、常见行内元素:

    a:锚点
    b:加粗
    i :斜体
    img:图片
    input:输入框
    label:表格标签
    select:下拉列表
    span:用来组合文档中的行内元素
    textarea:多行文本输入框

    四、展示:

    (一)a、b、i、em、img

    0e0a0f1a30b09e289417799408b68c8e.png

    fb1fb58fa0abf33c40c8831f7e552e36.png

    (二)input

    input标签规定用户可输入数据的输入字段。根据不同的 type 属性,输入字段有多种形态。输入字段可以是文本字段、复选框、密码字段、单选按钮、按钮等等

    7bdc309fef8f798636babb17a0417fce.png

    831ba19631f9adf70057f07dd4903247.png

    (三) label

    label元素和对应id的input元素是互相绑定的,也就是说点击label就相当于点击了input

    92c70a85a9895b0fbdb9a60cfcc5c6ad.png

    1f29012d8bdb4e4f8867d5d61530ce7d.png

    (四)select、textarea

    2fb746bd428808967d85cf774eb80527.png

    2ed7ae13a6b91fb607196af4d0219a2c.png

    (五)span
    css:

    ec9e56d4be8b62b9d39ae52371377a74.png

    2dc94d94256f7d46a3f1d4473824e68a.png

    (六)块级元素部分展示

    428e76da36a927a9cd886a65d27f6c65.png

    08bbcf7102f6da8d36c7a5464a952602.png
    原作者姓名:不渴不渴
    原出处:CSDN
    原文链接:html的行内元素与块级元素总结_不渴不渴的博客-CSDN博客
    展开全文
  • 行内元素与块级元素有哪些?  块级元素:div , p , form, ul, li , ol, dl, form, address, fieldset, hr, menu, table  行内元素:span, strong, em, br, img , input, label, ...
  • 行内元素 作用:点缀网页,填充内容 特性: 1) 其他行内元素共享一行空间 2) 默认宽高由内容决定 3) 不能为其指定宽和高 4) 行内元素中不可以嵌套块...常见的块级元素有:p margin-top/margin-bottom form table/.
  • 希望大家补充一下常见的块级元素与行内元素~如错误,请大家在评论区指出,一起进步!一、区别二、常见的块级元素:p:段落标签div:把DIV看作是一容器,容器专门用来包含内容h1、h2… …:标题form:表单ul:无序...
  • 行内元素与块级元素

    2016-11-15 21:19:00
    内元素和块级元素有哪些? 块级元素 <address> information on author <blockquote> long quotation <button> push button <caption> table caption ...
  • 一、区别: 是否独占一行 width、height margin padding 默认宽高 块级元素 是 有效 有效 有效 撑满父元素 行内元素 否 无效 水平方向有效,竖直方向...行内块级元素 ...二、有哪些块...
  • 一、行内元素和块元素概括 块级元素:div , p , form, ul, li , ol, dl, form, address, fieldset, hr, menu, t able 行内元素:span, strong, em...二、行内元素和块元素详细有哪些 内联元素(行内元素) (inline e...
  • html平时常见的块元素有:div, p, h1, h2, h3等,内联元素有:span, a, img等。块元素的属性:无论内容是什么,都会独占一整行。主要用于页面布局。内联元素的属性:只占自身大小的元素,不会占用一行。主要用于选中...
  • 行内元素有哪些?块级元素有哪些? 空(void)元素有那些? 行内元素:a、b、span、img、input、strong、select、label、em、button、textarea块级元素:div、ul、li、dl、dt、dd、p、h1-h6、...行内元素与块级元素的...
  • 一般来说,html的元素分为两种,即...行内元素行内元素不可以设置宽(width)和高(height),但可以其他行内元素位于同一行,行内元素内一般不可以包含块级元素行内元素的高度一般由元素内部的字体大小决定,...
  • 行内元素与块级元素有什么不同? 块级元素和行内元素的区别是,块级元素会占一行显示,而行内元素可以在一行并排显示。 通过样式控制,它们可以相互转换。 1.尺寸-块级元素和行内元素之间的一个重要的不同点 ...
  • 引言:一次偶然的面试遇到的题目,当时只知道... 行内元素与块级元素的区别 1.行内元素与块级元素直观上的区别 行内元素会在一条直线上排列,都是同一行的,水平方向排列 块级元素各占据一行,垂直方向排列。...
  • 一、行内元素与块级元素 块级元素列表 定义地址 定义表格标题 定义列表中定义条目 定义文档中的分区或节 定义列表 定义列表中的项目 定义一个框架集 创建 HTML 表单 ...
  • 行内元素块级元素有哪些? 块级元素 information on author long quotation push button table caption definition description deleted text generic ...
  • 元素一般都从新行开始,它可以容纳...而了css以后,我们可以改变这种html的默认布局模式,把块元素摆放到你想要 的位置上去。而不是每次都愚蠢的另起一行。需要指出的是,table标签也是块元素的一种,table ba
  • 块级元素会独占一行,其宽度自动填满其父元素宽度行内元素不会独占一行,相邻的行内元素会排列在同一行里,知道一行排不下,才会换行,其宽度随元素的内容而变化 (2). 一般情况下,块级元素可以设置 width,height...
  • 元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签'P"。“form"这个块元素比较特殊,它只能用来容纳其他块元素。 如 果没有css的作用,块元素会顺序以每次另起一行的方式一直往下排...
  • 常见行内元素(inline): <a>、<strong>、<del>、<s>、<u>、<b>、<span>、<br>、<em>、<font>、<i>、<img>、<input>、<lable&...
  • 一、行内元素与块级元素的基本概念1.块元素(blockelement):块级元素生成一个元素框,(默认地)它会填充其父级元素的内容,旁边不能其他元素。换句话说,他在元素框之前和之后生成了“分隔”符。我们最熟悉的HTML...
  • 块级元素与行内元素

    2017-05-17 19:16:27
    1、块级元素与行内元素分别有哪些块级元素:div, p,form, ul,li, ol,dl,dt, dd,address,fieldset,hr,menu,table等。 行内元素:span, strong, em, br, img, input, label, select, textarea,i,a等...
  • 展开全部块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签'P"。“form"这个e5a48de588b662616964757a686964616f31333363363431块元素比较特殊,它只能用来容纳其他块元素。块元素...
  • 块级元素有哪些 <address、<center、<h1~<h、<hr、<p、<pre <ul、<ol、<dl、<table、<div、<form 行内元素有哪些常用的 <span、<a、<br、<b、<img、<...
  • 块级元素块级元素占据其父元素(容器)的整个...通常有哪些块级元素: <div> 文档分区 <h1>~<h6>一级标题到六级标题 <p>段落 <hr>水平线 <pre>预格式化文本 <ul...
  • 一.块级标签行级标签的...行内元素列表: &lt;a&gt;标签可定义锚 &lt;abbr&gt;表示一个缩写形式 &lt;acronym&gt;定义只取首字母缩写 &lt;b&gt;字体加粗 &lt;bdo&gt...

空空如也

空空如也

1 2 3 4 5 ... 11
收藏数 206
精华内容 82
关键字:

行内元素与块级元素有哪些