CSS的元素显示模式（块级元素，行内元素，行内块元素显示特点）

良风抚旧

已于 2022-02-06 11:32:37 修改

阅读量967

点赞数

分类专栏：前端文章标签： css html 前端

于 2022-01-19 16:03:42 首次发布

本文链接：https://blog.csdn.net/Arcofcosmos/article/details/122583225

版权

16 篇文章 0 订阅

订阅专栏

常见的块元素有

<h1>~<h6>,<p>,<div>,<ul>,<ol>,<li>

等，其中标签是最典型的块元素。

块级元素的特点

①比较霸道，自己独占一行。

②高度，宽度、外边距以及内边距都可以控制。

③宽度默认是容器（父级标签宽度）的100％

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

注意:

行内元素

常见的行内元素有

<a>,<strong>,<b>,<em>,<i>,<del>,<s>,<ins>,<u>,<span>

等，其中<span>标签是最典型的行内元素。有的地方也将行内元素称为内联元素。

行内元素的特点

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

②高、宽直接设置是无效的。

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

④行内元素只能容纳文本或其他行内元素，不能放置块级元素。

注意

行内块元素

在行内元素中有几个特殊的标签

<img/>,<input/>,<td>

它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。

行内块元素的特点

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

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

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

元素显示模式转换

特殊情况下，使用元素显示模式转换，例如行内元素转换为块级元素的显示模式。

比如增加链接<a>的触发范围，或者将多个div标签放在一行显示。在样式表中采用display属性进行显示模式转换。

<a> {
	color: red;
	display: block;				//转为块级元素可以设置宽度与高度，增加显示范围
}

display: block;     			//转换为块级元素
display: inline;				//转换为行内元素
display: inline-block;			//转换为行内块元素

单行文字垂直居中

css没有直接垂直居中的属性，但是可以通过让文字的行高等于盒子的高度，即可使文字在当前盒子中垂直居中。

<div> {
	width: 200px;
	height: 40px;
	line-height: 40px;       		//文字行高等于盒子的高度即可垂直居中
}

行高等于文字高度+上下行边距，上下行边距的空隙会将文字挤到中间。

关注