本文详细介绍了CSS中的块元素和内联元素，包括它们的显示方式、宽高设置和嵌套规则。块元素上下排列，可设置宽高，能包裹块元素和内联元素；内联元素左右排列，不换行，无法设置宽高，只能嵌套内联元素。两者在显示方式和嵌套上的区别通过实例进行了清晰的展示。
块元素和内联元素
文章由自己的学习历程总结而来，仅供大家参考，欢迎大家交流学习。
块元素
块元素是自带换行效果的元素，有div、p、h1~h6、列表、hr、br、table、form等，且具有以下性质：
- 显示时上下排列
- 可以设置宽高属性
- 块元素嵌套可以包裹块元素和内联元素,但是有个别标签比较特殊(p,h1~h6，dt)尽量只能包裹内联元素
内联元素
与块元素相对的内联元素是不具备换行效果的元素，有b、i、strong、em、span、img、input、a等，具有以下性质：
- 显示时左右排列，可以一行显示多个
- 不会自动换行无法设置宽高内联元素大小由内容撑开
- 内联元素只能嵌套内联元素
以下通过具体的例子对其做详细的解释
块元素与内联元素的区别
1.显示方式和宽高设置
我们在同一个界面分别设置两个块元素和两个内联元素，通过以下代码看一下两种元素的不同显示方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport
最低0.47元/天 解锁文章
扫一扫
866
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
