CSS——元素分类

1.标签元素被分为三大类:块状元素、内联元素和内联块元素。

(1)常见块状元素有:<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

(2)常见内联元素:<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

(3)常见内联块元素:<img>、<input>

2.块级元素

如<div>、<p>、<h1>块级元素,每个元素都从新的一行开始,其后元素也另起一行。元素的高度、宽度、行高和底边距都可以设置。

3.内联元素

(1)在html中,<span>、<a>、<label>、 <strong> 和<em>就是典型的内联元素(行内元素)(inline)元素。当然块状元素也可以通过代码display:inline将元素设置为内联元素。

(2)元素的高度、宽度、顶部和底部都不可设置,元素的宽度就是包含的文字或图片的宽度,不可改变。

(3)行内元素之间有“回车”、“tab”和“空格”时就会出现间隙。

4.内联块状元素

(1)(inline-block)同时具备内联元素、块状元素的特点。代码display:inline-block就是将元素设置为内联块状元素。

(2)inline-block 元素特点:元素的高度、宽度、行高以及顶和底边距都可设置。

(3)例子:

a{
display:inline-block;
20px;/*在默认情况下宽度不起作用*/
height:20px;/*在默认情况下高度不起作用*/
background:pink;/*设置背景颜色为粉色*/
text-align:center; /*设置文本居中显示*/
}

可以看到使用了

display:inline-block;内联块状元素
效果:



原文地址:https://www.cnblogs.com/carrier-sisi/p/7600242.html