🍒1.什么是行内元素?
1、行内元素
span、a、br、b、strong、img、input、textarea、select、sup、sub、em、del
行内元素:
1.和相邻的行内元素在一行上。
2.高度和宽度无效,但是水平方向上的padding和margin可以设置,垂直方向上的无效。
3.默认的宽度就是它本身的宽度。
4.行内元素只能容纳纯文本或者是其他的行内元素(a标签除外)。
行内元素的使用
行内元素常用标签代码演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行内元素和块级元素</title>
<!--首先给div跟span设置一个背景颜色-->
<style>
.within{
background-color: orange;
}
</style>
</head>
<body>
<!--行内元素-->
<a class="within">我是a,我是行内元素</a>
<b class="within">我是b,我是行内元素</b>
<span class="within">我是span,我是行内元素</span>
<select class="within">我是select,我是行内元素</select>
<strong class="within">我是strong,我是行内元素</strong>
</body>
</html>
运行效果如下:
这里也就体现出了行内元素不会独占一行。
🥭2.什么是块级元素?
块级元素:
1.块级元素会独占一行。
2.高度,行高,外边距和内边距都可以单独设置。
3.宽度默认是容器的100%。
4.可以容纳内联元素和其他的块级元素。
块级元素的使用
块级元素常见标签代码使用:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行内元素和块级元素</title>
<style>
.block{
background-color: #00ffff;
}
</style>
</head>
<body>
<!--块级元素-->
<ol class="block">我是ol,我是块级元素</ol>
<ul class="block">我是ul,我是块级元素</ul>
<p class="block">我是p,我是块级元素</p>
<dl class="block">我是dl,我是块级元素</dl>
<div class="block">我是div,我是块级元素</div>
<h1 class="block">我是h1,我是块级元素</h1>
<h class="block">我是h,我是块级元素</h>
</body>
</html>
运行结果如下:
这里也就体现出了块级元素会独占一行。
🍊3.行内元素和块级元素的区别?
三、区别:
显示方式:块级元素以块的形式显示,单独占据一行,并从上到下排列,会自动换行;而行内元素与其他元素共享一行,从左到右排列,不会独占一行。
盒模型:块级元素可以设置宽度、高度、内外边距等样式属性,其大小由内容和盒模型属性决定;而行内元素的宽度和高度默认由内容决定,无法直接设置。
容纳内容:块级元素可以容纳其他块级元素和行内元素;而行内元素只能容纳其他行内元素或纯文本内容,不能包含块级元素。
默认换行:块级元素会在新行上开始,默认情况下会自动换行;而行内元素不会自动换行,在超出父容器宽度时可能被截断或溢出。
CSS布局:使用块级元素可以实现更灵活的布局和组织网页内容的结构;而使用行内元素可以对文本内容进行精确控制和样式化。
🍅4.行内元素和块级元素的相关转换
display 属性
**三个属性:inline block inline-block**
下面依次介绍三个属性:
inline:
值为 inline 将变成行内元素,比如 div
不能设置宽高,和行内元素并排
block:
值为 block 的,比如 span
能设置宽高(填充父级),独占一行。
inline-block
值为 inline-block 也就是变成行内块元素
代码演示:
- 首先给div跟span设置一个背景颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行内元素和块级元素</title>
<!--首先给div跟span设置一个背景颜色-->
<style>
.div{
background-color: pink;
}
.span{
background-color: orange;
}
</style>
</head>
<body>
<!--行内元素-->
<div class="div">我是div</div>
<span class="span">我是span</span>
</body>
</html>
效果如下:
2.使用display 属性转换行内,块级元素:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行内元素和块级元素</title>
<!--首先给div跟span设置一个背景颜色-->
<style>
.div{
background-color: pink;
/*转化成行内元素*/
display: inline;
}
.span{
background-color: orange;
/*转化成块级元素*/
display: block;
}
</style>
</head>
<body>
<!--行内元素-->
<div class="div">我是div</div>
<span class="span">我是span</span>
</body>
</html>
效果如下:
3.再把div和span转换为行内块元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行内元素和块级元素</title>
<!--首先给div跟span设置一个背景颜色-->
<style>
.div{
background-color: pink;
/*转换为行内块元素*/
display: inline-block;
}
.span{
background-color: orange;
/*转换为行内块元素*/
display: inline-block;
}
</style>
</head>
<body>
<!--行内元素-->
<div class="div">我是div</div>
<span class="span">我是span</span>
</body>
</html>
效果如下:
🍏5.注意:
需要注意的是,并非所有HTML标签都严格遵循这两种分类。有些标签根据上下文环境可以表现为块级或行内元素,这被称为"可替换元素"。例如标签默认是行内元素,但可以通过CSS的display属性修改为块级元素。同时,也有一些标签具有混合性质,既可以作为块级元素使用,又可以作为行内元素使用,如
🍋最后🍋
总结不易,希望小宝们不要嫌弃哦!😀