HTML学习之块级元素和行内元素的特征和区别(一)

本文详细介绍了HTML中的块级元素和行内元素的概念、特点及区别。包括它们如何影响页面布局,如宽度、高度及内外边距等属性的应用差异。

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

这几天在学习HTML,这里总结一下块级元素和行内元素的特征和区别,本文也是来自于其他同行的一些文章,在这里感谢一下那些作者,下面先把这些原文粘贴出来

http://www.cnblogs.com/Jackie0714/p/4923639.html

http://blog.youkuaiyun.com/yuyanqiao/article/details/8558118

一,下面从概念的角度来说一下块级元素和行内元素

1.块级元素,一般都是从新行开始,它可以容纳行内元素和其他块元素,常见块级元素比如div/p等。“form”这个快元素比较特殊,他只能来容纳其他块元素

2.行内元素:也叫做内联元素,一般都是语义级别的基本元素,内联元素已办只能容纳文本或者其他内联元素。

块元素(block element)和内联元素(inline element)都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都是从新行开始的。而当加了css控制以后,块元素可以变为内联元素,内联元素也可以变为块元素。

二。块级元素和内联元素的区别

1.块级元素会独占一行,其宽度自动填满其父元素宽度

行内元素不会独占一行,相邻的行内元素会排列到同一行里,直到一行排不下,才会换行,其宽度随元素的内容变化而变化,

2.一般情况下,块级元素可以设置width,height属性,行内元素设置width,height无效

(注意,块级元素设置了width宽度属性后仍然是独占一行的)

3.块级元素可以设置margin,padding属性,行内元素的水平方向的padding-left和padding-right都会产生边距效果,但是竖直方向上的padding-top和padding-bottom都不会产生边距效果。


这里做一些小小的总结。

### HTML CSS 中块级元素行内元素的转换 在 HTML CSS 中,可以通过设置 `display` 属性来实现块级元素行内元素之间的相互转换。以下是具体的说明: #### 块级元素转为行内元素 当需要将个默认为显示的元素(如 `<div>` 或 `<p>`)转换为行内显示时,可以将其 `display` 属性更改为 `inline`。 ```css .block-to-inline { display: inline; /* 将块级元素变为行内元素 */ } ``` 此方法会移除该元素周围的换行符,并允许其他内容与其在同行显示[^1]。 #### 行内元素转为块级元素 对于原本为行内显示的元素(如 `<span>` 或 `<a>`),如果希望其表现得像块级元素样占据整行,则可将其 `display` 属性设为 `block`。 ```css .inline-to-block { display: block; /* 让行内元素表现为块级元素 */ } ``` 通过这种方式,不仅可以让这些元素独占行展示,还可以应用宽度、高度以及上下边距等样式属性[^2]。 #### 使用 Inline-Block 的中间状态 除了简单的 `inline` `block` 转换外,还有种称为 `inline-block` 的值可供选择。它使得元素能够保持某些状特性的同时维持与其他行内元素并列排列的能力。 ```css .element-with-inline-block { display: inline-block; /* 结合了两者特性的布局模式 */ } ``` 这种技术特别适用于构建导航栏菜单项或其他需紧密相邻但又各自独立的小型组件群组场景下非常有用[^1]。 以上就是关于如何利用CSS中的display属性来进行HTML标签之间不同类型间互相转变的知识点介绍。 ### 示例代码 下面是个完整的例子演示了从行内的变化过程: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Element Display Conversion</title> <style> .original-div{ width: 100px; height:50px ; background-color:red; } .converted-span{ display:block; border:solid black 1px; } </style> <body> <div class='original-div'></div><br/> <span>This is normal span.</span><br/><br/> <!-- Converting Span To Block --> <span class="converted-span">Now I am behaving as BLOCK!</span> </body> </html> ```
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值