CSS基础知识(三)CSS元素显示模式（css如何设置元素隐藏）
一、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