一文搞懂行内元素和块级元素的区别
Posted 工程师-小白
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一文搞懂行内元素和块级元素的区别相关的知识，希望对你有一定的参考价值。
行内元素
不会自动进行换行；元素的宽高不可设置；内边距可以设置、外边距水平方向有效，竖直方向无效；元素宽度在不设置的情况下，随内部元素的内容变化。
常见的行内元素
span , a ,strong ,b ,em , i , big ,small ,label ,img , input , select ,textarea
块级元素
独占一行；元素的宽高、以及内外边距都可设置；元素宽度在不设置的情况下，是它本身父容器的100%。
常见的块级元素
div , h1—h6 , p , ul , ol , dl , table , form
行内元素和块级元素之间的区别
| 是否独占一行 | width、height | padding、margin | 默认宽高 | 常见标签 | |
|---|---|---|---|---|---|
| 块级元素 | 是 | 有效 | 有效 | 撑满父元素 | div p h ul ol dl table form |
| 行内元素 | 否 | 无效 | padding有效； margin水平方向有效，竖直方向无效 | 随内部元素的内容变化 | soan a strong i img input select |
| 行内块元素 | 否 | 有效 | 有效 | 随内部元素的内容变化 |
行内元素和块级元素之间的转化
- 块级元素>>行内元素display:inline
<div> DIV1 </div>
<div> DIV2 </div>
display:inline//转化为行内元素之后，这两个div盒子就会在同一行进行显示
<div style="display:inline"> DIV1 </div>
<div style="display:inline"> DIV2 </div>
- 行内元素>>块级元素
方法一: display:block
<span > SPAN1 </span>
<span > SPAN2 </span>
display:block//转化为块级元素之后，span标签就会变成一个块占一行
<span style= "display:block "> SPAN1 </span>
<span style= "display:block "> SPAN2 </span>
方法二: float
给行内元素加上一个浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.red {
background-color: red;
width: 100px;
height: 100px;
}
.blue {
background-color: blue;
width: 100px;
height: 100px;
color: white;
float: left;
}
</style>
</head>
<body>
<div class="red">我是div标签</div>
<span class="blue">我是span标签,加上float:left</span>
</body>
</html>
因为span标签是行内元素，不能设置width和height属性 他的大小是由span标签内部文字大小决定的
加上float之后，就相当于把行内元素转化为块级元素，因此他就具备了宽和高的属性
具体显示结果如上图所示
注意：
display：inline 对应的不显示是display：none
display：block 对应的不显示是hidden
以上是关于一文搞懂行内元素和块级元素的区别的主要内容，如果未能解决你的问题，请参考以下文章