精华内容
下载资源
问答
  • 行内元素 行内元素是在一行进行展示的元素...行内元素设置样式display:block即可转换为块级元素块级元素 块级元素会完全占据一行,后面跟随的元素则会换行后在进行展示。 块级元素列表 定义地址

    行内元素

    行内元素是在一行进行展示的元素,在HTML的流式布局范围内,若在可视范围内一行不能全部展示则会自动换行。

    行内元素不能设置高宽。

    行内元素设置样式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>

    客户端脚本

     demo


    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html"; charset="utf-8">
    		<style type="text/css">
    			input{
    				width:500px;
    			}
    			div{
    				margin:5px 0px;
    				width:500px;
    				border:1px solid #888888;
    			}
    			
    		</style>
    	</head>
    
    	<body>
    		<input type="text" value="行内元素">
    		<input type="text" value="行内元素">
    		<input type="text" value="行内元素">
    		<div>块级元素</div>
    		<div>块级元素</div>
    		<input type="text" value="转换为块级元素的行内元素" style="display:block;">
    		<input type="text" value="转换为块级元素的行内元素" style="display:block;">
    		<div>块级元素</div>
    		<div>块级元素</div>
    	</body>
    </html>


    展开全文
  • 行内元素与块级元素区别

    这一篇应当结合盒模型那篇文章一起看。

    1 行内元素与块级元素

    举出几个我可能会混淆的元素类型:

    • 块级元素:<table><caption><tr><th><td><tfoot><dl><dt><dd><hr><ul><ol><li><pre>
    • 行内元素:<abbr><br><input><textarea>
    • 可变元素:<button>

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

    • 1、行内元素与块级元素直观上的区别
      • 行内元素会在一条直线上排列,都是同一行,水平方向排列
      • 块级元素会各占据一行,垂直方向排列
    • 2、块级元素可以包含行内元素以及块级元素,行内元素不能包含块级元素
    • 3、行内元素在盒模型上设置widthheight无效,margin-topmargin-bottompadding-toppadding-bottom无效

    3 <div>元素

    这一节介绍的<div><span>元素堪称页面的钢铁支架,利用它们就可以构建重要的支撑架构,一旦有了这些架构,就可以用各种新颖、强大的方式为它们增加样式。
    在构建结构之前,首先要找出一些逻辑区,然后把这些逻辑区分别包围在一个<div>元素中。
    逻辑区是页面上彼此相关的一组元素,而<div>元素只是纯粹的结构,它在页面中没有任何“外观”或默认样式,也就是说,<div>元素只是一个块元素,可以对它引用你希望的任何样式。(比如对图像元素设置对齐样式)
    不能滥用<div>元素,使用<div>元素一定要有助于你将页面分解为逻辑区,从而保证结构清晰并便于指定样式,相反的,就只会使得页面变得更复杂,而没有实际的好处。

    展开全文
  • 版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明...一次偶然的面试遇到的题目,虽然当时知道块级元素行内元素区别,但是没有仔细去想。 一、行内元素与块级元素 ...

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/AlanZhuHaiHua/article/details/107817213

           一次偶然的面试遇到的题目,虽然当时知道块级元素和行内元素的区别,但是没有仔细去想。

    一、行内元素与块级元素

    <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>

    客户端脚本

     

    二、行内元素与块级函数的三个区别

    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> 客户端脚本

    二、行内元素与块级函数的三个区别

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

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

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

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

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

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


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

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

    展开全文
  • 行内元素与块级元素

    千次阅读 2015-08-11 07:51:40
    一、行内元素与块级元素的三个区别 1.行内元素与块级元素直观上的区别  行内元素会在一条直线上排列,都是同一行的,水平方向排列  块级元素各占据一行,垂直方向排列。块级元素从新行开始结束接着一个断行。 2....
  • 下面小编就为大家带来一篇全面了解行内元素与块级元素区别。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 二、块级元素块级元素占据其父元素(容器)的整个空间,因此创建了一个“块”。通常浏览器会在块级元素前后另起一个新行。三、行内元素示例HTMLCSSExample四、块级元素示例HTMLCSSExample五、行内元素的特点5.1 和其他...
  • 行内元素与块级元素区别 行内元素最好不要包裹块级元素,但是块级元素可以任意的包裹行内元素 行内元素如果其上一个元素也是行内元素,则他们会分布在统一水平线上,即在一行上排列,块级元素不论上一个元素是行内...
  • 行内元素块级元素 盒模型区别 4.块级元素 overflow 5.实践 1.HTML 行内元素 块级元素 行内元素一般是内容的容器,而块级元素一般是其他容器的容器。一般情况下,行内元素 只能包含内容或者其它行内元素,...
  • 一、行内元素与块级元素 块级元素列表 定义地址 定义表格标题 定义列表中定义条目 定义文档中的分区或节 定义列表 定义列表中的项目 ...
  • 行内元素与块级元素区别及转换

    千次阅读 2016-06-03 11:17:27
    块级元素列表 定义地址 定义表格标题 定义列表中定义条目 定义文档中的分区或节 定义列表 定义列表中的项目 定义一个框架集 创建 HTML 表单 定义最大的标题 定义...
  • 1、行内元素&块级元素 行内元素:指该元素标记的内容不不会对现在的结构造成影响。 块级元素:单独占据一行。 常见的行内元素: 内联元素(inline element): a - 锚点,abbr - 缩写,acronym - 首字,...
  • 想起之前工作面试时,面试官问的一个问题:行内元素有哪些,和块级元素有什么区别?这是一道蛮基础的面试题,但是很多初学者平时只注重标签语义,忽视了标签行内和块级的特性, 因此对于上述问题很有可能答不上来...
  • 一、块级元素 每个块级元素默认单独占一行,每增加一个块级元素时,会自动换行,从上而下自动排列。 二、行内元素 ...元素在一行内水平排列 ...三、常见的块级元素和...3、行内元素块级元素在和模型上的区别  行
  • 行内元素与块级元素直观上的区别 1.行内元素会在一条直线上排列,都是同一行的,水平方向排列块级元素各占据一行,垂直方向排列。块级元素从新行开始结束接着一个断行。 2.块级元素可以包含行内元素块级元素。...
  • 对于前端初学者,行内元素块级元素有时会“傻傻分不清”,这里我简单说一下行内元素与块级元素。用通俗的话来讲,块级元素就是一次至少占一行的元素,无论内容是否真的填满了一行,都会占据至少一行的空间,再写...
  • 在学习HTML5中的容易把行内元素与块级元素混搅因此我总结了行内元素与块级元素区别块级元素:总是在新行上开始,占据一整行;高度,行高以及外边距和内边距都可控制; 宽度始终是浏览器宽度一样,内容...
  • 1.行内元素与块级元素直观上的区别  行内元素会在一条直线上排列,都是同一行的,水平方向排列  块级元素各占据一行,垂直方向排列。块级元素从新行开始结束接着一个断行。 2.块级元素可以包含行内元素块级...
  • 行内元素块级元素

    2021-03-12 20:34:58
    行内元素块级元素 行内元素块级元素区别 常见的行内元素块级元素
  • html行内元素块级元素区别目录html行内元素...块级元素行内元素区别行内元素与块级元素的三个区别行内元素与块级元素直观上的区别 行内元素会在一条直线上排列,都是同一行的,水平方向排列 块级元素各占据一行
  • 一、行内元素与块级元素的三个区别 1.行内元素与块级元素直观上的区别 行内元素会在一条直线上排列,都是同一行的,水平方向排列 块级元素各占据一行,垂直方向排列。块级元素从新行开始结束接着一个断行。 2....
  • 【前端面试】行内元素与块级元素

    千次阅读 2017-10-04 16:04:26
    1.分类判断行内元素块级元素的快捷方法就是判断是否能并列。 块级元素 行内元素 2.不同点(1)块级元素会独占一行,其宽度自动填满其父元素宽度; 行内元素不会独占一行,相邻的行内元素会排列在同一行,直至...
  • 行内元素块级元素的特点不同网页布局行内元素块级元素通过css设定元素类型 网页布局 在学习css的各项属性值之前,我希望大家能先理解清楚行内元素块级元素的特点不同点,这对网页的布局真的十分重要,在我没有...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 43,093
精华内容 17,237
关键字:

行内元素与块级元素的区别