HTML元素分类:块级元素内联元素和内联块状元素

2022-11-28 17:58:30

在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。

1,blcok块状元素

常用的块状元素有：

什么是块级元素？在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点。

a{display:block;}

块级元素特点：

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

4、高度在不设置的情况下自适应，根据元素内容而定。

2，内联元素

常用的内联元素有：

inline内联元素

在html中，<span>、<a>、<label>、 <strong> 和<em>就是典型的内联元素（行内元素）（inline）元素。当然块状元素也可以通过代码display:inline将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素，从而使 div 元素具有内联元素特点。

 div{

     display:inline;

 }

......

<div>我要变成内联元素</div>

内联元素特点：

1、和其他元素都在一行上；（在不同行的每个元素之间还有一点间距，但若写在同一行的元素之间没有间距，如下44444 和4444455555的区别）

2、元素的高度、宽度及顶部和底部边距不可设置；

3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

例如，在HTML中有如下代码:

虽然两个span写在两行中，但是，在实现效果是：百度慕课网 33333 4444455555

3，inline-block 内联块状元素

常用的内联块状元素有：

内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，<img>、<input>标签就是这种内联块状标签。

inline-block 元素特点：

1、inline的特点：和其他元素都在一行上；

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

去除inline-block元素间间距的N种方法

一、现象描述

真正意义上的inline-block水平呈现的元素间，换行显示或空格分隔的情况下会有间距，很简单的个例子：

<input /> <input type="submit" />

间距就来了~~

我们使用CSS更改非inline-block水平元素为inline-block水平，也会有该问题：

.space a {

    display: inline-block;

    padding: .5em 1em;

    background-color: #cad5eb;

}

<div class="space">

    <a href="##">惆怅</a>

    <a href="##">淡定</a>

    <a href="##">热血</a>

</div>

不过，这类间距有时会对我们布局，或是兼容性处理产生影响，需要去掉它，该怎么办呢？以下展示N种方法（欢迎补充）！

二、方法之移除空格

元素间留白间距出现的原因就是标签段之间的空格，因此，去掉HTML中的空格，自然间距就木有了。考虑到代码可读性，显然连成一行的写法是不可取的，我们可以：

<div class="space">

    <a href="##">

    惆怅</a><a href="##">

    淡定</a><a href="##">

    热血</a>

</div>

或者是：

<div class="space">

    <a href="##">惆怅</a

    ><a href="##">淡定</a

    ><a href="##">热血</a>

</div>

或者是借助HTML注释：

<div class="space">

    <a href="##">惆怅</a><!--

    --><a href="##">淡定</a><!--

    --><a href="##">热血</a>

</div>

等。

四、让闭合标签吃胶囊

如下处理：

<div class="space">

    <a href="##">惆怅

    <a href="##">淡定

    <a href="##">热血</a>

</div>

注意，为了向下兼容IE6/IE7等喝蒙牛长大的浏览器，最后一个列表的标签的结束（闭合）标签不能丢。

在HTML5中，我们直接：

<div class="space">

    <a href="##">惆怅

    <a href="##">淡定

    <a href="##">热血

</div>

好吧，虽然感觉上有点怪怪的，但是，这是OK的。

您可以狠狠地点击这里：无闭合标签去除inline-block元素间距demo

五、使用font-size:0

类似下面的代码：

.space {

    font-size: 0;

}

.space a {

    font-size: 12px;

}

这个方法，基本上可以解决大部分浏览器下inline-block元素之间的间距(IE7等浏览器有时候会有1像素的间距)。不过有个浏览器，就是Chrome, 其默认有最小字体大小限制，因为，考虑到兼容性，我们还需要添加：
类似下面的代码：

.space {

    font-size: 0;

    -webkit-text-size-adjust:none;

}

码农公寓