本文深入探讨了内联元素和块元素的特性，包括内联元素无法设置宽度和高度、垂直方向上的外边距不影响布局，以及如何通过display属性将内联元素转换为块元素。展示了使用display属性实现元素转换的HTML和CSS代码，并对比了内联元素和块元素在盒子模型中的差异，特别是margin的叠加规则。文章通过实例帮助读者理解这些概念并应用于实际布局设计。
总览
1.内联元素不能设置宽度和高度
2.内联元素在垂直方向上，padding、border、margin都不会影响其布局
3.内联元素可以被设置成块元素
4.内联元素的盒子模型，在水平方向上marigin是不能叠加的，这和块的盒子模型在垂直方向上margin的叠加机制不同。
一、内联元素盒子模型 · 实操
1.HTML代码：
2.CSS代码：
3.显示效果：
二、display 属性
1.功能：
1.1 可以让 内联元素 和 块元素 相互转换
1.2 可选值：
· inline：将元素设置为 内联元素
· block：将元素设置为 块元素
· inline-block：将元素设置为 行内块元素（同时具有内联元素和块元素的特性）
2.HTML代码：
3.CSS代码：
4.显示效果：
1587
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
