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

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

    HTML常见的行内元素有:

    、、 、 、、、

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

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

    HTML常见的块级元素有:

    ......

    、  、
    、 、
      等。

    要是只回答

    那就说不过去了吧。

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

    ·块级元素

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

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

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

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

    ·行内元素

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

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

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

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

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

    padding效果如下展示:

    span{

    border:1px solid red;

    padding:10px;

    }

    div{

    border:1px solid blue;

    }

    块级元素

    行内元素

    行内元素

    块级元素

    f6553da26a3782b2bfdbbeeb75202583.png

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

    转换

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

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

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

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

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

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

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

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

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

    到此这篇关于HTML行内元素与块级元素有哪些及区别详解的文章就介绍到这了,更多相关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. 默认排列方式为从左到右。
    展开全文
  • 行内元素有:a b span img input select strong 块级元素有:div ul ol li dl dt dd h1 h2 h3 h4…p 空元素:br hr img input link meta 行内元素不可以设置宽高,不独占一行 块级元素可以设置宽高,独占一行 ...
    • 行内元素有:a b span img input select strong
    • 块级元素有:div ul ol li dl dt dd h1 h2 h3 h4…p
    • 空元素:br hr img input link meta
    • 行内元素不可以设置宽高,不独占一行
    • 块级元素可以设置宽高,独占一行
    • 块级元素转行内元素:display:block
    • 行内元素转块级元素:displai:inline
    • 行内元素或块级元素转行内块元素:display:inlind-block
    展开全文
  • 注意看红色箭头,共有7个步骤,按顺序操作下去 1、首先,我们先来了解一下什么是行内元素什么是...这是第2个区别:块级元素内可以放置行内元素及其他块级元素,相反行内元素不能放置块级元素但可以放置其他行内元素...

    注意看红色箭头,共有6个步骤按顺序操作下去

    1、首先,我们先来了解一下什么是行内元素 什么是块级元素

    2、我们先讲行内元素。行内元素就是水平方向上一行一行的堆叠起来的。意思就是说他们在同一行不在同一列,如下图:

    3、接下来就讲块级元素。块级元素就是在垂直方向上堆叠起来的。意思就是说他们在同一列不在同一行如下图:

    4、我们一起来看看他们的区别效果图:

    这是第2个区别:块级元素内可以放置行内元素及其他块级元素,相反行内元素不能放置块级元素可以放置其他行内元素和文字。例如这张图,我在第一个块级元素中放了一个行内元素,行内元素则显示在块级元素的后面。然而我在第一个行内元素中放了一个块级元素,块级元素则把他所在的父级元素推了上去成了行内元素,所以块级元素中不能放置行内元素。

    5、这是第3个区别:行内元素与块级元素 属性不同(盒模型)

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

       margin-top、margin-bottom无效。

       padding-top、padding-bottom无效。

    我给行内元素,块级元素设置了相同的属性,显示出来却是不同的,因为行内元素宽高都无效,他的宽高是由里面元素的多少来决定的。块级元素则可以设置宽高。

    6、行内元素(inline)与块级元素(block)之间的相互转化

    行内元素=》块级元素:display:block

    块级元素=》行内元素:display:inline

    行内元素=》行内块级元素:display:inline-block 

    块级元素=》行内块级元素:display:inline-block

    这是我所学到的行内元素与块级元素之间的区别及相互转化,所以我要分享给你们,希望可以帮助到你们。

    以上就是我的分享,新手上道,请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔!

    展开全文
  • 行内元素有哪些块级元素有哪些行内元素如何转换为块级元素行内元素:(以下列举比较常用的行内元素,详情可在w3cschool查询) <a>定义超链接 <b>字体加粗 <span>定义在文档中的行内元素 ...
  • 行内元素块级元素分别有哪些

    千次阅读 2021-05-09 16:33:17
    行内元素块级元素分别有哪些行内元素: < a > 、 < em > 、 < strong > 、 < span > 、 < i > 、< label >、 < br > 块级元素: < div > 、 < p > ...
  • 常用行内元素列表: <a>标签可定义链接 <b>字体加粗 <br>换行 <img>图像 <input>输入框 <var>定义变量 ...块级元素列表: ...一,从概念的角度解释块级元素行内元素
  • 行内元素与块级元素

    2021-01-26 02:15:50
    一、行内元素 行内元素只占据其内容本身所占据的空间 二、块级元素 块级元素占据其父元素的整个空间,通常浏览器会在块级元素后加一个换行符。 三、行内元素示例 <span style="background-color: hotpink;">...
  • 块级元素: button div dl dt form h1~h6 hr ul li ol p table tbody td th tfoot thead tr header footer section aside article canvas 行内元素 i、img、a、b、br 、input、select、video、textarea、strong、...
  • HTML5 行内元素有哪些,块级元素有哪些, 空元素有哪些? (1)行内元素 inline element a - 锚点 b - 粗体 ( 不推荐 ) strong - 粗体强调 br - 换行 em - 强调 i - 斜体 img - 图片 input - 输入框 label - 表格标签 ...
  • 行内元素块级元素 、行内块元素 区别 行内元素 无论内容多少,总是独占一行 设置宽高无效 对margin仅设置左右方向有效,上下无效;padding设置上下左右都有效 不会自动进行换行 行内元素只能容纳文本或者其他行内...
  • 行内元素列表:标签可定义锚表示一个缩写形式定义只取首字母缩写字体加粗bai可覆盖默认的文本方向大号字体加粗换行引用进行定义定义计算机代码文本定义一个定义项目定义为强调的内容斜体文本效果向网页中嵌入一幅图像...
  • 块级元素(block)特性: 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示; 宽度(width)、高度(height)、内边距(padding)、边框(border)和外边距(margin)都可控制; 内联元素(inline)特性: 和...
  • text-align只能对行内元素起作用,对块级元素不起作用 text-align会被后代元素继承 <style> .outer{ width: 200px; height: 200px; background-color: #bfa; text-align:center; } </style>...
  • 二、块级元素块级元素占据其父元素(容器)的整个空间,因此创建了一个“块”。通常浏览器会在块级元素前后另起一个新行。三、行内元素示例HTMLCSSExample四、块级元素示例HTMLCSSExample五、行内元素的特点5.1 和其他...
  • 4.块级元素中可以包含块级元素行内元素 5.块级文字元素中不能放入其他块级元素 6.块级大多为结构性标记 常见块级元素: <center>...</center> 地址文字 <h1>…</h1> 标题一级 <h2&...
  • 借鉴于:https://www.cnblogs.com/yxm440/p/7667539.html块级元素:大多数为结构性标记:```...... 地址文字... 标题一级... 标题二级... 标题三级... 标题四级... 标题五级... 标题六级 水平分割线... 段落... 预格式...
  • 行内元素与块级元素的水平垂直居中,很多种方式,以下是我喜欢用的方式; 一、 水平居中 行内元素 .parent { text-align: center; } 块级元素 margin方式: .son { margin: 0 auto; } flex布局 .parent { ...
  • 常见的块级元素:< h1 >~< h6 >、< p >、< div >、< ul >、< ol >、< li >、< dd >、< dt >、< dl >等,其中 < div > 标签是最典型的
  • 可以容纳行内元素块级元素,也可以容纳内联元素和其他元素7.两者可以通过display来互相转换8.举例:div p h1-h6 table form ul ol dl 等等行内元素:1.display为inline2.会其他元素排列在...
  • 行内元素块级元素,行内块级元素之间的区别前言一、行内元素特点:二、使用步骤1.引入库2.读入数据总结 前言 本次培训主要讲解了HTML的各种标签,感觉受益良多。所以我在课下总结了一下行内元素块级元素,行内...
  • 块级元素 会独占一行,默认情况下,其宽度自动填满其父元素宽度 块级元素可以设置width,height属性. 块级元素即使设置了宽度,仍然是独占一行. 块级元素可以设置margin和padding属性. 块级元素对应于display:block...
  • (1)行内元素: 对该行内元素的父元素设置text-align:center (2)块级元素: 对该块级元素设置margin:0 auto (3)弹性盒子中的水平居中: 将某元素定义为弹性盒子:display:flex; 然后在水平方向居中...
  • 以下汇总三种行内元素转为块级元素的方法:(1)display(2)float(3)position(absolute和fixed)少说多做,运行以下代码看效果:1 2 3 4 5 6 行内元素转为块级元素 7 8 *{ 9 margin: 0;10 padding: 0;11 ...
  • 1.行内元素与块级元素直观上的区别二、行内元素与块级元素的三个区别 行内元素会在一条直线上排列(默认宽度只与内容有关),都是同一行的,水平方向排列。 块级元素各占据一行(默认宽度是它本身父容器的100%...
  • 之相反,行内元素,则没有自己的独立空间,它是依附于其他块级元素存在的,因此,对行内元素设置高度、宽度、内外边距等属性,都是无效的。(置换元素除外)2.行内、块级元素区别:1,块级元素独占一行,其宽度自动...
  • 内联元素(inline element)a – 锚点abbr – 缩写acronym – 首字b – 粗体(不推荐)big – 大字体br – 换行em – 强调font – 字体设定(不推荐)i – 斜体img – 图片input – 输入框label – 表格标签s – 中划线(不...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 47,849
精华内容 19,139
关键字:

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