一、CSS的元素显示模式

1.作用：网页标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局页面
2.HTML元素一般分为块元素和行内元素

（一）块元素

1.div为最典型的块元素，还有h1-h6,p,ul,ol,li等
2.特点

• 比较霸道，自己独占一行
• 高度，宽度，外边距以及内边距都可以控制
• 宽度默认是容器（父级宽度）的100%
• 是一个容器及盒子，里面可以放行内或块级元素

3.注意

• 文字类的元素内不能使用块级元素，如：p
• h1-h6等都为文字类的块级标签，里面也不能放其他块级元素

（二）行内元素

1.span为最典型的行内元素，还有a,strong,b,em,i,del,s,ins,u等
2.特点

• 相邻行内元素在一行上，一行可以显示多个
• 高度、宽度直接设置是无效的
• 默认宽度就是它本身内容的宽度
• 行内元素只能容纳文本或其他行内元素

3.注意

• 链接里面不能再放链接
• 特殊情况，链接a里面可以放块级元素，但给a链接转换一下块级模式最安全

（三）行内块元素

1.同时有块元素和行内元素的特点，如：img，input,td等
2.特点

• 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙，一行可以显示多个（行内元素特点）
• 默认宽度就是它本身内容的宽度（行内元素特点）
• 高度，行高外边距以及内边距都可以控制（块级元素特点）

（四）元素显示模式转换

1.转化为块元素（display:block;）

2.转化为行内元素（display:inline;）

3.转化为行内块（display:inline-block;）

单行文字垂直居中的小技巧

总结

版权声明：本文为CSDN博主「依旧i248」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

原文链接：
https://blog.csdn.net/weixin_65548623/article/details/124192437