您的位置:首页 > 文旅 > 美景 > 网站建设心得_成都住建局官网_建站官网_营销和运营的区别是什么

网站建设心得_成都住建局官网_建站官网_营销和运营的区别是什么

2025/3/18 4:35:37 来源:https://blog.csdn.net/qq_37212162/article/details/146053443  浏览:    关键词:网站建设心得_成都住建局官网_建站官网_营销和运营的区别是什么
网站建设心得_成都住建局官网_建站官网_营销和运营的区别是什么

大白话行内和块级元素,差异在哪?

什么是行内元素和块级元素

在网页开发里,HTML 元素可以分成行内元素和块级元素,这两种元素在页面里的显示方式和特性是不一样的。

行内元素

行内元素就像是排队的人,它们会一个挨着一个地排列在同一行上,不会强制换行。只有在这一行空间不够的时候,才会换到下一行接着排。而且行内元素的宽度和高度是由它里面的内容决定的,你没办法直接去设置它的宽度和高度。常见的行内元素有 <a>(超链接)、<img>(图片)、<input>(输入框)、<span> 等等。

块级元素

块级元素就像是一个个独立的房间,它们会自己独占一行,不管宽度够不够,下一个块级元素都会跑到新的一行去。你可以给块级元素设置宽度和高度,要是不设置宽度,它默认会占满父元素的整个宽度。常见的块级元素有 <div><p>(段落)、<h1> - <h6>(标题)、<ul>(无序列表)、<ol>(有序列表)等等。

差异总结

  1. 显示方式:行内元素在一行里依次排列,块级元素独自占一行。
  2. 宽度和高度:行内元素的宽高由内容决定,不能直接设置;块级元素可以设置宽高,不设置宽度时默认占满父元素宽度。
  3. 内外边距:行内元素的上下外边距设置无效,块级元素可以正常设置内外边距。

代码示例

<!DOCTYPE html>
<html lang="en"><head><!-- 设置文档的字符编码为 UTF-8 --><meta charset="UTF-8"><!-- 设置页面在移动设备上的初始缩放比例 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 设置网页的标题 --><title>行内元素和块级元素示例</title><style>/* 给所有块级元素添加一个灰色边框和内边距,方便观察 */div, p, h1 {border: 1px solid gray;padding: 10px;}/* 给所有行内元素添加一个红色边框和内边距,方便观察 */a, span {border: 1px solid red;padding: 5px;}</style>
</head><body><!-- 块级元素示例 --><!-- h1 是块级元素,会独占一行 --><h1>这是一个块级标题</h1><!-- p 是块级元素,会独占一行 --><p>这是一个块级段落,它会独自占一行,不管宽度够不够,下一个元素都会跑到新的一行。</p><!-- div 是块级元素,会独占一行 --><div>这是一个块级 div 元素,也会独自占一行。</div><!-- 行内元素示例 --><!-- a 是行内元素,会和其他行内元素排在同一行 --><a href="#">这是一个行内超链接</a><!-- span 是行内元素,会和其他行内元素排在同一行 --><span>这是一个行内 span 元素。</span>
</body></html>

代码解释

  • 在 HTML 部分,我们用了 <h1><p><div> 这些块级元素,它们每个都会独自占一行。
  • 同时也用了 <a><span> 这两个行内元素,它们会在同一行依次排列。
  • 在 CSS 部分,我们给块级元素添加了灰色边框和内边距,给行内元素添加了红色边框和内边距,这样就能更清楚地看到它们的显示效果。

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com