CSS基础知识（三）CSS元素显示模式

一、CSS的元素显示模式

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

（一）块元素

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

• 比较霸道，自己独占一行

• 高度，宽度，外边距以及内边距都可以控制

• 宽度默认是容器（父级宽度）的100%

• 是一个容器及盒子，里面可以放行内或块级元素

3.注意

• 文字类的元素内不能使用块级元素，如：p

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

（二）行内元素

• 相邻行内元素在一行上，一行可以显示多个

• 高度、宽度直接设置是无效的

• 默认宽度就是它本身内容的宽度

• 行内元素只能容纳文本或其他行内元素

• 链接里面不能再放链接

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

（三）行内块元素

• 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙，一行可以显示多个（行内元素特点）

• 默认宽度就是它本身内容的宽度（行内元素特点）

• 高度，行高外边距以及内边距都可以控制（块级元素特点）

（四）元素显示模式转换

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