前端面试---块级元素和行内元素的区别

最新推荐文章于 2025-06-09 06:03:38 发布
原创 最新推荐文章于 2025-06-09 06:03:38 发布 · 329 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #css #css3 #面试

本文介绍了HTML中的块级元素和行内元素的区别，包括它们的特性、应用以及如何通过CSS进行元素转换。块级元素如div、p占据整行，可设置宽高；行内元素如a、span则在同一行显示，宽度自动适应。了解这些基础知识对于网页布局至关重要。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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

常见块级元素

div,p,table,form,ul,h1-h6

常见行内元素

a,span,img,input,label

块级元素特性：

  1. 独占一行
  2. 高度宽度margin，padding设置有效
  3. 宽度没有设置时，默认100%
  4. 块级元素可以包含块级和行内元素

行内元素特性：

  1. 和其他元素占一行显示
  2. 高度和宽度无法设置，padding可以设置，margin的top和bottom无法设置
  3. 行内元素不能包含块级元素

行内块元素特性

  1. 不自动换行
  2. 高度宽度padding和margin设置有效

块级元素和行内元素转换

转换为块级元素：display:block

转换为行内元素：display:inline

转换为行内块元素：display:inline-block

前端面试题：行内元素和块级元素是哪些？区别是什么？
qq_46582421的博客
01-06 731
一、行内元素： <span>、<a>、<br>、<b>、<strong>、<img>、<input>、<textarea>、<select>、<sup>、<sub>、<em>、<del> 二、块级元素： <address>、<center>、<h1>~<h6>、<hr>、<p>、&
前端面试查漏补缺，＜img＞是什么元素，属于块级元素还是行内元素？
weixin_42686892的博客
12-07 1458
<img /> 标签的基本使用 浏览器支持 所有主流浏览器都支持 <img> 标签 标签定义及使用说明 <img> 标签定义 HTML 页面中的图像 <img> 标签有两个必需的属性：src 和 alt 强烈推荐在开发中每个图像中都使用 alt 属性。这样即使图像无法显示，用户还是可以看到关于丢失了什么东西的一些信息。而且对于残疾人来说，alt 属性通常是他们了解图像内容的唯一方式 <img />究竟是什么元素 <img /> 是行内元
块级元素和行内元素的区别
dz45693的专栏
12-12 2759
块级元素和行内元素是布局最基本的两种元素,常见的块级元素有div,p,form,ul,ol,li等,常见的行内元素有span,strong,em等. 块级元素和行内元素有什么区别呢? 块级元素会独占一行,默认情况下,其宽度自动填满父元素宽度,行内元素不会独占一行,相邻的行内元素会排列在 同一行里,直到一行排不下才会换行,其宽度随元素内容变化而变化. 块级元素可以设置width,he
【HTML-16】深入理解HTML中的块元素与行内元素
最新发布
weixin_39033358的博客
06-09 1177
HTML元素分为块元素和行内元素两大类型。块元素独占一行，可设置宽高和边距，包含其他元素；行内元素共享行空间，宽高设置无效，只能包含文本或行内元素。CSS的inline-block结合了两者优点。HTML5引入了更细致的分类，但理解这两种基本元素类型仍是构建网页布局的基础。实际开发中需注意元素嵌套规则，合理运用display属性转换元素类型。随着Flexbox和Grid等现代布局技术的出现，这些基本概念仍是CSS布局的核心知识。
前端面试-v21
08-03
- 实际高度由内容决定，包括行内元素的字体大小、行间距，以及块级元素的高度。 8. **DOM操作** - `appendChild()`：添加节点到末尾。 - `insertBefore()`：在指定节点前面添加新节点。 - `removeChild()`：...
最新大厂前端面试题-面试指南html篇面试题.docx
06-06
2. 块级元素、行内元素和空元素 块级元素是指独占一行的元素，例如 `<h1>` 到 `<h6>`、`<div>`、`<p>` 等。行内元素是指与其他元素在同一行上的元素，例如 `<a>`、`<span>`、`<strong>` 等。空元素是指没有闭合标签...
前端面试----深信服面试题全概
huohuoit的博客
07-16 4639
这里结合了CSDN多位博主的深信服面试题，为了锻炼自己的答题能力和技术点理解，这里对博主的各个题目进行了自己的解答（最好用自己的理解自己的话解答），同时部分解答借鉴了博主的回答。记在word笔记的时候没有记录博主地址，但还是感谢分享，一起努力加油啊！ 一、HTML （1）常见的HTML块级元素和行内元素 （2）HTML5的新标签有什么了解，详述一下表单的新标签 （3）Image标签中alt和title有什么区别 二、CSS （1）CSS盒子模型（IE盒子模型，标准盒子模型） （2）CSS元素居
块级元素和行内元素区别
ice_yr的博客
07-19 338
块级元素特点： 1.总是从新行开始 2.高度，行高、外边距以及内边距都可以控制 3.宽度默认是容器的100% 4.可以容纳内联元素和其它块元素 行内元素特点： 1.和相邻行内元素在一行上 2.高、宽无效，但水平放向padding和margin可以设置，垂直方向的无效 3.默认元素就是它本身内容的宽度 4.行内元素只能容纳文本或其它行内元素 ...
块级元素和行内元素
dianshensha1063的博客
05-29 438
一直对块级元素和行内元素的区别和特性有点模糊，于是各方参考总结一下，方便自己梳理知识： 首先说一下什么是块级元素和行内元素块级元素，指自动占一行的元素，下一个元素（标签）会在新行开始，这行就是这个块级元素的地盘。例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF...
块级元素和行内元素的差别
qq_34797972的博客
07-23 230
首先，百度解释走一波： 块元素又名块级元素(block element)，和其对应的是内联元素(inline element)，都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始，相邻的块级元素将会在不同行显示。而当加入了css控制以后，块元素和内联元素的这种属性差异就不成为差异了。 然后说人话，简单点。可定义高和宽，有边框概念的元素称块级元素，与之相反就称为“行内元...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值